颜色输入
输入一种颜色代码
示例：#336699CC、rgb(51 102 153 / 80%)、hsl(210 50% 40%)、hwb(210 20% 40%)、cmyk(67%, 33%, 0%, 40%) 或 rebeccapurple。
准备就绪。
网页设计工具
颜色转换器
严格校验并转换 HEX、RGB、RGBA、HSL、HSLA、HSV、HWB、CMYK 和常用颜色名称，提供透明度预览、复制和考虑背景的 WCAG 对比度。
HEX · RGB · HSL · HWB
#336699rgb(51, 102, 153)
转换结果
颜色代码格式
HEX#336699
RGBrgb(51, 102, 153)
RGBArgba(51, 102, 153, 1)
HSLhsl(210, 50%, 40%)
HSLAhsla(210, 50%, 40%, 1)
HSVhsv(210, 66.7%, 60%)
HWBhwb(210 20% 40% / 1)
CMYKcmyk(66.7%, 33.3%, 0%, 40%)
CSS 变量--color: rgba(51, 102, 153, 1);
无障碍
对比度检查
白色背景6.00:1
黑色背景3.50:1
自定义背景6.00:1
相对亮度0.1251
建议文字颜色使用白色文字可获得更强对比度。
计算 WCAG 比率前，会先将透明颜色合成到对应背景上。
颜色代码表
| 颜色 | 名称 | HEX | RGB | HSL |
|---|---|---|---|---|
| 黑色 | #000000 | 0, 0, 0 | 0, 0%, 0% | |
| 白色 | #FFFFFF | 255, 255, 255 | 0, 0%, 100% | |
| 红色 | #FF0000 | 255, 0, 0 | 0, 100%, 50% | |
| 亮绿色 | #00FF00 | 0, 255, 0 | 120, 100%, 50% | |
| 蓝色 | #0000FF | 0, 0, 255 | 240, 100%, 50% | |
| 黄色 | #FFFF00 | 255, 255, 0 | 60, 100%, 50% | |
| 青色 | #00FFFF | 0, 255, 255 | 180, 100%, 50% | |
| 品红 | #FF00FF | 255, 0, 255 | 300, 100%, 50% | |
| 灰色 | #808080 | 128, 128, 128 | 0, 0%, 50% |
颜色转换说明
HEXHEX 支持三、四、六或八位；八位 HEX 的最后两位保存透明度。
RGBRGB 支持传统逗号、现代空格、百分比和斜杠透明度，并严格检查通道范围。
HSL / HSV / HWBHSL、HSV 与 HWB 共用色相角，但分别描述饱和度、明度、亮度、白度和黑度。
CMYKCMYK 是由 RGB 推导的印刷估算；精确印刷需要 ICC 色彩配置文件。
WCAGWCAG 使用相对亮度：普通文字 AA 需要 4.5:1、AAA 需要 7:1，大号文字 AA 需要 3:1。
常用颜色转换
常见问题
支持哪些颜色格式？
支持 HEX、RGB、RGBA、HSL、HSLA、HSV 或 HSB、HWB、CMYK、transparent 和常用 CSS 颜色名称。
可以使用现代 CSS 颜色语法吗？
可以。RGB 和 HSL 支持空格分隔通道与斜杠透明度，也支持百分比 RGB 以及 deg、rad、grad、turn 角度单位。
透明颜色如何计算对比度？
前景色会先合成到白色、黑色或自定义背景上，然后再计算 WCAG 对比度。
CMYK 转换适合精确印刷吗？
不适合精确校色。它是由 RGB 推导的实用估算，实际印刷取决于 ICC 配置、油墨、纸张和印刷流程。