颜色工具箱

工具简介

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

功能说明

颜色转换：支持 HEX、RGB、HSL、HSV、CMYK 五种格式互转，一键复制各格式数值。

智能配色：提供6种配色方案：互补色、三角色、四角色、类似色、分裂互补色、单色。

对比度检测：实时检测当前颜色与黑白文字的对比度，显示 WCAG AA/AAA 合规等级。

导出功能：支持导出 CSS 变量、Tailwind 配置、JSON 三种格式。

使用方法

输入颜色：在输入框输入 HEX、RGB 或 HSL 格式的颜色值，或直接点击色块选择。

查看格式：下方自动显示该颜色的各种格式数值，点击即可复制。

生成配色：在配色方案区域选择类型，查看生成的配色组合。

检测对比度：在右侧查看与黑白文字的对比度检测结果。

导出配置：点击导出按钮，选择需要的格式进行下载或复制。

隐私说明

所有颜色处理都在浏览器中完成，历史记录保存在本地浏览器，不会上传到服务器。

常见问题

支持哪些颜色格式？ 支持 HEX（#3B82F6）、RGB（rgb(59,130,246)）、HSL（hsl(217,91%,60%)）三种输入格式。

WCAG AA 和 AAA 是什么意思？ WCAG 是无障碍网页内容指南。AA 要求对比度至少 4.5:1，AAA 要求 7:1。普通文字建议达到 AA，小文字建议达到 AAA。

配色方案如何使用？ 点击配色卡片中的任意颜色可将其设为主色，点击 HEX 值可复制色值。

导出的 Tailwind 配置怎么用？ 复制代码到 tailwind.config.js 的 colors 配置中，即可在 className 中使用如 text-primary-500 这样的类名。

为什么选择这个工具？