本文目录
颜色格式详解
在数字设计和网页开发中，颜色有多种表示格式，分别适用于不同的场合。HEX（#ff5733）简洁通用，适合网页。RGB（255, 87, 51）直观易懂，便于混合颜色。HSL（14°, 100%, 60%）对调整色相、饱和度和亮度而言最贴近人的直觉。
不同的工具使用不同的颜色格式——设计软件往往偏好 HSL，HTML/CSS 使用 HEX 和 RGB，JavaScript 颜色库可能使用各种格式，而印刷设计则使用 CMYK。要在它们之间准确转换，需要借助数学公式。
颜色转换的原理
转换器在各颜色空间之间应用精确的数学变换。
- HEX 解析——解码 3 位和 6 位十六进制颜色码，可带或不带 Alpha 通道
- RGB 归一化——处理 0-255 的整数值和 0-1 的浮点表示
- HSL 计算——在色相（0-360°）、饱和度（0-100%）和亮度（0-100%）之间相互转换
免费试用 —— 无需注册
转换颜色 →何时使用颜色转换
只要颜色需要在不同工具、格式或场合之间流转，就需要进行颜色转换。
- 从设计到代码——将 Figma/Sketch 的 HSL 颜色值转换为 HEX，以便在 CSS 中实现
- 品牌一致性——核对颜色值在不同设计工具和代码实现之间是否一致
- 无障碍——计算对比度（其基于 RGB 值的相对亮度）以符合 WCAG 标准
常见问题
RGB 和 RGBA 有什么区别？
RGBA 在 RGB 的基础上增加了一个 Alpha 通道，用于表示不透明度，取值从 0（完全透明）到 1（完全不透明），在某些场合也用 0-255 表示。同样，HEXA 会额外增加两位十六进制数字来表示 Alpha（例如 #FF5733FF 表示完全不透明，#FF573380 表示 50% 不透明度）。Alpha 值可实现透明和半透明颜色。
为什么把一种颜色来回转换后不一定得到完全相同的值？
颜色空间转换涉及浮点运算和四舍五入。往返转换（RGB → HSL → RGB）可能在最后一位数字上产生微小的舍入误差。这是正常现象，人眼无法察觉这种差异。对于精度要求极高的工作，应始终以单一的规范格式来存储颜色。
HSL 和 HSV/HSB 有什么区别？
HSL（色相、饱和度、亮度）和 HSV/HSB（色相、饱和度、明度/亮度）是不同的柱状颜色模型。在 HSL 中，无论饱和度如何，纯白都是 L=100%；而在 HSV 中，纯白是 S=0%、V=100%。HSL 对网页设计更直观，HSV 则常用于取色器界面控件。