CSS基础教程（五十五）合法颜色值：告别色盲！CSS调色盘的魔法咒语全解析：从#FFF到Lch，让你代码色出惊人！

最新推荐文章于 2025-09-27 21:39:44 发布

原创

最新推荐文章于 2025-09-27 21:39:44 发布 · 415 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

深度分析CSS合法颜色值，并附完整示例

在网页设计的奇幻世界里，CSS（层叠样式表）就是我们手中的魔法书，而颜色值则是书中那些最炫目、最基础的咒语。一个优秀的“魔法师”（前端开发者或设计师）必然能娴熟地驾驭各种颜色表示法，从最简单的颜色关键字到最前沿的实验室模式，每一种都有其独特的魅力和适用场景。今天，就让我们打开这本调色盘魔法书，逐条解析这些让你“色”出惊人的合法咒语！

第一章：基础入门——颜色关键字与HEX（十六进制）

对于初学者来说，颜色关键字是最直观的入门咒语。

.color-keyword {
  color: red; /* 经典红 */
  background-color: lightblue; /* 浅蓝 */
  border-color: transparent; /* 透明色，一个非常实用的关键字 */
}

CSS定义了超过140个标准颜色关键字，从aliceblue 到 whitesmoke，但记住所有名字几乎是不可能的，而且它们能表达的色彩范围有限，缺乏灵活性。

于是，十六进制（HEX）颜色值成为了最传统、最广泛使用的“经典咒语”。它的格式是#RRGGBB，其中RR（红色）、GG（绿色）、BB（蓝色）均为00-FF的十六进制数。

.hex-color {
  color: #ff0000; /* 纯红色，等同于'red' */
  background-color: #00ff00; /* 纯绿色 */
  border-color: #0000ff; /* 纯蓝色 */
  
  /*  shorthand shorthand！如果每两位相同，可以简写为三位 */
  color: #f00; /* 同样是纯红色 */
  background-color: #0f0; /* 同样是纯绿色 */
  
  /* 加上Alpha透明通道 (00完全透明 - FF完全不透明) */
  background-color: #ff000080; /* 带50%不透明度的红色 */
}

HEX的优缺点：