颜色转换

什么是颜色转换

颜色转换是在不同颜色表示模型（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% 是最亮纯色。

常见使用场景

• 前端开发：设计稿给的 HEX 色值需要转成 RGB 用于 Canvas 或动画计算
• 主题系统开发：用 HSL 模型批量生成同色系的明暗变体
• 设计还原：从 Photoshop（HSV）导出颜色到 CSS（HEX/HSL）
• 无障碍检查：通过调整 HSL 的 L 值确保文字与背景的对比度达标

使用方法

1. 在任一颜色格式的输入框中输入色值（如 #FF5733 或 rgb(255,87,51)）
2. 工具实时计算并显示所有其他格式的等价值
3. 使用颜色选择器可视化微调，所有格式同步更新

常见问题

HEX 的 3 位简写和 6 位写法有什么区别？

3 位简写（如 #F53）是每位重复的缩写，等价于 #FF5533。在精确度要求高的场景建议使用 6 位写法。

为什么 CSS 推荐使用 HSL 而不是 HEX？

HSL 更符合人类对颜色的直觉认知——色相、饱和度、亮度可以独立调整。动态主题切换时只需修改 H 值即可改变整套配色。

RGB 值可以超过 255 吗？

标准 8-bit RGB 范围是 0-255。超过此范围在某些 HDR 场景有意义，但 CSS 和常规 Web 开发中会被裁剪到 0-255。