颜色转换器 — HEX、RGB、HSL、OKLCH 在线互转
HEX、RGB、HSL、OKLCH 互转，附带预览和 WCAG 对比度检查
在浏览器中处理 · 不上传任何内容
已识别颜色：#1e90ff
HEX
#1e90ffRGB
rgb(30, 144, 255)HSL
hsl(209.6, 100%, 55.9%)OKLCH
oklch(0.652 0.1901 253.21)WCAG 对比度
白色背景 Aa
3.24:1
- AA 普通文字（4.5）未通过
- AA 大号文字（3）通过
- AAA 普通文字（7）未通过
- AAA 大号文字（4.5）未通过
黑色背景 Aa
6.49:1
- AA 普通文字（4.5）通过
- AA 大号文字（3）通过
- AAA 普通文字（7）未通过
- AAA 大号文字（4.5）通过
功能简介
样式表里用 HEX，设计工具里用 RGB，配色板里用 HSL 或 OKLCH，颜色值总在不同格式之间切换。用其中任何一种格式输入颜色，这个工具就会同时显示 HEX、RGB、HSL 和 OKLCH，预览颜色，并检查它在白色和黑色背景上的对比度。
使用方法
- 输入颜色值，或使用输入框旁边的取色器。例如：
#1e90ff、rgb(30 144 255)、hsl(210 100% 56%)、oklch(0.65 0.19 250)。 - 在下方查看 HEX、RGB、HSL 和 OKLCH 的值，复制需要的那一个。
- 在对比度区域查看在白色和黑色背景上的对比度，以及是否通过 AA 和 AAA。如果设计中用的是其他背景色，把它填入 背景色 即可检查这一组具体搭配。
- 带透明度的颜色会输出 8 位 HEX、
rgba()、hsla()以及/ alpha写法。
工作原理
- 输入支持 HEX（3、4、6 或 8 位，
#可省略）、CSS Color 4 的 148 个颜色名（tomato、rebeccapurple，不区分大小写）和transparent、rgb()/rgba()（逗号或空格语法，可用百分比）、hsl()/hsla()以及oklch()。 - OKLCH 使用 Björn Ottosson 的 OKLab 定义（2020）中的标准矩阵。先把 sRGB 线性化，经过 LMS 立方根得到 L、a、b；C 是 (a, b) 的长度，H 是它的角度。
- 输出精度：HSL 保留 1 位小数，OKLCH 的 L 和 C 保留 4 位、H 保留 2 位，足以保证转回 HEX 时得到与输入完全相同的值。
- 超出 sRGB 色域的 OKLCH 输入会按通道截断到 0-255，并显示提示。
- 对比度遵循 WCAG 2.x 相对亮度。显示的比值四舍五入到 2 位小数，但是否通过按未舍入的值判断，所以 4.499 绝不会显示成通过的 4.5。
示例
| 输入 | 结果 |
|---|---|
#ffffff 对黑色 |
21:1，所有级别都通过 |
#777777 在白色上 |
约 4.48:1，普通文字未通过 AA，大号文字通过 |
#ff0000 |
oklch(0.628 0.2577 29.23) |
#ffffff |
oklch(1 0 0) |
补充说明
- 正文文字请把 AA 普通文字（4.5:1）当作最低标准。大号文字指 18pt 及以上或 14pt 粗体，AA 只需 3:1。
- 不要只靠颜色传达含义，最好再加上图标或文字标签。对比度检查只衡量文字与背景之间的明暗差。
常见问题
为什么要用 OKLCH？
在 HSL 中，亮度值相同的两种颜色看起来明暗可能差别很大，调配色板很费劲。OKLCH 基于以人眼感知为核心设计的 OKLab 色彩空间，改变 L（亮度）、C（色度）或 H（色相）时，看到的变化相对均匀。CSS 可以直接通过 oklch() 使用它。
OKLCH 值超出 sRGB 色域时会怎样？
如果屏幕的 sRGB 无法显示，会把每个 RGB 通道截断到 0-255，使用最接近的颜色，并给出提示。这只是简单截断，而不是逐步降低色度的色域映射，所以结果可能与预期略有不同。
对比度是怎么计算的？
使用 WCAG 2.x 的相对亮度公式，即（较亮颜色的亮度 + 0.05）除以（较暗颜色的亮度 + 0.05），范围从 1:1 到 21:1。普通文字 AA 需要 4.5:1、AAA 需要 7:1；大号文字分别需要 3:1 和 4.5:1。
半透明颜色的对比度怎么算？
先把它叠加到所选背景（白色或黑色）上。50% 透明度的黑色叠在白色上看起来是灰色，所以按这个灰色计算对比度。
