🖼️
图片转换
图片转换
颜色代码转换
此处的 CMYK 为与设备无关的近似值。实际印刷颜色会随纸张、油墨和色彩配置文件而变化，需与打样稿核对确认。
对比度检查（WCAG）
正常文本 — 正文大小的阅读效果
大号文本（24px 以上）
5.98:1
AA 正常 4.5:1 · 通过AA 大号 3:1 · 通过AAA 正常 7:1 · 未达标AAA 大号 4.5:1 · 通过
配色生成
互补色
邻近色
三角配色
明度梯度
颜色工具功能
Color Converter — 同时显示 HEX、RGB、HSL 和 CMYK。输入支持 HEX、rgb()、hsl()，也支持 green、tomato 等 CSS 颜色名称，还可以用取色器直接选取。 Contrast Checker — 按 WCAG 2.1 公式计算文字色与背景色的对比度，立即显示 AA、AAA 的达标情况，并提供文字实际效果的预览。 Palette Generator — 从基准色生成互补色、邻近色、三角配色以及九级明度梯度，点击色块即可复制 HEX。 所有计算均在浏览器内完成。
使用方法
① 在颜色框中输入 HEX、RGB、HSL 或颜色名称，也可用取色器选取。 ② HEX、RGB、HSL、CMYK 四种表示会立即显示，点击即可复制。 ③ 要查看对比度，请分别输入文字颜色和背景颜色，系统会算出比值和 AA、AAA 结果。 ④ 从下方配色中挑选合适的颜色并复制。
适用场景
• 把设计稿中的 HEX 转为 CSS 或设计工具所需的表示法 • 在无障碍检查中确认文字颜色是否达标 • 为品牌色寻找搭配的辅助色 • 为按钮和徽章制作明度梯度 • 送印前查看 CMYK 近似值
常见问题
- Q. 支持哪些输入格式？
- A. 支持 HEX（#16A34A、#1A4）、rgb(22,163,74)、hsl(142,76%,36%)，以及 green、tomato 等 CSS 颜色名称。工具直接使用浏览器的颜色解析器，因此在 CSS 中有效的写法基本都可用。
- Q. 对比度需要达到多少？
- A. 按 WCAG 2.1 标准，正常文本 AA 需 4.5:1，AAA 需 7:1；大号文本（24px 以上，或加粗 18.66px 以上）放宽为 AA 3:1、AAA 4.5:1。本工具会同时显示这四项。
- Q. 可以把 CMYK 值直接交给印刷厂吗？
- A. 不建议。这里显示的 CMYK 来自不考虑设备特性的简单换算公式。实际印刷颜色会随纸张、油墨和色彩配置文件而变化，对颜色要求高的项目请用印刷厂的配置文件转换并核对打样稿。
- Q. 支持透明度（Alpha）吗？
- A. 目前仅处理不透明颜色。输入 rgba 或 8 位 HEX 时会按去掉 Alpha 的 RGB 值识别。半透明元素的实际对比度需要与其背后的背景色混合后再计算。
- Q. 明度梯度是如何生成的？
- A. 保持基准色的色相（H）和饱和度（S）不变，仅把明度（L）从 10% 到 90% 分九级变化，适合作为设计系统色阶的起点。