为什么需要在线颜色转换
写 CSS、对接设计稿或调主题色时，经常会遇到这些问题：
- 设计给的是
#3B82F6，组件库要rgb(59, 130, 246) - 想只调亮一点，直接改 RGB 不直观，用 HSL 改亮度更方便
- 按钮文字颜色不确定是否满足无障碍对比度
颜色转换器 在同一页面联动 HEX、RGB、HSL、HSV、CMYK，并显示 WCAG 对比度与色板，全部在浏览器本地计算。
支持哪些格式
| 格式 | 典型写法 | 常见用途 |
|---|---|---|
| HEX | #3b82f6 |
CSS、Figma 复制 |
| RGB / RGBA | rgb(59, 130, 246) |
透明度、Canvas |
| HSL | hsl(217, 91%, 60%) |
调亮度/饱和度 |
| HSV | hsv(217, 76%, 96%) |
与部分设计工具一致 |
| CMYK | 印刷近似 | 交付印刷前参考 |
「智能识别」框可粘贴 tomato、#fff、rgba(0,0,0,0.5) 等，回车后自动解析。
典型流程
- 从设计稿复制 HEX，粘贴到 颜色转换器。
- 复制
rgb()或hsl()写入style或 Tailwind 自定义变量。 - 查看「白底/黑底」对比度，正文建议 AA ≥ 4.5:1。
- 点击色板中的深浅色快速做 hover 色。
与开发工具的配合
| 需求 | 工具 |
|---|---|
| 整页主题色批量试 | 颜色转换器 + 浏览器 DevTools |
| JWT / 接口调试 | JWT 解码 |
| URL 里的颜色参数 | URL 参数格式化 |
常见问题
HEX 三位和六位？
#RGB 会展开为 #RRGGBB，本工具均支持。
8 位 HEX？
#RRGGBBAA 最后两位为透明度，可在 RGB 区的 Alpha 查看。
取色器灰色不可用？
需 Chrome/Edge 等支持 EyeDropper API 的浏览器；否则用原生 <input type="color"> 即可。
隐私说明
色值不上传服务器，适合在内网或客户配色方案下使用。