CSS 颜色全解

颜色从哪来

上一篇的 color 属性里我们简单用过几种颜色写法，这一篇把 CSS 的颜色体系完整过一遍，从关键字到十六进制，再到 rgb 和 hsl。选对写法，调色效率能差好几倍。

颜色关键字

CSS 内置了一百多种颜色关键字，red、blue、green、transparent 这种直接记英文就行。transparent 表示完全透明，等于 rgba(0, 0, 0, 0)，常用于按钮变透明或者去掉默认背景。

.btn {
  background-color: transparent;   /* 背景完全透明 */
  color: red;
}

关键字数量太多，常用的记十几个就够，剩下的用到时查表即可。

十六进制

十六进制是设计稿里最常见的格式。写法是 #RRGGBB，两位一组表示红绿蓝，范围 00 到 ff。每两位相同可以缩写，比如 #ff0000 写成 #f00。

p {
  color: #ff0000;   /* 红色，完整写法 */
  color: #f00;      /* 同上，简写 */
}

新版 CSS 支持 #RRGGBBAA，最后两位是透明度，比如 #ff000080 就是半透明红。不想加额外结构又想用半透明色的时候，这个写法最方便。

rgb 与 rgba

rgb() 用红绿蓝三个数值表示颜色，数值范围 0 到 255，或者用百分比。

p {
  color: rgb(255, 0, 0);        /* 红色 */
  color: rgba(255, 0, 0, 0.5);  /* 半透明红色 */
  color: rgb(255 0 0 / 0.5);    /* 新语法，空格分隔 */
}

旧语法用逗号分隔，透明度走 rgba 这个名字。新语法用空格分隔，直接用 rgb 就能带透明度，alpha 值用斜杠隔开。新语法更简洁，旧语法兼容性更好，两者现在都能用。

hsl 与 hsla

hsl 用色相、饱和度、明度三个维度描述颜色。色相 0 到 360 度，0 是红、120 是绿、240 是蓝。饱和度 0% 到 100%，越高越鲜艳。明度 0% 是黑，100% 是白。

p {
  color: hsl(0, 100%, 50%);        /* 红色 */
  color: hsla(0, 100%, 50%, 0.5);  /* 半透明红 */
}

hsl 最大的优势是直觉。想让颜色浅一点，改明度就行，想让颜色淡一点，降饱和度就行，根本不用推算红绿蓝的数值。手动调浅色系的时候，hsl 比 rgb 快得多。

currentColor 关键字

currentColor 表示当前元素的 color 属性值。用在边框、背景上时，能自动跟随文字颜色，改一处全部同步。

.link {
  color: #409eff;
  border-bottom: 1px solid currentColor;   /* 边框自动和文字同色 */
}

以后想改链接颜色，只动 color 一处，边框不用管，减少重复代码。

怎么选

颜色关键字本质上也属于属性关键字的一类，相关规则可以参考CSS 属性关键字。

小结

颜色写法不是越多越好，而是按场景挑顺手的。十六进制应对设计稿，rgba 处理透明度，hsl 应对手动调色，currentColor 处理联动场景。掌握了这些，下一篇进入背景的世界。