设计工具 · 免费

取色器与颜色转换器

在 HEX、RGB、HSL 和 CMYK 之间自由切换，测试无障碍对比度，并把一种颜色扩展成实用的配色。

颜色只保留在此浏览器中

实时颜色

当前选择

#3159DE

在右侧编辑任意颜色模型，其他所有数值和配色都会立即更新。

颜色数值

用你熟悉的格式编辑。

HEX

RGB

H°S%L%

C%M%Y%K%

HEX#3159DE

RGBrgb(49, 89, 222)

HSLhsl(226, 72%, 53%)

CMYKcmyk(78%, 60%, 0%, 13%)

和谐配色

与 #3159DE 搭配的颜色。

色阶

对比度检测

放在一起清晰易读吗？

文字颜色

敏捷的棕色狐狸

预览所选背景上的正文和大号文字。

对比度

5.81:1

通过 · AA 正文通过 · AA 大号未通过 · AAA 正文通过 · AAA 大号

WCAG 2.2 对比度标准

已保存的色板

仅存储在此浏览器中。

保存常用的品牌、界面或项目颜色，以便在此设备上快速使用。

使用方法

一种颜色，所有实用的表示方式。

选择适合你工作方式的格式。每次转换都从当前颜色重新计算，因此各项控件始终可预期、保持同步。

01
选择或输入颜色
使用可视化取色器、输入 HEX 值，或单独编辑 RGB、HSL、CMYK 的各个通道。
02
使用各种格式
所有颜色模型保持同步，可直接复制到 CSS、设计软件、文档或品牌规范中。
03
检查并导出
测试前景色对比度，探索和谐配色与色阶，保存色板，或将配色导出为 CSS 变量。

为设计决策而打造

颜色转换、无障碍检查和配色，一站完成。

四种格式同步

在 HEX、RGB、HSL 和 CMYK 之间自然切换，无需重复输入同一颜色，也不依赖四舍五入后的中间值。

WCAG 2.2 对比度检查

测量精确的对比度，并查看正文和大号文字相对于第二种颜色的 AA 与 AAA 结果。

可直接用于 CSS 的配色

探索互补色、类似色和三角配色，生成色阶，在本地保存色板，并导出 CSS 变量。

颜色常见问题

弄清每个数值的含义。

如何把 HEX 转换为 RGB？+

输入三位或六位的 HEX 颜色值。红、绿、蓝通道的数值会立即更新，HSL 和 CMYK 也会同步更新。

RGB 和 CMYK 有什么区别？+

RGB 将发出的红、绿、蓝光混合，用于屏幕显示。CMYK 估算青、品红、黄、黑四种油墨的百分比，用于印刷流程。实际印刷效果仍取决于打印机和色彩配置文件。

WCAG 要求的对比度是多少？+

WCAG 2.2 的 AA 级要求正文至少 4.5:1，大号文字至少 3:1。AAA 级要求正文 7:1，大号文字 4.5:1。

生成的配色会被保存吗？+

只有你主动保存的色板才会存储在此浏览器中。当前颜色和生成的配色都在本地计算，绝不会上传。

CMYK 数值可以用于专业印刷吗？+

请把它们当作一般的换算参考。专业印刷需要 ICC 色彩配置文件、承印材料、油墨和印刷机设置，仅在浏览器中进行的数学换算无法模拟这些因素。