JS十六进制颜色（#fff）与RGB, HSL颜色的相互转换（实用、赞）

野性酷女 2022-12-05 15:21 516阅读 0赞

原文出处：[https://www.haorooms.com/post/color\_rgb\_transform][https_www.haorooms.com_post_color_rgb_transform]

延伸阅读：[用js生成全色系调色盘的算法][js]

前言

今天做了这个需求，就是前端支持rgba设置，但是后台生成图片的时候不支持rgba,需要2个值。分别是一个十六进制颜色值和一个opacity透明度，这就要我这边传值的时候，把原来的rgba转换成2个值，然后传给后台。（注，之所以前端没有分成2个字段，是因为前端设置颜色的时候直接用一个rgba设置的，这样用户体验好，分别设置颜色和透明度的话，还要分2次，对用户来说稍微有点麻烦。）

## 转换方法 ##

转换方法其实网上搜索也能搜索到，这里暂时列一下:

### rgb转为十六进制颜色 ###

### 十六进制颜色转为RGB ###

方法二： 用dom的方式

var colorToRgb = function (color) {
        var div = document.createElement('div');
        div.style.backgroundColor = color;
        document.body.appendChild(div);
        var c = window.getComputedStyle(div).backgroundColor;    
        document.body.removeChild(div);
        return c;
    };

## HSL和RGB的互转 ##

**一、HSL转RGB**

/**
     * HSL颜色值转换为RGB. 
     * 换算公式改编自 http://en.wikipedia.org/wiki/HSL_color_space.
     * h, s, 和 l 设定在 [0, 1] 之间
     * 返回的 r, g, 和 b 在 [0, 255]之间
     *
     * @param   Number  h       色相
     * @param   Number  s       饱和度
     * @param   Number  l       亮度
     * @return  Array           RGB色值数值
     */
    function hslToRgb(h, s, l) {
        var r, g, b;
    
        if(s == 0) {
            r = g = b = l; // achromatic
        } else {
            var hue2rgb = function hue2rgb(p, q, t) {
                if(t < 0) t += 1;
                if(t > 1) t -= 1;
                if(t < 1/6) return p + (q - p) * 6 * t;
                if(t < 1/2) return q;
                if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
                return p;
            }
    
            var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            var p = 2 * l - q;
            r = hue2rgb(p, q, h + 1/3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1/3);
        }
    
        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    }

**二、RGB转HSL**

/**
     * RGB 颜色值转换为 HSL.
     * 转换公式参考自 http://en.wikipedia.org/wiki/HSL_color_space.
     * r, g, 和 b 需要在 [0, 255] 范围内
     * 返回的 h, s, 和 l 在 [0, 1] 之间
     *
     * @param   Number  r       红色色值
     * @param   Number  g       绿色色值
     * @param   Number  b       蓝色色值
     * @return  Array           HSL各值数组
     */
    function rgbToHsl(r, g, b) {
        r /= 255, g /= 255, b /= 255;
        var max = Math.max(r, g, b), min = Math.min(r, g, b);
        var h, s, l = (max + min) / 2;
    
        if (max == min){ 
            h = s = 0; // achromatic
        } else {
            var d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch(max) {
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
        }
    
        return [h, s, l];
    }

## rgba转化为2个值得方法 ##

watch: {
        'background'(val) {
          // 转换成2个字段，用了比较笨的办法转吧
          let tempval = val.replace('rgba(', '').replace(')', '').split(',')
          this.$set(this.haorooms.data, 'background', {})
          this.$set(this.haorooms.data.background, 'color', `rgb(${tempval[0]},${tempval[1]},${tempval[2]})`)
          this.$set(this.haorooms.data.background, 'opacity', tempval[3])
        }
      }

## 2个值转为RGBA的方法（回填需要） ##

if (this.haorooms.data.background) {
      let color = this.colorToRgb(this.templateData.data.background.color) // 上面列举的方法
      let tempval = color.replace('rgb(', '').replace(')', '').split(',')
      tempval.push(this.templateData.data.background.opacity)
      this.background = `rgba(${tempval.join(',')})`
    }

[https_www.haorooms.com_post_color_rgb_transform]: https://www.haorooms.com/post/color_rgb_transform
[js]: https://blog.csdn.net/xinyu198736/article/details/83939766