颜色转换器
将同一个颜色转换为 HEX、HEXA、RGB、RGBA、HSL、HWB、Lab、LCH、OKLab、OKLCH，也可以查看 Display P3、Rec. 2020、CMYK 等广色域和印刷相关格式。只要粘贴一个颜色值，就能同时看到实时预览和各格式的等价值。解析过程全部在浏览器本地完成，适合前端开发、设计交接、主题系统、品牌色管理、跨设备校色和印刷协作。
- 常见 CSS 颜色值和现代色彩空间并排展示，方便快速对比
- 输入变化时预览和文本结果会同步更新，语法问题更容易发现
- 常用格式和高级色彩空间分组展示，不会把所有结果混在一起
- 透明度会在 HEXA、RGBA、HSLA 和现代斜杠 alpha 写法中保留
- 颜色解析在浏览器本地完成，适合处理未发布的品牌色和内部设计资产
支持 HEX、HEXA、RGB、RGBA、HSL、HWB、Lab、LCH、OKLab、OKLCH，以及多种高级色彩空间。
功能简介
粘贴一次，就能拿到常见 CSS 值和 OKLCH 等现代色彩空间的结果，减少同一个颜色在调色工具、设计文件、CSS 变量和文档之间来回传递时产生的偏差。
- 01
一次转换多种 CSS 格式
HEX、RGB、HSL 会和 HWB、Lab、LCH、OKLab、OKLCH 一起展示，方便你选择最适合当前代码上下文的写法。
- 02
灵活识别输入格式
6 位 HEX、8 位 HEXA、逗号分隔的 RGB、空格分隔的 HSL、带斜杠 alpha 的 OKLCH 都能识别，不需要手动清理格式。
- 03
保留透明度
如果输入中包含透明度，alpha 通道会继续出现在 HEXA、RGBA、HSLA 和 OKLCH 输出中，不会被悄悄丢掉。
- 04
集中查看高级色彩空间
Display P3、Rec. 2020、Adobe RGB、ProPhoto、XYZ 和 Jzazbz 会集中展示，方便广色域检查、跨设备校色和印刷交接。
- 05
文本结果旁边就是实时预览
输入时色块会同步更新，在复制之前就能发现不易阅读的颜色或交接时可能出现的视觉偏差。
- 06
每一行都可以单独复制
每个结果都有自己的复制按钮。需要 HEX 就复制 HEX，需要 OKLCH 就复制 OKLCH，不用手动选中括号或多余字符。
如何使用
从粘贴颜色值到复制目标格式，整个流程都在一个面板里完成。无论是快速确认，还是在设计和代码之间来回切换，都能少走一些弯路。
- 01
在输入框里粘贴或输入一个颜色，例如设计文件里的 HEX，或规范文档中的 OKLCH。
- 02
查看预览色块，确认它和源设计或预期效果一致。
- 03
浏览常用格式和高级色彩空间分组，找到适合当前场景的语法。
- 04
点击对应行的复制按钮，把规范化后的值粘贴到 CSS、token 或文档中。
- 05
如果想尝试另一个颜色，可以点击示例颜色，或清空输入后重新开始。
功能说明
一个面板覆盖日常颜色转换、透明度处理、设计 token 对齐和跨设备颜色沟通，不需要再额外打开调色板或色彩管理工具。
- 一次性转换 HEX、RGB、HSL、HWB、Lab、LCH、OKLab 和 OKLCH 的在线颜色工具
- 支持逗号、空格、斜杠 alpha 等多种输入语法
- 常用格式和高级色彩空间分组展示，只看你当前需要的部分
- 实时颜色预览，帮助更早发现解析错误和视觉偏差
- 每行都有复制按钮，只复制你真正需要的那个值
- 在 HEXA、RGBA、HSLA 和 OKLCH 输出中保留 alpha 透明度
- 内置示例颜色，方便快速检查语法和做演示
- 连接设计文件和前端 token，减少手动转换步骤
- 支持维护主色、强调色和状态色等主题颜色
- 通过统一、规范化的参考值帮助管理品牌色
- 提供 Display P3 和 Rec. 2020 输出，支持广色域检查
- 包含 CMYK 输出，便于印刷、包装和线下协作
适合哪些场景
当一个颜色需要从设计文件进入 CSS、token、文档、界面状态和营销素材时，保留一个干净的参考值，可以让团队更容易对齐哪个值才真正代表这个颜色。
-
设计交接到前端
把设计工具里选出的颜色转换成代码库偏好的格式，不必手动重新计算 HSL 或 OKLCH。
-
设计 token 与 CSS 变量
为同一个语义名称生成多个等价值，再选择最符合团队 token 规范的写法。
-
维护主题系统
通过等价值对比，检查浅色、深色和季节主题中的主色、强调色和状态色。
-
品牌色管理
确认同一个品牌色没有在设计文件、文档和产品代码里变成多个看似相近但不一致的值。
-
扩展组件库
在 HSL 或 OKLCH 中调整亮度和彩度，快速探索 hover、active、disabled、info、warning 等状态变体。
-
广色域与跨设备检查
当颜色需要跨屏幕和内容生产流程保持一致时，可以对照 Display P3、Rec. 2020 和 Adobe RGB 的值。
-
活动和营销页面
把一次性的活动色转换成设计系统允许的格式，同时不破坏现有调色板。
-
辅助无障碍调整
先把前景色和背景色规范化，再用对比度检查工具验证真实组合是否可读。
-
印刷与包装交接
将屏幕颜色转换为 CMYK，帮助印刷、包装和线下物料与数字产品保持视觉一致。
-
数据可视化调色板
图表系列色、状态色和强调色经常分散在不同库和配置里。先统一成同一种语法，可以减少仪表盘中相邻图表互相打架的问题。
颜色格式参考
这里整理了本工具会输出的主要格式，并附上简短说明和常见示例。它不能替代 W3C 规范，但足够覆盖日常前端开发、设计协作和品牌管理中经常遇到的颜色写法。
| 格式 | 说明 | 示例 |
|---|---|---|
| HEX | 用十六进制表示红、绿、蓝三个通道。写法简短，在设计 token 和 CSS 变量中非常常见。 | #6366f1 |
| HEXA | 在 HEX 后追加 alpha 通道。需要把透明度也放进一个简短值里时很方便。 | #6366f180 |
| RGB | 用十进制表示红、绿、蓝三个通道。适合按通道调整，也便于通过脚本拼接。 | rgb(99, 102, 241) |
| RGBA | 在 RGB 基础上加入透明度。常用于遮罩、焦点状态、阴影和有层级的 UI 表面。 | rgba(99, 102, 241, 0.6) |
| HSL | 用色相、饱和度和亮度表示颜色，更接近设计师思考颜色和调色板变体的方式。 | hsl(239 84% 67%) |
| HSLA | 带透明度的 HSL。适合需要保留语义、同时又要半透明效果的主题色。 | hsl(239 84% 67% / 0.6) |
| HSV | 用色相、饱和度和值来表示颜色。它接近很多取色器使用的模型，但亮度含义和 HSL 不同。 | hsv(239 59.3% 94.5%) |
| HWB | 用色相、白度和黑度表示颜色。适合在保持色相的同时，快速调淡或压暗一个基础色。 | hwb(239 39% 5%) |
| Lab | 偏向感知均匀的色彩空间，适合测量色差、控制品牌色容差和做更细的校准。 | lab(53.59% 22.06 -66.53) |
| LCH | 把 Lab 用亮度、彩度和色相表示。做色相旋转或彩度控制时，比直接看 Lab 更直观。 | lch(53.59% 70.10 288deg) |
| OKLab | 更现代的感知模型，在数字界面中做颜色插值时，通常比传统 Lab 更平滑。 | oklab(58.56% 0.0255 -0.1639) |
| OKLCH | OKLab 的圆柱表示法。越来越多地用于构建主题阶梯、品牌色族和可控渐变。 | oklch(58.56% 0.1659 278deg) |
| CMYK | 用青、品红、黄、黑四个油墨通道表示颜色，常用于和印刷、包装、线下物料团队沟通。 | cmyk(58.9% 56.8% 0% 5.5%) |
使用建议
颜色转换只是第一步。配合命名规范、对比度检查和视觉回归，转换后的值才能更安全地进入真实产品。
- 团队先约定一个主要格式，例如 token 用 HEX，主题表达用 OKLCH，这样可以减少颜色漂移。
- 在每个设计 token 旁边记录来源和用途，方便品牌色在复用过程中保持可追踪。
- 浅色主题和深色主题要分别验证对比度和可读性，不要只检查其中一种模式。
- 更新颜色后，在关键页面做视觉回归或截图对比，避免一个颜色改动影响到其他区域。
- 把颜色转换和无障碍对比度检查当成两个步骤，先规范化，再检查对比度。
- 大规模调色板迁移建议逐步上线，先从几个关键页面验证，再扩展到全站。
- 把设计师使用的语义名称和工程侧的 token 名称维护在同一份文档里，减少跨角色沟通成本。
边界与注意事项
颜色转换本身是确定的计算，但最终观感仍然会受到显示器、渲染链路和设计意图影响。输出值请放到真实使用场景里确认。
- 同一个值在不同显示器上可能看起来不一样，校准差异越大，偏差越明显。
- 部分高级色彩空间在旧浏览器和渲染引擎中的支持有限，仍需确认目标环境。
- 颜色规范化不能替代视觉对比度、色觉差异和完整无障碍检查。
- 品牌色在真实界面中的效果，还取决于交互状态、字号、周围留白和上下文，而不只是颜色值本身。
- 批量替换旧调色板前请先备份，并在全站上线前验证几个关键页面。
- 一个值在技术上正确，不代表视觉层级一定正确。重要页面仍然需要设计评审。
- 印刷场景中，CMYK 的最终效果会受到油墨、纸张和工艺影响，本工具输出更适合作为和制作团队沟通的起点。
常见问题
这些是在前端实现、设计交接和品牌协作中使用颜色转换时最常见的问题。
这个颜色转换工具支持哪些格式？
可以输出 HEX、HEXA、RGB、RGBA、HSL、HSLA、HWB、Lab、LCH、OKLab、OKLCH、HSV 和 CMYK，也支持 Display P3、Rec. 2020、Adobe RGB、ProPhoto、XYZ、Jzazbz 等高级色彩空间。
为什么我的颜色值解析失败？
大多数情况是语法问题，比如少了 #、括号没闭合、使用了智能引号、分隔符不对、单位写错，或通道值超出范围。输入框下方会提示支持的格式。
我的颜色会发送到服务器吗？
不会。解析和格式化都在浏览器本地完成，因此适合处理未发布的品牌色、内部资产和保密设计文件。
输出结果可以直接粘贴到 CSS 里吗？
可以。每一行都是符合当前语法的有效 CSS 颜色值，可以直接放进样式表、设计 token 文件或 CSS 变量里。
透明度是怎么处理的？
如果输入里包含 alpha，例如 HEXA、RGBA、HSLA，或 oklch(70% 0.16 250 / 0.8) 这样的现代斜杠写法，所有支持透明度的输出都会同步更新。
什么时候真的需要高级色彩空间？
广色域显示器校准、跨设备色彩管理、精细品牌色控制、HDR 内容检查和专业视觉评估，都可能需要 sRGB 之外的色彩空间。
为什么同一个颜色在不同设备上看起来不一样？
不同显示器的色域、亮度、色温和校准都不一样，浏览器的色彩管理也并不完全统一。重要场景建议在实际目标设备上复核。
这个工具对设计师也有用吗？
有用。设计文件交接到工程时，保留一个规范化的参考值，可以减少双方理解不一致和返工。
应该优先用 HEX 还是 RGB？
两者都很常见。HEX 简短，适合 token；如果需要控制透明度，或通过脚本按通道处理，RGBA 会更方便。
HSL 和 RGB 的核心区别是什么？
RGB 更偏设备和计算，适合按通道处理；HSL 更偏设计表达，适合围绕色相、饱和度和亮度做调整。
什么时候 OKLCH 更适合？
在构建主题阶梯、品牌色族、可控渐变和跨色相调色板时，OKLCH 通常更容易得到视觉上一致的结果。
Lab 和 LCH 在生产 Web 项目中有意义吗？
有，尤其适合控制色差、做更平滑的状态色过渡、管理品牌容差，或在设计系统里描述相邻颜色。
可以一次转换很多颜色吗？
当前流程更适合单个颜色的精确确认和转换。批量处理可以搭配 CSV 工具、脚本，或设计软件中的批量功能。
颜色转换可以代替对比度检查吗？
不能。转换解决的是这个颜色怎么写；对比度检查解决的是用户是否真的能看清。两者应该配合使用。
为什么 CMYK 和屏幕上的颜色差异这么大？
CMYK 是减色模型，和屏幕使用的 RGB 加色模型本来就不同；实际印刷结果还会受到油墨、纸张和工艺影响。
OKLCH 的 chroma 应该设多少？
没有唯一标准，但多数品牌色大致会落在 0.05 到 0.25 之间。太低会显得灰，太高则可能超出部分浏览器或显示器支持的色域。
更多相关工具
转换完成后，可以继续使用调色板生成器、对比度检查器和渐变生成器，把规范化的颜色扩展成完整的视觉系统。