HSL 到 HEX 转换器

什么是 HSL

HSL 代表 色相、饱和度 和 亮度。它通过颜色轮上的基本家族、颜色的强度以及颜色是更暗还是更亮来描述颜色。

色相以 0 到 360 的度数来衡量。饱和度和亮度是从 0% 到 100% 的百分比。当饱和度较低时，颜色趋向于灰色。当亮度接近 0% 时，颜色几乎是黑色，接近 100% 时，它几乎变成白色。

由于这三个值直接映射到设计师谈论颜色的方式，因此 HSL 适合构建主题、色调范围和语义调色板，在这些地方您希望在同一品牌颜色的不同状态之间实现可预测的变化。

什么是 HEX 颜色代码

HEX 值是使用十六进制数字系统编写 RGB 颜色的一种紧凑方式。标准形式为 #RRGGBB，其中每对字符表示红色、绿色和蓝色通道。

每对的范围从 00 到 FF。00 表示该通道几乎不添加光，而 FF 表示该通道处于全强度。例如，#000000 是黑色，#FFFFFF 是白色，#FFA500 是明亮的橙色。

浏览器和设计工具解析 HEX 字符串，将其拆分为三个组，将每组转换为十进制数字，然后将结果作为 RGB 使用。因此，HEX 只是 RGB 模型的一个简短且可读的包装，适合在 CSS、标记和共享调色板中使用。

HSL 到 HEX 公式

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

给定：
  h 在 [0, 360) 范围内
  s 在 [0, 100] 范围内
  l 在 [0, 100] 范围内

1) 将 HSL 转换为 RGB：
   a) 归一化饱和度和亮度：
      s' = s / 100
      l' = l / 100
   b) 计算色度：
      c = (1 - |2 * l' - 1|) * s'
   c) 找到辅助值：
      x = c * (1 - |((h / 60) mod 2) - 1|)
   d) 选择临时三元组：
      如果    0 <= h < 60   则 (r1, g1, b1) = (c, x, 0)
      否则如果 60 <= h < 120 则 (r1, g1, b1) = (x, c, 0)
      否则如果 120 <= h < 180 则 (r1, g1, b1) = (0, c, x)
      否则如果 180 <= h < 240 则 (r1, g1, b1) = (0, x, c)
      否则如果 240 <= h < 300 则 (r1, g1, b1) = (x, 0, c)
      否则                        (r1, g1, b1) = (c, 0, x)
   e) 添加偏移并缩放：
      m  = l' - c / 2
      r' = r1 + m
      g' = g1 + m
      b' = b1 + m
      r  = round(r' * 255)
      g  = round(g' * 255)
      b  = round(b' * 255)

2) 将 RGB 转换为 HEX：
   RR = dec_to_hex(r)
   GG = dec_to_hex(g)
   BB = dec_to_hex(b)

   dec_to_hex(x) = to_hex(x).padStart(2, "0")

3) 连接部分：
   #RRGGBB

在实践中，转换器首先构建 HSL 颜色的 RGB 表示，然后将每个 RGB 通道重写为一对十六进制数字。视觉颜色保持不变；仅表示法从 HSL 更改为 HEX。

hsl(196, 47%, 54%) 的示例
1) 使用上述算法将 HSL 转换为 RGB
2) 假设四舍五入后的 RGB 结果为：
   rgb(79, 163, 194)
3) 将每个通道转换为 HEX：
   79  -> 4F
   163 -> A3
   194 -> C2
4) 最终 HEX：
   #4FA3C2

HSL 到 HEX 转换的逐步工作原理

尽管 HSL 到 HEX 的公式分为几个阶段，但它始终遵循相同的模式。您定义所需的色相、饱和度和亮度，将它们转换为 RGB，然后将 RGB 转换为 HEX。

hsl(210, 39%, 17%)
-> rgb(r, g, b)
-> #RRGGBB

以下是对 hsl(210, 39%, 17%) 的步骤的详细介绍。

• 步骤 1 — 从 HSL 计算 RGB 通道

  标准化饱和度和亮度，计算色度和辅助值，找到色相区间，并构建一个临时三元组。然后添加偏移量并将每个通道缩放到 0 到 255 的范围。

  h = 210, s = 39, l = 17
  rgb(26, 43, 60) 四舍五入后

• 步骤 2 — 将 RGB 通道转换为 HEX 对

  将每个通道转换为十六进制，如果它只有一位数字，则在前面填充零。这确保最终的 HEX 代码在 # 符号后始终具有确切的六个字符。

  26 -> 1A
  43 -> 2B
  60 -> 3C

• 步骤 3 — 将各部分连接成最终的 HEX 代码

  将三个对连接在一起，并在前面加上 #。结果是原始 HSL 颜色的 HEX 版本。

  #1A2B3C

相同的工作流程适用于任何有效的 HSL 输入，这就是为什么依赖转换器或工具函数而不是手动重复数学计算是方便的。

选择 HSL 和 HEX

HSL 和 HEX 在前端工作中都很常见，但它们解决的问题略有不同。HSL 强调颜色之间的关系，而 HEX 紧凑且易于复制。

何时 HSL 更实用

• 设计和迭代调色板: 保持色相不变，调整饱和度和亮度以构建相关色调的集合。
• 处理主题: HSL 帮助您通过调整亮度范围来协调相同基础颜色的明暗变体。
• 解释设计决策: 像 hsl(210, 40%, 20%) 这样的值在设计审查中比原始 HEX 字符串更容易讨论。

何时 HEX 更合适

• 稳定的设计标记: HEX 字符串简短，适合作为品牌颜色和风格指南中中性色调的最终形式。
• 在工具之间复制: 许多编辑器默认以 HEX 显示和导出颜色，使其易于粘贴到 CSS 或配置文件中。
• 扫描大量颜色列表: 当您维护数十个标记时，HEX 代码在表格或 JSON 文件中易于对齐。

总结

在创建和完善颜色系统时使用 HSL。当您想要代码和文档的紧凑最终表示时，将这些值转换为 HEX。

同时使用 HSL 和 HEX 的最佳实践

实际项目很少坚持单一颜色格式。少量的规划可以帮助您决定 HSL、RGB 和 HEX 各自最合适的地方。

定义一个真实来源

• 为标记选择一种主要格式: 例如，保持主值为 HSL，然后使用转换器从中派生 HEX 或 RGB。
• 避免随机混合格式: 坚持明确的规则使重构和主题更新更容易。

在需要时将 HSL 与其他表示法结合使用

• 使用 HSLA 或 RGBA 表示透明度: 基础颜色可以保持不透明，而覆盖和阴影在需要时获得单独的 alpha 通道。
• 在边界处转换: 仅在您从设计标记跨越到实际实现细节（如 CSS 或画布调用）时，将 HSL 转换为 HEX 或 RGB。

注意常见陷阱

• 忽视对比度和可访问性: 当您调整亮度时，定期检查文本和图标的可读性。
• 过度使用非常饱和的颜色: 高饱和度在大面积上可能令人疲惫；更柔和的变体通常更适合背景。
• 手动重新计算: 优先使用转换器而不是手动计算，以便在主题和断点之间保持颜色一致性。

通过明确的 HSL 和 HEX 规则，您可以保持设计工作灵活，而不牺牲样式表和组件中的一致性。

HSL 到 HEX 转换表

下面的参考表显示了一些知名颜色的 HSL 和 HEX 形式。为了便于您在实验主题和布局时阅读，值已四舍五入。

对于任何其他 HSL 组合，您可以依赖页面顶部的转换器，它使用标准的 HSL 到 RGB 到 HEX 算法来计算精确值。

常见问题：HSL 到 HEX

• 为什么要将 HSL 转换为 HEX

  HSL 适合设计和调整调色板，而 HEX 紧凑且在代码和工具中得到广泛支持。转换使您能够保持灵活的设计工作流程，但仍然交付稳定的 HEX 标记。

• H、S 和 L 使用什么范围

  色相以 0 到 360 的度数表示，饱和度和亮度以 0% 到 100% 的百分比表示。在 CSS 中，这表现为 hsl(h, s%, l%)。

• 转换为 HEX 会改变颜色吗

  不会。HSL、RGB 和 HEX 都指的是相同的颜色空间。只要数学计算正确，HSL 颜色及其 HEX 对应物在屏幕上看起来是相同的。

• 如何表示透明度

  HEX 支持扩展形式 #RRGGBBAA，其中最后两位数字描述 alpha 通道。您还可以使用 hsla() 或 rgba()，并提供单独的 alpha 参数。

• 我可以在一个项目中混合 HSL、HEX 和 RGB 吗

  可以。一个常见的模式是用 HSL 定义调色板，将最终值存储为 HEX 或 RGB 标记，并在工具或实用函数中自动在格式之间转换。

相关转换器：

• HEX 转 RGB 转换器

  即时计算 hex 转 rgb

• HEX 转 HSL 转换器

  即时计算 hex 转 hsl

• HEX 转 HSV 转换器

  即时计算 hex 转 hsv

• RGB 转 HEX 转换器

  即时计算 rgb 转 hex

• RGB 转 HSL 转换器

  即时计算 rgb 转 hsl

• HSL 转 RGB 转换器

  即时计算 hsl 转 rgb