写样式时最常见的来回切换是：设计给了个 #1A73E8，但你要的是 rgb()、hsl()，或者想知道它调亮 20% 是什么色。这一页把这些换算和处理都放在一处，改一次颜色，七种格式与衍生色全部同步刷新。
几个不那么直观的地方，页面都按标准算：
OKLCH 是 CSS Color 4 里新加的感知均匀色彩空间。它和 HSL 的区别在于「等亮度变化看起来真的等亮度」——用 HSL 从蓝到白调梯度，中间的过渡会显得发灰，用 OKLCH 就不会。页面的明暗梯度同时给了 HSL 加白加黑的结果，方便对比。
WCAG 对比度不是简单的亮度差，而是按相对亮度公式（含 sRGB 线性化）算出来的比值，范围 1:1 到 21:1。正文要过 4.5:1、大字号过 3:1 才算 AA，7:1 是 AAA。很多「看着还行」的配色实测只有 2.8:1，这一栏就是用来避免这种错觉的。
CMYK 只是近似值：屏幕是 RGB 加色，印刷是 CMYK 减色，两者没有精确对应关系，这里的换算用的是最常见的朴素公式，拿去印刷前必须用专业色彩管理再核对。
整页没有后端接口，图片取色也在本地画布上完成。
| 想做什么 | 怎么做 | 说明 |
|---|---|---|
| 把设计稿色值转成代码 | 填 HEX，看七种格式 | 点任意一行复制 |
| 做 hover / 边框 / 背景的深浅档 | 看明暗梯度 | 十级由浅到深，点一下就复制 |
| 从一个主色扩一套配色 | 看配色方案 | 互补 / 类似 / 三角 / 分裂互补 / 单色 |
| 确认文字在背景上能不能看清 | 设前后景看对比度 | 低于 4.5:1 就得换色或加大字号 |
| 从截图里取一个色 | 传到图片取色 | 点一下吸色，可连取几个存起来 |
做单色相的深浅梯度用 OKLCH 更稳，因为它保证「亮度线性」，同一色相从深到浅的视觉跳变是均匀的；HSL 的亮度并不感知均匀，蓝色调到很亮会偏灰紫。但要注意 OKLCH 的 oklch() 语法在旧浏览器（Safari 15 以前）不支持，做正式项目时建议带一个 HEX 兜底。
严格按 WCAG 2.1 不能算 AA。标准是 4.5:1，4.499 也不通过。实际做法有三条：把文字色加深或变浅一档、把字号提到 24px 以上（这时只需 3:1）、或者给文字加底色块。页面上的梯度色块正好能用来快速试这些替代色。
正常。sRGB 与 CMYK 的色域不同，中间没有唯一解，需要设备特性文件（ICC）才能精确转换。这里用的是朴素公式，只适合看个大概。真要出印刷稿，请在 Photoshop / Illustrator 里用印刷厂提供的 ICC 配置文件转换，并打样确认。
多半是缩放的缘故。页面会把大图按比例缩到画布上显示，你点的其实是缩放后的像素。想要精确值，可以在画布上放大后点，或者把画布尺寸调到与图片一致（页面会优先保留原尺寸上限 1600px）。另外带透明通道的 PNG，透明区域算出来的颜色没有意义。
可以直接用，它们都是标准 HEX。明暗梯度是从主色向白与黑线性混合得到的，配色方案是在 HSL 色环上按固定角度旋转得到的。这两套算法简单可复现，所以换个主色后整套会一起变，适合快速起一个色板草稿；正式的设计系统建议再按品牌调性手工微调。
这个工具完全在你的浏览器里运行：你输入的内容、上传的文件，都不会离开你的电脑，也不会传到任何服务器。
放心用，数据只在你自己的电脑上转一圈。
用手机相机扫描二维码，即可继续使用该工具
遇到问题或有好建议？告诉我们。