开发者颜色转换器：HEX、RGB、HSL详解

你需要了解的三种颜色系统

HEX (#RRGGBB)

HEX颜色将红、绿、蓝通道表示为十六进制值。例如 #FF6B35 表示暖橙色。

何时使用： 设计文件复制颜色、CSS变量中的品牌色、设计交接最常见格式。

RGB / RGBA

RGB对每个通道使用0到255的值。RGBA添加透明度通道。

何时使用： 需要透明度、程序化颜色计算、JavaScript canvas或图像处理。

HSL / HSLA

HSL代表色相(0-360°)、饱和度(0%-100%)、亮度(0%-100%)。最人性化的颜色模型。

何时使用： 创建调色板、调整颜色明暗、构建主题系统、暗色模式适配。

用HSL构建调色板

从基础颜色开始，只需调整亮度值即可创建整个调色板，色相和饱和度保持一致。

无障碍：WCAG颜色对比标准

| 级别 | 普通文本 | 大号文本 | |------|---------|---------| | AA（最低） | 4.5:1 | 3:1 | | AAA（增强） | 7:1 | 4.5:1 |

实用技巧：

1. 不要仅依赖颜色传递信息 — 配合图标和标签。
2. 浅灰色在白色背景上是最常见的违规。
3. 检查两种主题 — 浅色模式通过的颜色在暗色模式下可能失败。

设计师-开发者颜色交接

使用设计令牌而非原始颜色值。为每个UI元素指定所有状态的颜色。提前达成格式共识。

暗色模式颜色策略

1. 降低饱和度 — 暗色背景上降低10-20%。
2. 使用深灰色而非纯黑 — #1a1a2e 优于 #000000。
3. 翻转亮度标度。
4. 用真实眼睛测试。

即时转换颜色

使用颜色转换器在HEX、RGB、HSL等格式之间转换。还可探索CSS渐变生成器和CSS阴影生成器。