CSS 颜色：RGB、HEX、HSL 颜色表示

在网页开发中，设置颜色是最基础也最频繁的操作之一。CSS 提供了多种方式来定义颜色，其中最常用的是 RGB、HEX 和 HSL 三种格式。它们本质都描述同一种颜色，但写法不同，适用场景也有差异。掌握这三种表示法，能让你更灵活地控制界面视觉效果。

1. RGB 颜色：用红绿蓝三原色混合

使用 rgb() 函数定义颜色，基于人眼对红（Red）、绿（Green）、蓝（Blue）三种光的感知原理。每种颜色分量取值范围是 0 到 255。

输入 rgb(255, 0, 0) 表示纯红色，因为红色通道最大（255），绿色和蓝色为 0。

具体写法：

1. 打开你的 CSS 文件或 <style> 标签。
2. 在属性值中写入 rgb(红, 绿, 蓝)，例如：

   .box {
     background-color: rgb(0, 128, 255);
   }

3. 调整数值：增大某个分量会让对应颜色更突出。比如 rgb(200, 200, 200) 是浅灰色。

RGB 还支持透明度（Alpha 通道），此时用 rgba()：

• 写成 rgba(红, 绿, 蓝, 透明度)，透明度范围是 0.0（完全透明）到 1.0（完全不透明）。
• 例如：rgba(255, 0, 0, 0.5) 是半透明红色。

2. HEX 颜色：用十六进制代码简写

HEX（十六进制）颜色是 RGB 的紧凑写法，用 # 开头后跟六位十六进制数字（0–9, a–f）。每两位分别代表红、绿、蓝分量。

记住规则：#RRGGBB，其中 RR 是红色值，GG 是绿色值，BB 是蓝色值。

操作步骤：

1. 将 RGB 值转换为十六进制。例如 rgb(255, 0, 0) 中，255 对应 ff，0 对应 00，所以 HEX 是 #ff0000。
2. 在 CSS 中直接使用，如：

   .text {
     color: #3a86ff;
   }

3. 利用简写形式：如果每种颜色的两位数字相同（如 #aabbcc），可缩写为三位：#abc。
   注意：只有当红、绿、蓝各自两位相同时才能简写，#aabbcd 就不能简写。

HEX 不直接支持透明度，但可通过扩展为八位（#RRGGBBAA）实现，例如 #ff000080 表示半透明红色（80 十六进制 ≈ 128 十进制 ≈ 0.5 透明度）。不过兼容性略低于 rgba()，建议优先用后者处理透明。

3. HSL 颜色：按人类直觉调色

HSL 分别代表色相（Hue）、饱和度（Saturation）、亮度（Lightness）。这种方式更贴近设计师调色时的思维。

• 色相（H）：颜色在色轮上的角度，范围 0 到 360。0 或 360 是红色，120 是绿色，240 是蓝色。
• 饱和度（S）：颜色的纯度，0% 是灰色，100% 是最鲜艳。
• 亮度（L）：明暗程度，0% 是黑色，100% 是白色，50% 是标准亮度。

使用 hsl() 函数定义：

1. 确定色相：比如想用青色，查色轮大约是 180。
2. 设定饱和度和亮度：高饱和（如 100%）+ 中等亮度（如 50%）得到鲜艳青色。
3. 写入 CSS：

   .highlight {
     background-color: hsl(180, 100%, 50%);
   }

HSL 同样支持透明度，用 hsla()：

• 格式为 hsla(色相, 饱和度%, 亮度%, 透明度)。
• 例如：hsla(240, 100%, 50%, 0.3) 是半透明蓝色。

HSL 的优势在于直观调整色调。比如保持 S=100%, L=50%，只改 H 值，就能获得一系列纯色；若想让颜色变灰，只需降低 S；想变亮或变暗，调整 L 即可。

三种格式对比与选择建议

下表总结了 RGB、HEX、HSL 的特点和适用场景：

实际开发中这样选：

• 快速复制设计稿颜色：设计工具（如 Figma、Sketch）通常提供 HEX 值，直接粘贴即可。
• 需要动态变色（如主题切换）：优先用 HSL，因为只需修改一个参数（如统一降低 L 值变暗）。
• 兼容老旧项目：HEX 兼容性最好，所有浏览器都支持。
• 需要半透明效果：使用 rgba() 或 hsla()，避免八位 HEX 的兼容问题。

转换技巧：手动计算与工具辅助

虽然可以手动转换，但日常开发推荐用浏览器开发者工具：

1. 在 Chrome DevTools 中编辑颜色值。
2. 点击颜色预览框旁的小图标，可在 RGB、HEX、HSL 之间循环切换。
3. 直接拖动 HSL 滑块实时调整色相、饱和度、亮度。

若需手动换算：

• RGB 转 HEX：将每个十进制数转为两位十六进制。例如 rgb(65, 105, 225) → 65=41, 105=69, 225=e1 → #4169e1。
• HEX 转 RGB：将每两位十六进制转回十进制。#ff6b6b → ff=255, 6b=107 → rgb(255, 107, 107)。
• HSL 与 RGB 互转涉及三角函数，公式复杂，不建议手算。核心逻辑如下（仅作理解）：

$$ \begin{align*} C &= (1 - |2L - 1|) \times S \\ X &= C \times (1 - |(H / 60) \bmod 2 - 1|) \\ m &= L - C/2 \end{align*} $$

然后根据 H 所在区间组合 R、G、B 值，最后加上 m 并乘以 255。实际开发中直接用 JavaScript 的 Color 库或在线转换器更高效。

最佳实践：统一项目颜色规范

为避免混乱，在团队项目中约定一种主格式：

1. 新建 CSS 自定义属性（变量）存储基础色：

   :root {
     --primary-color: hsl(210, 100%, 50%);
     --error-color: #e63946;
   }

2. 优先用 HSL 定义主色，因其便于衍生系列颜色（如 hover 状态加深亮度）。
3. 组件内直接引用变量，而非硬编码颜色值：

   .button {
     background: var(--primary-color);
   }
   .button:hover {
     background: hsl(210, 100%, 40%); /* 仅调低亮度 */
   }

这样既保证一致性，又提升可维护性。当需要更换主题色时，只需修改变量定义处的一个 HSL 值，整个站点颜色自动适配。