快速学习CSS Color Level 4的色值新语法

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9595

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

从2016年开始，现代浏览器开始陆续支持#RRGGBBAA颜色以及其他新语法，这些新语法都是CSS Color Level 4中定义的。

一、#RRGGBBAA颜色表示

现代浏览器目前已经全面支持了#RRGGBBAA颜色。

其中R，G，B还是原来的十六进制表示的RGB色值，范围从00-FF，至于这里新出现的AA，则表示透明度，范围也是00-FF。

#RRGGBBAA颜色虽然很实用，但是透明度的转换却没有RGB色值那么方便，因为由于透明度范围是0%-100%，而00-FF的十进制范围是0-255，对不上，需要转换，公式如下：

// Alpha范围0-1
AA = (Alpha * 255).toString(16);

因此，50%透明度等于(0.5*255).toString(16)，结果是7f.8，七舍八入就是80。因此#FF000080就表示近似50%红色。

我 （张鑫旭） 专门整理了一个百分比透明度和十六进制值之间的数据表，如下所示：

百分比透明度和十六进制值对应关系表（by zhangxinxu(.com)） 透明度 十六进制值 透明度 十六进制值 0% 00 5% 0D 10% 1A 15% 26 20% 33 25% 40 30% 4D 35% 59 40% 66 45% 73 50% 80 55% 8C 60% 99 65% A6 70% B3 75% BF 80% CC 85% D9 90% E6 95% F2 100% FF

同样的，#RRGGBBAA颜色也支持缩写，例如 #f308 等同于 #ff330088 。

//zxx: 如果你看到这段文字，说明你现在访问是体验糟糕的垃圾盗版网站，你可以访问原文获得很好的体验：https://www.zhangxinxu.com/wordpress/?p=9595（作者张鑫旭）

二、极致自由的新语法

在现代浏览器中，RGB颜色和HSL颜色的语法已经变得无比自由。

1. rgb() 和 rgba() 语法互通，也就是下面的语法也是可以解析的：

   /* 有效 */
   rgb(0, 0, 0, 1)
   rgba(0, 0, 0)

2. hsl() 和 hsla() 语法互通，也就是下面的语法也是可以解析的：

   /* 有效 */
   hsl(0, 0%, 0%, 1)
   hsla(0, 0%, 0%)

3. rgb() 中的数值可以是小数，也就是下面语法也是可以解析的：

   /* 有效 */
   rgb(99.999, 102.5, 0)
   rgb(1e2, .5e1, .5e0, +.25e2%)

4. 透明度可以使用百分比表示，也就是下面的语法也是可以解析的：

   /* zhangxinxu: 有效 */
   rgb(0, 0, 0, 100%)
   hsla(0, 100%, 50%, 80%)

5. hsl() 中的色调可以使用任意角度单位，也就是下面的语法也是可以解析的：

   /* 有效 */
   hsl(270deg, 60%, 70%)
   hsl(4.71239rad, 60%, 70%)
   hsl(.75turn, 60%, 70%)

6. rgb() 和 hsl() 语法中的逗号可以忽略，也就是下面的语法也是可以解析的：

   /* 有效 */
   rgb(255 0 0)
   hsl(270 60% 70%)

而以上所有示意的语法在IE浏览器中均不支持。

三、RGB颜色和HSL颜色新语法

现代浏览器还支持全新的空格加斜杠语法。例如：

rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)
rgba(51 170 51 / 0.4)
rgba(51 170 51 / 40%)
hsl(270 60% 50% / .15)
hsl(270 60% 50% / 15%)

也就是R、G、B色值或者H、S、L色值使用空格分隔，透明度使用斜杠分隔。

空格语法和传统的逗号语法相比，只是一种写的语法形式，唯一的优点就是书写更快了，为什么呢？原因很简单，键盘上的空格键要比逗号键大得多。

四、结语亚撒西

腾讯的X5内核支持了很多CSS新特性，例如CSS变量、滤镜和混合模式等，即使设备是Android 4也可以使用这些CSS新特性。

但是，这里的CSS Level 4定义的新的色值表示法腾讯的X5内核却没有支持，兼容性反而不如Native浏览器。

这个小细节我 （张鑫旭） 之前遇到过一个坑。

所有这些颜色表示的新语法中，#RRGGBBAA是最为实用的，使用频率是最高的，至于其他一些新的语法，或者容错性的增强，好固然好，但是日常开发鲜有机会用到。

条条大路通罗马，但是一次只能走1条路，所以原来那条路好好的，也就没必要使用那些可能有坑的路。

OK，以上就是本文内容，增加点CSS知识的广度。

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。

本文地址： https://www.zhangxinxu.com/wordpress/?p=9595

（本篇完）