快速学习CSS Color Level 4的色值新语法 « 张鑫旭-鑫空间-鑫生活

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9595
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

多彩颜色表示

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

现代浏览器目前已经全面支持了#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颜色的语法已经变得无比自由。

rgb()和rgba()语法互通，也就是下面的语法也是可以解析的：
```
/* 有效 */
rgb(0, 0, 0, 1)
rgba(0, 0, 0)
```
hsl()和hsla()语法互通，也就是下面的语法也是可以解析的：
```
/* 有效 */
hsl(0, 0%, 0%, 1)
hsla(0, 0%, 0%)
```
rgb()中的数值可以是小数，也就是下面语法也是可以解析的：
```
/* 有效 */
rgb(99.999, 102.5, 0)
rgb(1e2, .5e1, .5e0, +.25e2%)
```
透明度可以使用百分比表示，也就是下面的语法也是可以解析的：
```
/* zhangxinxu: 有效 */
rgb(0, 0, 0, 100%)
hsla(0, 100%, 50%, 80%)
```
hsl()中的色调可以使用任意角度单位，也就是下面的语法也是可以解析的：
```
/* 有效 */
hsl(270deg, 60%, 70%)
hsl(4.71239rad, 60%, 70%)
hsl(.75turn, 60%, 70%)
```
rgb()和hsl()语法中的逗号可以忽略，也就是下面的语法也是可以解析的：
```
/* 有效 */
rgb(255 0 0)
hsl(270 60% 70%)
```

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

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

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

（本篇完）

关于gif图片（或png8）杂边锯齿的问题 (0.527)
是时候介绍这几个全新的CSS颜色函数了 (0.362)
Chrome opacity非1时border-radius圆角边框剪裁问题 (0.354)
Canvas中颜色过渡动画效果的实现 (0.340)
CSS文字和背景color自动配色技术简介 (0.321)
CSS1-CSS3 <color>颜色知识知多少？ (0.199)
JS HEX十六进制与RGB, HSL颜色的相互转换 (0.118)
PNG格式小图标的CSS任意颜色赋色技术 (0.118)
CSS好用的color-mix颜色函数也可以使用啦 (0.118)
全新的CSS相对颜色语法-使用from和calc() (0.118)
JS检测PNG图片是否有透明背景、抠图等相关处理 (RANDOM - 0.048)

推荐订阅源