跳转到主内容

颜色工具箱

一个颜色转换与配色工具,支持多种颜色格式互转,提供智能配色方案生成和 WCAG 无障碍对比度检测。适合前端开发、UI 设计师日常使用。

预设颜色

最近使用

智能配色

WCAG 对比度检测

白色文字
黑色文字

导出功能

功能说明

  • 颜色转换:支持 HEX、RGB、HSL、HSV、CMYK 五种格式互转,一键复制各格式数值。
  • 智能配色:提供 6 种配色方案:互补色、三角色、四角色、类似色、分裂互补色、单色。
  • 对比度检测:实时检测当前颜色与黑白文字的对比度,显示 WCAG AA/AAA 合规等级。
  • 导出功能:支持导出 CSS 变量、Tailwind 配置、JSON 三种格式。

使用方法

  1. 输入颜色:在输入框输入 HEX、RGB 或 HSL 格式,或直接点击色块选择。
  2. 查看格式:下方自动显示各种格式数值,点击卡片即可复制。
  3. 生成配色:在智能配色区域选择类型,查看生成的配色组合。
  4. 检测对比度:在右侧查看与黑白文字的对比度检测结果。
  5. 导出配置:点击导出按钮,选择格式后复制内容。