404 Not Found

404 Not Found


nginx

颜色转换器

支持 HEX、RGB、HSL、CMYK 自动识别与互转,内置色盘取色、色阶生成、配色方案、WCAG 对比度检测。所有处理均在浏览器本地完成,数据不上传服务器。

HEX #3b82f6 📋 复制
RGB rgb(59, 130, 246) 📋 复制
HSL hsl(217, 91%, 60%) 📋 复制
CMYK cmyk(76%, 47%, 0%, 4%) 📋 复制

🖌 色盘取色

217
91
60

🌈 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+ 个颜色名称,如 rebeccapurplecoral

常见使用场景

  • 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 命名色。转换后的各格式值单击即可复制到剪贴板。