颜色值类型

根据 CSS 颜色草案中提到的颜色值类型，大概可以把它们分为这几类：

颜色关键字
transparent 关键字
currentColor 关键字
RGB 颜色
HSL 颜色
颜色关键字
颜色名称也称为颜色关键字，像我们熟悉的black表示黑色，white表示白色，blue表示蓝色等。

实际上，在CSS的颜色定义中，总共有147种颜色关键字，所有者147种颜色名字均取自X Windows 系统，X 颜色名，所以即使这147个颜色名看上去不是很标准，支持也是非常不错的。

CSS3下的147个颜色名称实例页面

rgb

CSS Color Module Level 4 引入了颜色函数的新语法，例如rgb()和hsl()。新语法省略了逗号，依靠空格来分隔颜色空间的每个通道。它还支持可选的 alpha 参数，从而不再需要额外的颜色函数，例如rgba()和hsla()。逗号分隔的形式现在被规范称为“遗留语法”。

/* 遗留语法 */
background-color: hsl(270, 50%, 40%);
color: hsla(0, 0%, 100%, 50%);
/* 新语法 */
background-color: hsl(270 50% 40%);
color: hsl(0 0% 100% / 50%);

hwb

支持 hwb（hue, whiteness, blackness）定义颜色：

.text {
  color: hwb(30deg 0% 20%);
}

三个参数分别表示：角度 [0-360]，混入白色比例、混入黑色比例。角度对应在色盘不同角度的位置，每个角度都有属于自己的颜色值，这个函数非常适合直观的从色盘某个位置取色。

lch,,lab, oklab, display-p3 等

lch(lightness, chroma, hue)，即亮度、饱和度和色相，语法如：

.text {
  color: lch(50%, 100, 100deg);
}

chroma(饱和度) 指颜色的鲜艳程度，越高色彩越鲜艳，越低色彩越暗淡。hue(色相) 指色板对应角度的颜色值。

oklch

oklch(lightness, chroma, hue, alpha)，即亮度、饱和度、色相和透明度。

.text {
  color: oklch(59.69% 0.156 49.77 / 0.5);
}

color-mix()

css 语法支持的 mix，类似 sass 的 mix() 函数功能：

.text {
  color: color-mix(in srgb, #34c9eb 10%, white);
}

第一个参数是颜色类型，比如 hwb、lch、lab、srgb 等，第二个参数就是要基准颜色与百分比，第三个参数是要混入的颜色。

color-contrast()

让浏览器自动在不同背景下调整可访问颜色。换句话说，就是背景过深时自动用白色文字，背景过浅时自动用黑色文字：

.text {
  color: color-contrast(black);
}

相对颜色语法

可以根据语法类型，基于某个语法将某个值进行一定程度的变化：

.text {
  color: hsl(from var(--color) h s calc(l - 20%));
}

如上面的例子，我们将 —color 这个变量在 hsl 颜色模式下，将其 l(lightness) 亮度降低 20%。

渐变色 namespace

现在渐变色也支持申明 namespace 了，比如：

.text {
  background-image: linear-gradient(to right in hsl, black, white);
}

这是为了解决一种叫灰色死区的问题，即渐变色如果在色盘穿过了饱和度为 0 的区域，中间就会出现一段灰色，而指定命名空间比如 hsl 后就可以绕过灰色死区。
因为 hsl 对应色盘，渐变的逻辑是在色盘上沿圆弧方向绕行，而非直接穿过圆心（圆心饱和度低，会呈现灰色）。

accent-color

accent-color 主要对单选、多选、进度条这些原生输入组件生效，控制的是它们的主题色：

body {
  accent-color: red;
}

比如这样设置之后，单选与多选的背景色会随之变化，进度条表示进度的横向条与圆心颜色也会随之变化。

好看的配色

ghost 一丝、一点、淡色系

border-radius: 4px;
background-color: rgba(255, 103, 33, 0.1);
font-family: 'Open Sans', sans-serif;
color: #ff6721;

RGB，HEX，HSL以及关键字颜色相互转换方法

/* RGB颜色转换为16进制 */
String.prototype.colorHex = function(){
    var that = this;
    //十六进制颜色值的正则表达式
    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    // 如果是rgb颜色表示
    if (/^(rgb|RGB)/.test(that)) {
        var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
        var strHex = "#";
        for (var i=0; i<aColor.length; i++) {
            var hex = Number(aColor[i]).toString(16);
            if (hex === "0") {
                hex += hex;    
            }
            strHex += hex;
        }
        if (strHex.length !== 7) {
            strHex = that;    
        }
        return strHex;
    } else if (reg.test(that)) {
        var aNum = that.replace(/#/,"").split("");
        if (aNum.length === 6) {
            return that;    
        } else if(aNum.length === 3) {
            var numHex = "#";
            for (var i=0; i<aNum.length; i+=1) {
                numHex += (aNum[i] + aNum[i]);
            }
            return numHex;
        }
    }
    return that;
};
/* 十六进制颜色转为RGB格式 */
String.prototype.colorRgb = function(){
    var sColor = this.toLowerCase();
    //十六进制颜色值的正则表达式
    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    // 如果是16进制颜色
    if (sColor && reg.test(sColor)) {
        if (sColor.length === 4) {
            var sColorNew = "#";
            for (var i=1; i<4; i+=1) {
                sColorNew += sColor.slice(i, i+1).concat(sColor.slice(i, i+1));    
            }
            sColor = sColorNew;
        }
        //处理六位的颜色值
        var sColorChange = [];
        for (var i=1; i<7; i+=2) {
            sColorChange.push(parseInt("0x"+sColor.slice(i, i+2)));    
        }
        return "RGB(" + sColorChange.join(",") + ")";
    }
    return sColor;
};
/**
 * 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.
 * 转换公式参考自 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];
}
/* 
* 任意色值（甚至是CSS颜色关键字）转换为RGB颜色的方法
* 此方法IE9+浏览器支持，基于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;
};

颜色转换的库

color

npm地址：https://www.npmjs.com/package/color

学习 Web 前端

color 配色