颜色值格式怎么选？HEX/RGB/HSL 区别与在线转换教程

三种格式对比

格式	示例	直观性	典型用途
HEX	#FF5733	低（看不出是什么颜色）	CSS传统格式、设计稿标注
RGB	rgb(255,87,51)	中（知道红绿蓝分量）	编程、动态计算颜色
HSL	hsl(11,100%,60%)	高（色相/饱和度/亮度）	现代CSS、主题切换

为什么 HSL 更直观

HSL把颜色分解成三个和人类感知对齐的维度：

• H（Hue，色相，0-360）：色轮角度，0=红、60=黄、120=绿、180=青、240=蓝、300=品红
• S（Saturation，饱和度，0-100%）：0% = 灰色，100% = 纯色
• L（Lightness，亮度，0-100%）：0% = 黑，50% = 纯色，100% = 白

实际场景：想要按钮 hover 时「颜色亮一点」，HEX里要把 #FF0000 改成 #FF3333（看不出规律）；HSL里只要把 hsl(0,100%,50%) 改成 hsl(0,100%,60%)，非常直观。

HEX 和 RGB 的换算关系

HEX的每两位分别对应RGB的一个通道（十六进制）：

#FF5733
 │  │  └─ B=0x33=51（蓝色）
 │  └──── G=0x57=87（绿色）
 └──────── R=0xFF=255（红色）
→ rgb(255, 87, 51)

所以 #FF5733 = rgb(255,87,51)，完全等价。

透明度（Alpha 通道）

格式	带透明度的写法	示例（半透明红色）
HEX	#RRGGBBAA（最后两位）	#FF000080（80=128=50%透明度）
RGB	rgba(R,G,B,A)	rgba(255,0,0,0.5)
HSL	hsla(H,S%,L%,A)	hsla(0,100%,50%,0.5)

注意：HEX的AA部分是 opacity × 255 的十六进制。50%透明度 = 0.5 × 255 ≈ 128 = 0x80。

现代 CSS：okLCH

HSL有个问题：亮度（L）不是感知均匀的——L从50%变到60%的视觉亮度变化，和从90%变到100%的变化不一样。okLCH 是基于人眼感知模型的新格式，目前新版Chrome和Safari已支持。

/* okLCH：亮度/彩度/色相 */
--primary: oklch(70% 0.2 30);
/* 比 HSL 更符合人眼感知 */

在线转换步骤

1. 打开 颜色值转换工具。
2. 输入任一种格式的颜色值（工具会自动识别格式）。
3. 立即看到另外两种格式的等价表示。
4. 支持调整透明度，实时预览效果。

常见问题 FAQ