HTML 颜色值

网页上的颜色通常使用红、绿、蓝 (RGB) 光的组合来定义。HTML 和 CSS 提供了几种指定这些颜色的方法。

常见的颜色格式

在 HTML 和 CSS 中指定颜色最广泛支持的方法有：

颜色名称： 常见颜色的预定义名称。
HEX 码： 表示 RGB 分量的十六进制值。
RGB / RGBA： 红、绿、蓝以及可选的 Alpha（透明度）的十进制值。
HSL / HSLA： 色相 (Hue)、饱和度 (Saturation)、亮度 (Lightness) 以及可选的 Alpha（透明度）值。

颜色名称

现代浏览器支持 140 种标准颜色名称，例如 Red、Blue、Green、LightGray、CornflowerBlue 等。这些名称不区分大小写。

示例：

<p style="color: Tomato;">This text is Tomato red.</p>
<div style="background-color: DodgerBlue; padding: 10px; color: white;">This div has a DodgerBlue background.</div>

虽然对于简单情况很方便，但有限的调色板意味着你通常需要其他方法来指定更具体的颜色。

HEX 颜色码

十六进制 (HEX) 颜色码是定义颜色最常用的方法之一。

语法：#RRGGBB 或 #RGB（简写）。

RR、GG、BB 是两位十六进制值（00-FF），分别代表红、绿、蓝的强度。
00 是最低强度，FF（相当于十进制 255）是最高强度。
当每对数字相同时，#RGB 简写有效（例如，#FF0000 可以写成 #F00）。

示例：

/* 纯红色 */
color: #FF0000;

/* 纯绿色 */
color: #00FF00;

/* 纯蓝色 */
color: #0000FF;

/* 白色 */
color: #FFFFFF; /* or #FFF */

/* 黑色 */
color: #000000; /* or #000 */

/* 中灰色 */
color: #808080; /* Cannot use shorthand */

/* 某种特定色调的蓝色 */
color: #3498DB;

HEX 码提供了广泛的颜色范围（超过 1600 万种）。

RGB 和 RGBA 颜色

RGB 使用红、绿、蓝的十进制值来指定颜色。

语法：rgb(red, green, blue)

每个参数（red、green、blue）是一个介于 0（最低强度）和 255（最高强度）之间的整数。

RGBA 添加了一个 Alpha 通道 (Alpha channel) 用于透明度 (transparency)。

语法：rgba(red, green, blue, alpha)

alpha 值是一个介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

示例：

/* 纯红色（与 #FF0000 相同） */
color: rgb(255, 0, 0);

/* 纯蓝色（与 #0000FF 相同） */
color: rgb(0, 0, 255);

/* 中灰色（与 #808080 相同） */
color: rgb(128, 128, 128);

/* 半透明黑色 */
background-color: rgba(0, 0, 0, 0.5); /* 50% 不透明 */

/* 半透明蓝色 */
background-color: rgba(0, 0, 255, 0.75); /* 75% 不透明 */

RGBA 对于创建叠加层 (overlays) 或半透明背景等效果至关重要。

HSL 和 HSLA 颜色

HSL 基于色相 (Hue)、饱和度 (Saturation) 和亮度 (Lightness) 来表示颜色，这对于颜色调整更直观。

语法：hsl(hue, saturation, lightness)

hue: 颜色在色轮 (color wheel) 上的角度（0-360 度；0/360 是红色，120 是绿色，240 是蓝色）。
saturation: 颜色的强度（0% 是灰度，100% 是全彩色）。
lightness: 颜色的亮度（0% 是黑色，50% 是“正常”颜色，100% 是白色）。

HSLA 添加了一个 Alpha 通道用于透明度。

语法：hsla(hue, saturation, lightness, alpha)

alpha 值的工作方式与 RGBA 相同（0.0 到 1.0）。

示例：

/* 纯红色 */
color: hsl(0, 100%, 50%);

/* 纯绿色 */
color: hsl(120, 100%, 50%);

/* 浅饱和蓝色 */
color: hsl(210, 80%, 70%);

/* 深不饱和橙色 */
color: hsl(30, 40%, 30%);

/* 半透明绿色 */
background-color: hsla(120, 100%, 50%, 0.6); /* 60% 不透明 */

HSL 特别适合用于创建调色板或通过程序调整颜色深浅。

选择颜色格式

颜色名称： 适用于快速原型或标准颜色。
HEX： 非常常见，适用于不透明颜色，表达简洁。
RGB/RGBA： 标准，易于理解，如果不用 HSLA，则透明度需要 RGBA。
HSL/HSLA： 调整颜色更直观，非常适合生成调色板，支持透明度。

现代开发中，不透明颜色常使用 HEX，需要透明度时使用 RGBA 或 HSLA。CSS 自定义属性 (CSS Custom Properties / variables) 也被广泛用于在整个项目中高效管理颜色值。