颜色表示法概览
在网页设计和开发中，颜色有多种表示方式。最常见的三种是：
- HEX（十六进制）：如
#FF5733 - RGB（红绿蓝）：如
rgb(255, 87, 51) - HSL（色相-饱和度-亮度）：如
hsl(9, 100%, 60%)
每种表示法都有其适用场景。理解它们之间的转换关系，能让你在设计时更加得心应手。
三种颜色模型详解
HEX 十六进制
最广泛使用的 Web 颜色格式。以 # 开头，后跟 6 位十六进制数（或简写的 3 位）。每两位代表红、绿、蓝通道的值（00-FF）。
# FF5733 → 红色=FF(255), 绿色=57(87), 蓝色=33(51)
RGB 红绿蓝
最直观的颜色模型，直接指定红、绿、蓝三个通道的数值（0-255）。CSS 中还可以加上 alpha 透明度通道，写作 rgba(255, 87, 51, 0.5)。
HSL 色相-饱和度-亮度
对设计师最友好的颜色模型：
- 色相（Hue）：0-360°，表示在色轮上的位置
- 饱和度（Saturation）：0-100%，颜色的纯度
- 亮度（Lightness）：0-100%，颜色的明暗程度
HSL 的优势在于：想要"同色系但更亮一点"时，只需调整亮度值即可。
转换公式
HEX → RGB
R = parseInt(HEX[1..2], 16)
G = parseInt(HEX[3..4], 16)
B = parseInt(HEX[5..6], 16)
RGB → HSL
R' = R/255, G' = G/255, B' = B/255
Cmax = max(R', G', B')
Cmin = min(R', G', B')
Δ = Cmax - Cmin
H = 60° × (不同情况公式)
S = Δ / (1 - |2L - 1|)
L = (Cmax + Cmin) / 2
实际应用建议
- CSS 变量：使用 HSL 定义主题色，方便通过调整亮度值生成变体
- 设计系统：用 HSL 统一管理色调，修改色相即可全局换肤
- 可访问性：通过亮度值判断前景色和背景色的对比度
- 渐变色：HSL 可以创建更自然的渐变过渡
颜色代码转换看似基础，但在实际开发中却是每天都可能用到的技能。