CSS预定义颜色

CSS预定义颜色

CSS预定义颜色是CSS规范中预先定义的一组颜色名称，开发者可以直接使用这些名称来设置文本、背景、边框等元素的颜色，而无需使用十六进制（HEX）、RGB或HSL等颜色表示法。这些颜色名称是标准化的，所有现代浏览器均支持。

概述

CSS预定义颜色（也称为“命名颜色”）是W3C CSS规范中定义的147种颜色名称，包括常见的“red”（红色）、“blue”（蓝色）、“green”（绿色）等。这些名称不区分大小写，例如“Red”和“red”表示相同的颜色。

预定义颜色的优点包括：

• 易读性：名称比十六进制代码更直观。
• 快速使用：无需记忆或查找颜色代码。
• 标准化：所有浏览器解析一致。

完整的预定义颜色列表

以下是CSS中所有预定义颜色的分类列表（按颜色组划分）：

基本颜色

• black（黑色）
• white（白色）
• red（红色）
• lime（亮绿色）
• blue（蓝色）

扩展颜色

• aqua（浅青色）
• fuchsia（紫红色）
• silver（银色）
• gray（灰色）
• maroon（褐红色）

完整列表

完整的147种颜色名称及对应十六进制值可参考[外部资源链接]。

代码示例

以下示例展示如何在CSS中使用预定义颜色：

/* 设置文本颜色 */
h1 {
  color: darkblue;
}

/* 设置背景颜色 */
body {
  background-color: lightgray;
}

/* 设置边框颜色 */
.button {
  border: 2px solid coral;
}

输出效果：

• 标题文字变为深蓝色
• 页面背景变为浅灰色
• 按钮边框变为珊瑚色

实际应用场景

1. 快速原型设计：在开发初期，使用预定义颜色快速搭建界面。 2. 可读性优先的代码：在团队协作中，颜色名称比代码更易理解。 3. 动态样式调整：通过JavaScript动态修改颜色时，名称比HEX更易操作。

案例：按钮状态颜色

.button {
  background-color: dodgerblue;
  color: white;
}

.button:hover {
  background-color: royalblue;
}

.button:active {
  background-color: midnightblue;
}

此代码实现按钮的悬停和点击状态颜色变化，全部使用预定义颜色。

技术细节

颜色名称的标准化

所有预定义颜色对应固定的十六进制值，例如：

• $red=\mathrm{\#}FF0000$
• $lime=\mathrm{\#}00FF00$
• $blue=\mathrm{\#}0000FF$

浏览器支持

所有现代浏览器均完全支持预定义颜色，包括：

• Chrome / Edge / Firefox / Safari
• 移动端浏览器（iOS/Android）

与其他颜色表示法的比较

颜色表示法对比

类型	示例	优点	缺点
预定义颜色	color: gold;	易读易写	选择有限
十六进制	color: #FFD700;	精确控制	不易记忆
RGB	color: rgb(255, 215, 0);	数学可计算	不够直观

视觉参考图表

pie title 预定义颜色使用场景 "文本颜色" : 35 "背景颜色" : 45 "边框颜色" : 20

注意事项

1. 部分颜色名称在不同浏览器中可能有微小差异（如“darkgray”）。 2. 设计专业项目时，建议使用品牌色值而非预定义颜色。 3. 颜色名称无法实现透明度控制（需使用RGBA/HSLA）。

进阶技巧

• 结合CSS变量使用：

  :root {
    --primary-color: teal;
  }
  header {
    background-color: var(--primary-color);
  }

• 通过JavaScript切换颜色：

  document.body.style.backgroundColor = "skyblue";

总结

CSS预定义颜色为开发者提供了一种快速、直观的颜色指定方式，特别适合初学者学习和快速开发。虽然选择有限，但在大多数基础场景中完全够用。建议开发者同时掌握其他颜色表示法以应对复杂需求。