什么是颜色转换？
浏览器渲染的每一种颜色最终都是一个 sRGB 三元组——红、绿、蓝三个通道各取 0 到 255 之间的数值，再加上可选的 alpha 通道。CSS Color Level 4 规范定义了若干能与同一三元组互转的文本格式，以及感知均匀的 OKLCH 色彩空间。本工具能读取其中任意一种、转换为全部其他格式，并报告与第二种颜色的 WCAG 2.1 对比度，让你能放心交付无障碍的界面。
颜色转换是如何工作的？
转换是一系列定义清晰的线性与非线性变换。每一步都在你的浏览器中完成——任何输入都不会到达我们的服务器：
- 首先解析你的输入。工具会自动识别 3、4、6 或 8 位 HEX，识别采用传统逗号语法或现代斜杠 alpha 语法的函数形式
rgb()/rgba()/hsl()/hsla()/hsv()/hwb()，以及全部 150 个 CSS 命名颜色（包括rebeccapurple）。 - 解析得到的颜色会被归一化为标准 sRGB——四个浮点数
{r, g, b, a}，每个都落在 0–1 区间。这是全部输出格式所依赖的唯一真实来源。 - HEX 通过将每个通道四舍五入为 0–255 字节值并拼接十六进制位得到。RGB / RGBA 直接打印同样的字节。HSL 与 HSV 采用标准 W3C 柱坐标算法；HWB 的色相取自 HSV，白度为
min(r, g, b)，黑度为1 - max(r, g, b)。 - CMYK 是一个朴素的近似——
k = 1 - max(r, g, b)，再由剩余通道计算c, m, y。它适合屏幕预览，但不适合印刷：真正的 CMYK 输出需要 ICC 配置文件，本工具刻意不内嵌这些文件。 - OKLCH 遵循 css-color-4 的正向路径：先对 sRGB 进行线性化，乘以 LMS 矩阵，取立方根，再乘以 LMS 到 OKLab 的矩阵，最后从直角坐标的 OKLab 转换为极坐标的 OKLCH。OKLCH 在感知上是均匀的，因此是用来设计在人眼看起来均衡的调色板的正确空间。
为什么使用这个颜色转换器？
- 隐私：每次转换都在你的浏览器里、用纯 JavaScript 完成。你粘贴的颜色绝不会离开你的设备——这对未发布的品牌设计、内部设计系统以及受 NDA 约束的客户原型尤为重要。
- 设计师到开发者的交接：把 Figma 中的 HEX 粘贴进来，立刻读出可用于 Tailwind 配置的
rgb()字符串、可用于 CSS 自定义属性的hsl()字符串，或者用于现代调色板的oklch()字符串——所有格式集于一处，无需在标签页之间反复粘贴。 - WCAG 精确度：对比度检查器使用完全符合 WCAG 2.1 的相对亮度公式，以及面向普通文本和大号文本所发布的 AA（4.5 / 3.0）与 AAA（7.0 / 4.5）阈值。报告的比值与手工计算器之间的误差在 0.01 以内。
- 深色模式与调色板推导：HSL 与 OKLCH 将明度暴露为单一通道，因此沿明度轴上下平移品牌色就能轻松得到匹配的深色模式 token，或基于单一种子颜色生成 10 级调色板梯度。
颜色转换的常见应用有哪些？
颜色转换在 Web 开发、设计与无障碍工作中无处不在：
- 设计系统：将品牌 HEX 转换为匹配的 HSL 与 OKLCH token，用于 CSS 自定义属性的色阶，然后逐一验证每种组合相对页面背景都通过 WCAG AA。
- 无障碍审计：从真实产品界面中粘贴前景色与背景色的组合，一眼读出对比度以及面向普通字重和大号字重文本的 AA/AAA 判定。
- 跨工具往返：从截图取色器中取出一种颜色（HEX），粘贴到这里，再把
hsl()或oklch()字符串直接复制到 Tailwind、Figma token 或 CSS-in-JS 主题中。
颜色转换示例是什么样的？
以著名的 rebeccapurple 为例。命名颜色查表会将它解析为 #663399。RGB 转换得到 rgb(102, 51, 153)。HSL 转换得到 hsl(270, 50%, 40%)——紫罗兰色相、半饱和、四成明度。把它与纯白搭配后用对比度工具检查，得到约 7.39 的比值，对普通文本通过 AAA（7.0），对大号文本通过 AAA（4.5）——这是一个稳健、无障碍的前景色选择。把 #663399 经 RGB → HSL → RGB → HEX 完整往返一次，会逐字节地返回原始字符串。
把这款转换器当作你遇到任何颜色时——无论它出现在代码、设计稿还是截图中——的快速参考；把对比度检查器当作发布前的最后一道核验。一切都在本地运行，不留任何日志，转换算法遵循已发布的 W3C 与 WCAG 规范，因此数字与你的审计工具或浏览器开发者工具所报告的完全一致。