颜色的表示：RGB vs HSL || 实现一个颜色选择器

[gogoend]

哇，我的网页变色了

在制作网页的过程中，我们总会用CSS来为网页中各个元素增加颜色，比如文字颜色，背景等等。

作为一只假装在做前端的设计师，笔者对各种颜色的调配自然是略有兴趣啦。在此来整理一下RGB与HSL这两种颜色模式分别是什么。

[gogoend]

颜色的表示方式

首先，在此我们需要一些工具：

• 脑子：得带有空间想象功能，大致可进行简单的数学运算，模拟三维空间 我们借助坐标轴来想象一下颜色的空间。假设颜色是在CSS中进行表示的。

  RGB

  RGB，红绿蓝，也就是光的三原色，CSS字符串表示为 rgb(r,g,b) 或 #rrggbb ，将这三个值对应到XYZ三个坐标轴上，可以得到8个极值点，连线后最终可以得到一个立方体，原点为(0,0,0)，为全黑；原点的对角线（相对整个立方体）所连的点为(255,255,255)，为全白。

HSL

HSL，即色相、饱和度、亮度。CSS字符串表示为 hsl( h , s%, l% )

// 下列PDF文件可使用Photoshop打开，以查看图层 HSL.pdf

• 色相即为H（Hue），其单位是角度（deg）值，大致可用下图进行表示： 通过在图中吸色，发现RGB三个分量总有一个量为100%，而HSL分量中，S、L分量均为100%。（该图是在PS中，使用圆锥渐变在圆形选区中央拖拽来制作的） 一般来说，设置红色为0°，中间经过橙色、黄色、绿色、青色、蓝色、紫色的过渡，在360°时回到红色。

• 饱和度（Saturation），相当于颜色的鲜艳程度，无单位，取值在[ 0, 1 ]区间（CSS用百分比来表示）。值越大颜色越鲜艳，为0时颜色呈现为灰色，灰色程度与亮度有关。 如图所示，圆心饱和度最高，颜色十分鲜艳，随着半径增大，饱和度降低，颜色变淡，直到为白色（此时图片上所有颜色HSL中的L分量为100%，所以表现为白色）。

• 亮度（Lightness），无单位，取值在[ 0, 1 ]区间（CSS用百分比来表示）。值越大颜色越亮，为0时大致呈黑色。 如图所示，圆心亮度最高，颜色最亮，随着半径增大，亮度降低，颜色变暗，直到变为黑色。

---

由此可见，RGB与HSL都能够表示出五彩斑斓的颜色

RGB是根据R、G、B三个分量的亮度，来调配出最终颜色的； HSL是根据颜色的色相、饱和度、亮度这三个属性，来确定最终颜色的。

[gogoend]

颜色的转换

参考自： HSL和HSV色彩空间 - 维基百科，自由的百科全书 JS HEX十六进制与RGB, HSL颜色的相互转换 « 张鑫旭-鑫空间-鑫生活

HSL -> RGB

根据从Wikipedia上查到的资料，结合相关博客，尝试用JavaScript来实现：

function hsl2rgb(h, s, l) {
    let r, g, b;
    if (s === 0) r = g = b = l
    else {
        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
        }
        let q = l < 0.5 ? l * (1 + s) : l + s - (l * s)
        let 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)]
    }
}

[gogoend]

RGB -> HSL

根据从Wikipedia上查到的资料，尝试用JavaScript来实现：

function rgb2hsl(r, g, b) {
    r /= 255, g /= 255, b /= 255
    let max = Math.max(r, g, b);
    let min = Math.min(r, g, b);

    let h, s, l;
    if (max === min) {
        h = 0
    } else if (max === r && g >= b) {
        h = 60 * (g - b) / (max - min) + 0
    } else if (max === r && g < b) {
        h = 60 * (g - b) / (max - min) + 360
    } else if (max === g) {
        h = 60 * (b - r) / (max - min) + 120
    } else if (max === b) {
        h = 60 * (r - g) / (max - min) + 240
    }

    l = (max + min) / 2

    if (l === 0 || max === min) {
        s = 0
    } else if (l > 0 && l <= (1 / 2)) {
        s = (max - min) / (max + min)
    } else if (l > (1 / 2)) {
        s = (max - min) / (2 - (max + min))
    }

    return [h, s, l]
}

[gogoend]

实现一个 ColorPicker 组件