rgb(0 255 128 / 50%)这是什么神奇的语法，是我孤陋寡闻啦偶然在 less 的 issue 中看到 CS

偶然在 less 的 issue 中看到 CSS color 这样的写法：body {background: rgb(243 243 245 / 40%)}，直觉告诉我，这看起来写错的语法，有可能是对的，进入知识盲区。咱是真不懂，好在咱们可以学，就像正在看文章的你一样，还不去点个赞，这么爱学习。

前言

本文内容基于《CSS Color Module Level 4》规范讲述，介绍 CSS color 的语法内容。所谓“不学不知道，一看吓一跳”，这么多不会的语法结构，赶紧用起来（可以在 Chrome 浏览器尝试）。

熟悉的写法

在 CSS 中，我们通常这样写颜色值。

em {
    color: 'lime';
    color: '#00FF00';
    color: rgb(0, 255, 0);
    color: rgb(0%, 100%, 0%);
    background: rgba(0, 255, 128, 0.5);
    background: hsla(150, 100%, 50%, 0.5);
    background: '#00ff8080';
}

新语法这样写

有了新的语法规范后，我们这样写也是正确的。

em {
    color: 'lime';
    color: '#00FF00';
    color: rgb(0 255 0);
    color: rgb(0% 100% 0%);
    background: rgb(0 255 128 / 50%);
    background: hsl(150deg 100% 50% / 50%);
    background: '#00ff8080';
    background: color(sRGB 0 1 0.5 / 50%);
}

原来 Chrome 已经默认显示成这样。

语法解析

CSS规范为 color 规定多种颜色值的写法，比如可使用通过 sRGB 通道定义的颜色值，像16进制和rgb()函数，还有可读性较好的方式，比如hsl()和lch()函数，或者具名颜色，像lime, green等。

具名颜色，难怪我们可以直接使用名称呢，原来都在规范里写好了

color值有多种使用方式：

<color> = <absolute-color-base> | currentcolor | <system-color> | <device-cmyk()>

<absolute-color-base> = <hex-color> | <named-color> | transparent |
    <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> |
    <lab()> | <lch()> |
    <oklab()> | <oklch()> |
    <color()>

absolute-color-base

除了<hex-color> | <named-color> | transparent这三个，其他统一称为color-function，是基于不同的颜色模型来设计的。

<hsl()> | <hsla()> | <hwb()> | <lch()> | <oklch()>采用的是柱面极性颜色表示法，颜色值使用色调hue表示角度，中心轴代表亮度（从下到上，黑到白），半径表示饱和度或色度。

<rgb()> | <rgba()> | <lab()> | <oklab()> | <color()>采用的是矩形正交颜色表示法，由三个颜色通道正交组成，立方体模型或者球模型。

标准语法

使用空格分隔颜色通道，没有逗号
使用斜线/分隔可选的alpha通道

例如，rgb()函数语法：

rgb() = rgb( [<percentage> | none]{3} [ / [<alpha-value> | none] ]? ) |
  rgb( [<number> | none]{3} [ / [<alpha-value> | none] ]? )
<alpha-value> = <number> | <percentage>

那么我们这样写：

div {
    color: rgb(128 255 200 / 60%);
    background: rgb(10% 20% 30% / 40%)
}

兼容性

兼容性很好，除了 IE 这朵韦陀花。

关于 '#RGB' 和 '#RGBA'

我们熟悉的16进制颜色表示法，有些情况可以省略表示，用3位数代替6位数。

color: #FF66EE;
color: #F6E;

上面两个是同一个值，都表示color: rgb(255 102 238)。同样的，我们可以用4位数代替8位数，下面这三种写法是同一个颜色。

color: #EE55DDAA;
color: #E5DA;
color: rgb(238 85 221 / 67%)

结语

无论你是否喜欢它，你都应该了解它，谁知道呢，有可能它就是未来。全文粗略的讲述如何 CSS 的 color 语法，请不要志得意满以为自己学会了，还有 CSS Color Module Level 5，唉，真是学无止境。

rgb(0 255 128 / 50%)这是什么神奇的语法，是我孤陋寡闻啦

前言