前端开发里颜色格式永远对不上：UI 设计师给的是 Figma 导出的 HEX，品牌规范里写的是 RGB，CSS 动画库要求 HSL，偶尔还会遇到 HSB。手动算一次还好，每天算就是纯粹的折磨。
四种常用颜色格式
HEX（十六进制）
用两位十六进制数分别表示红、绿、蓝三个通道，范围 00（0%）到 FF（100%）：
color: #1a73e8; /* Google 蓝 */
color: #fff; /* #ffffff 的简写 */HEX 是网页 CSS 中最常见的格式。当每个通道的两位数字相同时可以缩写——#ff6600 → #f60。
RGB
三个 0–255 的整数，分别表示红、绿、蓝。CSS 还支持 rgba() 加第四个 alpha 通道（0–1）：
color: rgb(26, 115, 232);
color: rgba(26, 115, 232, 0.8); /* 80% 不透明度 */RGB 直接对应显示器硬件，用代码操作颜色通道时最方便。
HSL
色相（0–360°）、饱和度（0–100%）、亮度（0–100%）：
color: hsl(217, 80%, 51%);
color: hsla(217, 80%, 51%, 0.8);HSL 是对人类最友好的格式。只改 L 值就能得到同一色系的深浅变体，做设计系统色阶时特别有用。
HSB / HSV
色相（0–360°）、饱和度（0–100%）、亮度（Brightness，0–100%）。不是 CSS 原生格式，但 Figma、Photoshop、Illustrator 默认用这个：
H: 217° S: 89% B: 91%设计师给你 HSB 值时，需要先转成 HEX 或 RGB 才能写进 CSS。
HEX ↔ RGB：转换逻辑
HEX 转 RGB：拆成三对，每对从十六进制转十进制。
#1a73e8
1a = 26
73 = 115
e8 = 232
→ rgb(26, 115, 232)RGB 转 HEX：每个通道从十进制转十六进制，不足两位补零。
rgb(26, 115, 232)
26 = 1a
115 = 73
232 = e8
→ #1a73e8两个方向转换工具都能即时完成，不需要手动计算。
RGB ↔ HSL：心智模型
转换公式大约 20 行代码，没必要记。重要的是理解各维度的含义：
- Hue 色相：颜色的种类（红、黄、绿、青、蓝、品红），用角度表示色轮上的位置
- Saturation 饱和度：颜色的纯度，0% 是纯灰，100% 是最鲜艳的颜色
- Lightness 亮度（HSL）：0% 是纯黑，100% 是纯白，50% 是”正常”颜色
注意：HSL 的 L=50% 是纯色，HSB 的 B=100% 也是纯色，但两者不是同一尺度——这是最容易混淆的地方。
实战场景
构建设计系统色阶
从品牌色的 HEX 出发，转成 HSL 后只改 L 值：
--brand-100: hsl(217, 80%, 95%); /* 最浅 */
--brand-300: hsl(217, 80%, 75%);
--brand-500: hsl(217, 80%, 51%); /* 基础色 */
--brand-700: hsl(217, 80%, 35%);
--brand-900: hsl(217, 80%, 20%); /* 最深 */保持色相和饱和度不变，只调亮度，视觉上一致性最好。Tailwind CSS 的调色板就是这个逻辑。
处理设计稿颜色
Figma 和 PS 默认显示 HSB 值。设计师给你 H:217 S:89 B:91：
- 粘贴到转换器的 HSB 输入框
- 复制 HEX 输出
- 写进 CSS
CSS 自定义属性中使用 HSL
用 CSS 变量拆开 HSL 的三个维度，不需要 Sass/Less 就能生成变体：
:root {
--primary-hue: 217;
--primary-sat: 80%;
--primary: hsl(var(--primary-hue), var(--primary-sat), 51%);
--primary-dark: hsl(var(--primary-hue), var(--primary-sat), 35%);
--primary-light: hsl(var(--primary-hue), var(--primary-sat), 90%);
}对比度检查
WCAG 对比度计算需要 RGB 亮度值。大多数对比度检查工具接受 HEX 输入，用转换器快速把任意格式转成 HEX 就能直接粘贴。
颜色格式速查表
| 格式 | 示例 | 使用场合 |
|---|---|---|
| HEX | #1a73e8 | HTML、CSS、SVG |
| RGB | rgb(26, 115, 232) | CSS、Canvas |
| RGBA | rgba(26, 115, 232, 0.8) | CSS（含透明度） |
| HSL | hsl(217, 80%, 51%) | CSS、色阶设计 |
| HSLA | hsla(217, 80%, 51%, 0.8) | CSS（含透明度） |
| HSB/HSV | H:217 S:89 B:91 | Figma、Photoshop |
常见错误
把 HEX 简写用在 JavaScript 里：#f60 是合法 CSS，但部分 JavaScript 颜色解析库不支持。不确定时展开成 #ff6600。
混淆 HSL 和 HSB 的亮度含义：HSL 中 L=50% 是纯色；HSB 中 B=100% 才是纯色（最亮最鲜艳）。两者数值相同但含义不同。
不加 alpha 就做透明效果：rgb() 完全不透明。需要透明度时用 rgba() 或 hsla()，或者用 CSS opacity 属性（会影响子元素）。
告别在 DevTools 和设计工具之间反复切换。立即使用颜色转换器 →