> 转换 | 预览 | 选择 <
// 在HEX、RGB、HSL、HSV和CMYK之间转换
颜色预览
实时颜色预览即时更新。
任意格式输入
所有格式自动更新。
5种颜色格式
HEX, RGB, HSL, HSV/HSB, CMYK转换。
// 关于颜色格式
颜色模型:
加色RGB用于屏幕，减色CMYK用于印刷，HEX为紧凑RGB表示，HSL/HSV用于色相饱和度。
示例:
#FF5733 → rgb(255, 87, 51) → hsl(11, 100%, 60%)
常见用途:
- >Web开发: CSS颜色
- >印刷: RGB转CMYK
- >UI设计: HSL调整
- >品牌: 一致颜色
- >可访问性: 对比度
>> 常见问题
Q: HEX vs RGB?
HEX and RGB represent the same color model in different notations. HEX uses hexadecimal (#FF5733) while RGB uses decimal (rgb(255, 87, 51)).
Q: HSL?
HSL = Hue, Saturation, Lightness. More intuitive for humans. CSS supports hsl() natively.
Q: CMYK?
CMYK is for print. Not all RGB colors can be reproduced in CMYK.
Q: CSS color formats?
Modern browsers support HEX, RGB, HSL, named colors, hwb(), lab(), lch(), oklch().
Q: Accessibility?
Color format does not directly affect accessibility. WCAG 2.1 requires 4.5:1 minimum contrast for normal text.
// 常用颜色的 HEX、RGB、HSL
| HEX | RGB | HSL |
|---|---|---|
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
// CSS 颜色写法与换算
color: #ff8000; color: #f80; /* shorthand for #ff8800 */ color: #ff800080; /* 8 digits: last two = alpha */ color: rgb(255 128 0); color: rgb(255 128 0 / 50%); color: hsl(30 100% 50%); #FF8000 -> FF=255 80=128 00=0 -> rgb(255, 128, 0)
>> 更多问题
问：如何手动把 HEX 转成 RGB？
答：把代码按两位分组，每组从十六进制转为十进制：#FF8000 → FF = 255，80 = 128，00 = 0，即 rgb(255, 128, 0)。
问：简写（#F80）和 8 位 HEX 是什么意思？
答：#F80 是 #FF8800 的简写（每位重复一次）。8 位（#RRGGBBAA）时，最后两位是 Alpha 通道，即不透明度。
问：为什么印刷和屏幕上的颜色不一样？
答：屏幕以加色法（RGB）混合光线，色域更广；印刷以减色法（CMYK）混合油墨。鲜艳的绿色、蓝色和荧光色往往只能近似印刷，建议用打样确认。