HEX、RGB、HSL、HSV 颜色值互转
颜色转换是在不同颜色表示模型(HEX、RGB、HSL、HSV)之间互相转换的过程。不同的开发场景和设计工具使用不同的颜色格式,开发者经常需要在它们之间快速切换。
| 模型 | 示例 | 适用场景 |
|---|---|---|
| HEX | #FF5733 |
CSS、设计规范 |
| RGB | rgb(255, 87, 51) |
编程、图像处理 |
| HSL | hsl(11, 100%, 60%) |
动态调色、主题系统 |
| HSV | H:11° S:80% V:100% | Photoshop 拾色器 |
HSL 调色技巧:固定色相 H,调整 L 可得到同色系的深/浅变体:hsl(220,90%,56%) 主色 → hsl(220,90%,85%) 浅色背景 → hsl(220,90%,35%) 深色强调
HSL vs HSV:HSL 的 L=100% 是白色;HSV 的 V=100% 是最亮纯色。
#FF5733 或 rgb(255,87,51))3 位简写(如 #F53)是每位重复的缩写,等价于 #FF5533。在精确度要求高的场景建议使用 6 位写法。
HSL 更符合人类对颜色的直觉认知——色相、饱和度、亮度可以独立调整。动态主题切换时只需修改 H 值即可改变整套配色。
标准 8-bit RGB 范围是 0-255。超过此范围在某些 HDR 场景有意义,但 CSS 和常规 Web 开发中会被裁剪到 0-255。