颜色转换器
支持 HEX、RGB、HSL、CMYK 自动识别与互转,内置色盘取色、色阶生成、配色方案、WCAG 对比度检测。所有处理均在浏览器本地完成,数据不上传服务器。
🖌 色盘取色
🌈 Tints & Shades
🎨 配色方案
📜 最近使用
⭐ 收藏调色板
暂无收藏,点击 ❤ 收藏当前颜色
♿ WCAG 对比度检测
选择背景色与前景色,检测是否符合 WCAG 无障碍标准
什么是颜色转换器?
颜色转换器 是一款在线工具,帮助开发者在不同的颜色格式之间自由转换。Web 开发中最常用的颜色格式包括 HEX(十六进制)、RGB(红绿蓝)、HSL(色相饱和度明度)和 CMYK(青品黄黑印刷色)。本工具支持自动识别输入格式并同时输出全部四种格式,大幅提升配色效率。
颜色格式说明
- HEX — 十六进制颜色码,以
#开头,如#ff6600。CSS 中最常用的颜色格式。 - RGB — 红绿蓝三原色表示法,如
rgb(255, 102, 0)。每个分量范围 0~255。 - HSL — 色相(Hue 0~360°)、饱和度(Saturation 0~100%)、明度(Lightness 0~100%)。最符合人类直觉的颜色模型。
- CMYK — 青色(Cyan)、品红(Magenta)、黄色(Yellow)、黑色(Key)。印刷行业标准格式。
- CSS 命名色 — W3C 定义的 140+ 个颜色名称,如
rebeccapurple、coral。
常见使用场景
- UI 设计 — 设计师给 HEX 值,开发需要 HSL 来调整明暗
- 按钮状态 — 用 Tints & Shades 生成 hover/active 状态的色阶
- 品牌配色 — 用配色方案生成互补色/三角色等搭配
- 无障碍检测 — 用 WCAG 对比度检测确保文字可读性
- CSS 渐变色 — 调色板收藏为后续渐变色生成做准备
WCAG 对比度标准
- AA 标准 — 普通文本 ≥ 4.5:1,大文本 ≥ 3:1
- AAA 标准 — 普通文本 ≥ 7:1,大文本 ≥ 4.5:1
提示:在色盘上拖拽取色,或直接输入颜色值。输入框支持自动识别 HEX、RGB、HSL、CMYK 和 CSS 命名色。转换后的各格式值单击即可复制到剪贴板。