HEX 转 HSL 转换器

什么是 HEX 颜色代码？

HEX 颜色是一种由六个字符组成的值，使用十六进制表示，格式为 #RRGGBB。每一对字符表示一个颜色通道：红色、绿色或蓝色。

每一对字符的取值范围是 00 到 FF。接近 00 表示该通道几乎不发光，接近 FF 表示强度很高。例如，#000000 表示完全没有红、绿、蓝，而 #FFFFFF 则表示三个通道都处于最大值。

浏览器和设计工具会读取 HEX 颜色，将其拆分为三部分，并在内部转换为十进制的 RGB 值。因此，HEX 本质上是 RGB 在 CSS 和界面设计中的一种紧凑表示方式。

什么是 HSL？

HSL 表示 Hue（色相）、Saturation（饱和度）和 Lightness（亮度）。与分别操作红、绿、蓝通道不同，HSL 通过颜色在色轮中的位置、颜色强度以及明暗程度来描述颜色。

色相 是从 0 到 360 的角度值，用来选择基本颜色类型，如红色、绿色或蓝色。饱和度 以百分比表示，范围为 0% 到 100%，表示颜色的鲜艳程度。饱和度较低时颜色偏灰，较高时颜色更强烈。

亮度 同样以百分比表示，用来描述颜色接近黑色或白色的程度。在 0% 时为黑色，在 100% 时为白色，在 50% 时亮度居中。这三个值组合在一起构成一个 HSL 值，例如 hsl(200, 80%, 50%)。

HEX 转 HSL 的公式

#RRGGBB -> hsl(h, s, l)

1) 将每一对字符转换为十进制：
   RR, GG, BB -> r, g, b 在 [0, 255] 范围内
2) 归一化到 [0, 1] 范围：
   r' = r / 255, g' = g / 255, b' = b / 255
3) 找出 r', g', b' 的最大值和最小值：
   max = max(r', g', b')
   min = min(r', g', b')
   delta = max - min
4) 计算亮度：
   l = (max + min) / 2
5) 计算饱和度：
   如果 delta == 0 则 s = 0
   否则 s = delta / (1 - |2 * l - 1|)
6) 计算色相：
   如果 delta == 0 则 h = 0
   否则如果 max == r' 则 h = 60 * (((g' - b') / delta) mod 6)
   否则如果 max == g' 则 h = 60 * (((b' - r') / delta) + 2)
   否则如果 max == b' 则 h = 60 * (((r' - g') / delta) + 4)
7) 将 h 转换为 [0, 360)，s 和 l 转换为百分比：
   H = h
   S = s * 100
   L = l * 100

该转换基于标准的 RGB 转 HSL 算法。在将 HEX 解码为 RGB 分量之后，应用该算法即可得到对应的 HSL 值，用更适合主题和调整的形式描述同一种颜色。

#4FA3C2 的示例

1) HEX 转 RGB：
   #4FA3C2 -> (79, 163, 194)
2) 归一化：
   r' = 79 / 255
   g' = 163 / 255
   b' = 194 / 255
3) 计算 max、min、delta，然后计算 h、s、l
4) 最终 HSL（四舍五入）：
   hsl(196, 47%, 54%)

HEX 转 HSL 的分步过程

HEX 转 HSL 的过程始终会经过 RGB 颜色模型。首先将 HEX 拆分为红、绿、蓝三个值，然后再将这些值转换为色相、饱和度和亮度。

#1A2B3C
拆分为 [1A, 2B, 3C]
-> rgb(26, 43, 60)
-> hsl(h, s, l)

下面以颜色 #1A2B3C 为例，详细说明这一过程。

• 步骤 1：拆分 HEX 值

  [1A] [2B] [3C]

• 步骤 2：将每一对字符转换为十进制

  每两个字符都是一个十六进制数。将其转换为十进制后，得到范围在 0 到 255 之间的 RGB 通道值。

  1A = (1 * 16) + 10 = 26
  2B = (2 * 16) + 11 = 43
  3C = (3 * 16) + 12 = 60

• 步骤 3：将 RGB 转换为 HSL

  将 RGB 值归一化到 0 到 1 的范围，计算最大值和最小值，然后使用 HSL 公式计算色相、饱和度和亮度。

  hsl(210, 39%, 17%)

这一流程适用于所有有效的 HEX 颜色：先将 HEX 解码为 RGB，再执行 RGB 到 HSL 的转换。

什么时候使用 HEX，什么时候使用 HSL

在 CSS 中，HEX 和 HSL 都是合法的颜色表示方式。选择哪一种，取决于你更看重紧凑的颜色标识，还是对色相、饱和度和亮度的直观控制。

适合使用 HEX 的情况

• 简短且常见的表示方式: HEX 值紧凑，在设计工具、文档和样式指南中被广泛使用。
• 适用于静态配色: 适合很少变化、不需要动态调整的设计令牌和品牌颜色。
• 方便复制和共享: 像 #4FA3C2 这样的单一字符串，便于在不同工具和团队之间传递。

更适合使用 HSL 的情况

• 构建主题: 通过只调整亮度，就可以基于同一色相生成浅色和深色变体。
• 可控的饱和度: 通过调整一个百分比值，就能改变颜色强度，而不必操作三个 RGB 通道。
• 修改更直观: 只改动色相、饱和度或亮度时，更容易看出颜色发生了什么变化。

总结

当需要简短、稳定的颜色标识时使用 HEX；当需要可预测的调整、主题支持和颜色系统时选择 HSL。两种格式描述的是同一种视觉颜色，可以相互转换。

在 CSS 中使用 HSL 的实践建议

CSS 支持多种颜色表示方式。HSL 在构建设计系统、深色模式或需要在组件之间扩展的语义化颜色令牌时尤为实用。

用于可主题化的配色

• 共享色相，调整亮度: 为品牌颜色固定色相和饱和度，通过调整亮度来生成悬停、激活和禁用状态。
• 对齐浅色与深色主题: 在浅色和深色背景中使用相同的色相，只调整亮度范围，以保持配色一致。

根据需要与其他格式配合使用

• HSL 加透明度: 需要透明度时，可以使用 hsla()，或使用新的空格分隔语法，例如 hsl(200 80% 50% / 0.5)。
• 与 HEX 和 RGB 配合: 可以将品牌颜色以 HEX 保存，在需要动态计算颜色时再在代码中转换为 HSL。

需要避免的常见问题

• 随意混用表示方式: 为设计系统选择一种主要格式，只有在有明确理由时才进行转换。
• 忽略对比度: 调整亮度时，应始终检查文本和关键界面元素的对比度，以保证可读性。
• 只依赖亮度制造层次: 在调整亮度的同时，适当改变饱和度，避免界面显得过于平坦。

遵循这些做法，有助于构建可预测、易维护的颜色系统，从简单组件扩展到复杂界面。

HEX 转 HSL 对照表

下表列出了常见的 HEX 颜色及其对应的 HSL 值，涵盖基础原色、中性色以及界面中常见的一些颜色。

这些数值经过四舍五入以便阅读。在实际使用中，可以依赖本页面的转换器，为任意有效的 HEX 颜色计算精确的 HSL 值。

常见问题：HEX 转 HSL

• 为什么要将 HEX 转换为 HSL？

  HEX 适合存储和共享固定颜色，而 HSL 更适合调整亮度和饱和度、构建主题以及生成相关的颜色层级。

• H、S 和 L 的取值范围是多少？

  色相以 0 到 360 的角度表示，饱和度和亮度以 0% 到 100% 的百分比表示。CSS 中常见的写法是 hsl(h, s%, l%)。

• HSL 支持透明度吗？

  支持。可以使用 hsla(h, s%, l%, a)，或使用较新的语法 hsl(h s% l% / a)，其中 alpha 值介于 0（完全透明）到 1（完全不透明）之间。

• HSL 是否比 HEX 更精确？

  两种格式描述的是相同的颜色，区别在于表达方式。由于三个数值分别对应色相、强度和亮度，HSL 通常更便于手动调整。

• 可以在同一个项目中混用 HEX、RGB 和 HSL 吗？

  可以。很多项目会选择一种格式作为基础，在需要时再进行转换。关键在于在设计系统内部保持一致，并使用转换工具避免手动错误。

相关转换器：

• HEX 转 RGB 转换器

  即时计算 hex 转 rgb

• HEX 转 HSV 转换器

  即时计算 hex 转 hsv

• RGB 转 HEX 转换器

  即时计算 rgb 转 hex

• RGB 转 HSL 转换器

  即时计算 rgb 转 hsl

• RGB 转 HSV 转换器

  即时计算 rgb 转 hsv

• HSL 转 RGB 转换器

  即时计算 hsl 转 rgb