颜色转换
HEX/RGB/HSL/HSV/HWB 颜色互转,支持 alpha 透明度、通道滑块、互补/类比/三元配色、明暗色阶与 WCAG 对比度检测,纯前端不上传。
纯前端处理,数据不上传
#4f46e5
配色方案
基于当前色相生成,点击任意色块复制其 HEX。
互补色
类比色
三元色
四元色
明暗色阶
从浅到深的 50–900 阶,适合搭建主题色板,点击复制。
对比度检测(WCAG)
前景文字
背景
Aa 大字示例正文示例 The quick brown fox
工具介绍
在前端开发和视觉设计中,同一种颜色常常要在不同表示之间切换:CSS 里最常见的是 HEX 十六进制(如 #4F46E5),程序里有时用 RGB 三原色,做明暗微调时 HSL/HSV 更直观,而 HWB 则适合往颜色里加白或加黑。手动换算这些格式既容易算错又费时。
本工具提供 HEX(含 8 位 alpha)、RGB/RGBA、HSL/HSLA、HSV、HWB 多格式实时互转:用系统取色器选色,或在任一格式框输入,拖动 R/G/B、H/S/L 与透明度滑块,所有格式和带棋盘格的预览都会即时联动,非法输入会友好提示。
除了换算,工具还内置专业配色能力:基于当前色相一键生成互补色、类比色、三元色、四元色等和谐配色,以及 50–900 的明暗色阶,点击任意色块即可复制 HEX。对比度检测面板按 WCAG 标准计算前景与背景的对比度比值,标注是否通过 AA/AAA(正文与大字),帮你做出无障碍可读的配色。所有计算均在浏览器本地完成,不引第三方库、不上传数据。
使用方法
- 用取色器选色,或在 HEX/RGB/HSL/HSV/HWB 任一格式框中输入颜色值(接受带/不带 # 与 3/6/8 位 hex)。
- 拖动 R/G/B、H/S/L 与 A(透明度)滑块即时联动所有格式与预览;非法输入会红色提示。
- 点击每个格式右侧「复制」复制对应颜色代码;含 alpha 时自动输出 8 位 HEX、rgba、hsla。
- 在「配色方案」与「明暗色阶」中点击任意色块即可复制其 HEX,快速搭建主题色板。
- 在「对比度检测」中填入前景与背景色,查看 WCAG 比值及是否通过 AA/AAA(正文/大字)。
常见问题
- HEX、RGB、HSL、HSV、HWB 有什么区别?
- HEX 是十六进制写法(如 #4F46E5),最常用于网页;RGB 用红绿蓝 0~255 分量;HSL 用色相/饱和度/亮度,便于微调明暗;HSV 用色相/饱和度/明度,常见于取色器;HWB 用色相/白度/黑度,适合直观地往颜色里加白或加黑。它们描述同一种颜色,可互相换算。
- 如何表示透明度 alpha?
- 拖动 A 滑块或直接输入即可。带透明度时,工具会输出 8 位 HEX(#RRGGBBAA)、rgba() 与 hsla();预览色块下方有棋盘格,方便观察半透明效果。
- 配色方案里的互补色、类比色、三元色怎么用?
- 它们基于当前颜色的色相按几何角度旋转生成:互补色(对角 180°)对比强烈;类比色(±30°)柔和协调;三元色(120° 等分)、四元色平衡鲜明。配合明暗色阶(50–900)可快速得到一套主题色板,点击色块即复制。
- WCAG 对比度检测是做什么的?
- 它按 WCAG 标准计算前景文字与背景的相对亮度对比度比值,并标注是否通过 AA(正文≥4.5、大字≥3)与 AAA(正文≥7、大字≥4.5)。前端和设计可据此判断文字是否清晰易读、满足无障碍要求。
- 数据会上传吗?
- 不会。所有颜色换算、配色生成与对比度计算都用本地纯函数实现,不引第三方库、不发任何网络请求,可放心使用。