设计
颜色格式转换
选一个颜色，或者直接输入三种写法中的任意一种，另外两种立刻同步；色块还会提示在这个背景上文字该用深色还是浅色。
HEX
RGB
HSL
预览
怎么用
- 输入 HEX 值、
rgb()值，或直接用取色器。 - 另外两种写法会立即更新。
- 色块会提示该背景上文字应使用深色还是浅色。
HEX、RGB、HSL 回答的是不同问题
HEX 和 RGB 描述的是同一件事：sRGB 下的三个通道强度。HSL 把这些数字重述为色相、饱和度、亮度，这和人的描述方式一致——「调暗一点」是降低亮度，而不是三个通道各减 20。设计师用 HSL 挑颜色、用 HEX 交付，因为前者可预测，后者更紧凑。
对比度是另一个问题
WCAG 要求正文对比度至少 4.5:1，大字号至少 3:1。这个比值是按相对亮度算的，不是按你看到的感知差异算，所以两个看起来区别明显的颜色仍可能不合格。纯红配白是 3.99:1——做标题能过，做正文不过。
为什么调色时要转成 HSL
HEX 是存储格式：紧凑、无歧义，但它不告诉你任何关系。HSL 把调整配色时真正会问的三个问题拆开了——哪个色相、多饱和、多亮——于是一个悬停态变成「同色相、暗 6%」，而不是凭眼睛另挑一个色值。
八位写法在末尾加透明度（#RRGGBBAA），但支持并不普遍：较老的 Android 浏览器和部分邮件客户端会忽略它，直接渲染成不透明。凡是要在各种收件箱里活下来的场景，改用 rgba()。
常见问题
为什么和 Photoshop 里的 HSL 数值不一样？
HSL 是 RGB 的数学变换，理论上完全一致。数值不同通常是因为对方显示的是 HSV/HSB——一个看起来相似但不同的模型。
支持透明度和 8 位 HEX 吗？
这里处理三个颜色通道。透明度请另外用 rgba() 表示，或自行补上最后两位十六进制。
CSS 里应该写 color 还是 colour？
CSS 用美式拼写：background-color。本页正文里的英式拼写只是行文习惯。
为什么同一个颜色在另一块屏上不一样？
因为十六进制值是与设备无关的，屏幕不是。未标注色彩空间时默认按 sRGB 解释；广色域屏渲染出来会比廉价面板更艳。
怎么让颜色符合可访问性？
看它和背景的对比度：正文 4.5:1，大字和界面边框 3:1。重要的不是颜色本身，而是这个比值。