无需上传、100% 本地处理、无需账户

颜色转换器

在 HEX、RGB、HSL、HSV 和 CMYK 之间转换。实时预览。用于无障碍的 WCAG 对比度检查器。不离开你的浏览器。

颜色转换器 的工作原理

颜色转换器在你输入时立即在 HEX、RGB、HSL、HSV 和 CMYK 格式之间转换任何颜色。它还对你选择的任意两种颜色运行 WCAG 对比度检查,显示对比度比率以及普通文本、大文本和 UI 组件的 AA/AAA 通过/失败结果。所有计算在浏览器中进行,不发送任何数据;你输入的内容不离开你的设备。

了解同一颜色在不同颜色模型中的外观对设计交接非常有用。设计师可能将品牌颜色指定为 HEX #1A4F8C;CSS 开发者需要 HSL 等效值用于主题;印刷团队需要 CMYK 分解。此工具同时在所有方向进行转换,因此你永远不必运行多个单独的转换器。

颜色转换器 的分步使用说明

  1. 输入 HEX 值,点击颜色样本,或在相应字段中输入 RGB、HSL、HSV 或 CMYK 值。
  2. 所有其他格式表示立即更新,显示等效颜色。
  3. 要运行对比度检查,使用两个颜色选择器选择前景颜色和背景颜色。
  4. 阅读 WCAG 对比度比率以及 AA 和 AAA 合规级别的通过/失败徽章。
  5. 使用每个字段旁边的复制图标复制任何颜色值。

常见使用场景

  • UI 设计师将品牌 HEX 代码转换为 HSL,以便为主题系统编写 CSS 自定义属性。
  • Web 开发者在发布组件前检查文字颜色与背景之间的对比度,确认符合 WCAG AA 标准。
  • 印刷设计师收到一个网页 HEX 颜色,需要 CMYK 等效值以在印刷手册中匹配。
  • 开发者需要设计令牌的 RGB 分解,以将各个通道值传递给 Canvas 绘图函数。

常见问题

工具支持 Alpha(透明度)值吗?

当前转换器适用于完全不透明的颜色(alpha = 1)。HEXA(8 位十六进制)和 RGBA 目前不在范围内。对于不透明度,请在 CSS 中使用 rgba() 或 oklch() 表示法单独设置 Alpha 通道。

我输入的颜色会被存储或发送到任何地方吗?

不会。颜色转换是纯算术(通道重映射和范围缩放),完全在浏览器的 JavaScript 引擎中运行。你在这里输入的内容不会到达任何服务器或外部服务。

检查器支持哪些 WCAG 对比度级别?

工具根据 WCAG 2.1 成功标准报告:AA 要求普通文本(18pt 或 14pt 粗体以下)的最低对比度比率为 4.5:1,大文本和 UI 组件为 3:1。AAA 要求普通文本为 7:1,大文本为 4.5:1。

为什么此工具中的 CMYK 值与专业设计软件不同?

此工具执行的 RGB 到 CMYK 转换是没有颜色配置文件的数学公式。专业设计应用程序应用 ICC 颜色配置文件,考虑油墨网点增益和基材属性。这里的 CMYK 值对近似很有用;对于生产印刷,请始终在专用软件中应用你的印刷配置文件。

可以在这里转换「cornflowerblue」这样的 CSS 颜色名称吗?

CSS 命名颜色不能直接输入到转换器字段中。要转换命名颜色,请先在 CSS 参考中找到其 HEX 值(cornflowerblue 是 #6495ED),然后将该 HEX 粘贴到 HEX 字段中以查看所有其他格式。

页面加载后工具可以离线使用吗?

可以。颜色转换是无外部依赖的算术。一旦页面在你的浏览器缓存中,你可以在没有网络连接的情况下打开它,所有转换都将正常工作。