HSL 到 HSV 转换器

什么是 HSL

HSL 代表 色相、饱和度 和 明度。它用接近人们在设计工作中谈论颜色的方式来描述颜色。

色相在色轮上选择一个位置，范围从 0 到 360 度。饱和度和明度是从 0% 到 100% 的百分比。在 0% 饱和度时，颜色变为灰色，而在 0% 或 100% 明度时，颜色会变为黑色或白色。

得益于这种结构，HSL 方便用于构建音调尺度、主题和语义调色板。你可以在相关颜色之间保持色相不变，并使用饱和度和明度来表达深度、状态和强调。

什么是 HSV

HSV 代表 色相、饱和度 和 数值。与 HSL 一样，它使用色相角，但它关注的是数值，这与颜色相对于黑色的亮度更直接相关。

HSV 中的色相以度数从 0 到 360 测量。饱和度和数值是从 0% 到 100% 的百分比。低饱和度使颜色趋向于灰色，而低数值使颜色看起来更暗，更接近黑色。

HSV 常见于颜色选择器、绘画工具和用户调整颜色强度和亮度的界面。在探索基础颜色的变化时，它通常比原始 RGB 通道更直观。

HSL 到 HSV 转换公式

hsl(h, s_l, l) -> hsv(h, s_v, v)

给定：
  h 在 [0, 360) 范围内
  s_l 在 [0, 100] 范围内  // HSL 饱和度
  l   在 [0, 100] 范围内  // 亮度

1) 归一化 HSL 值：
   s_l' = s_l / 100
   l'   = l / 100

2) 转换为 RGB（中间表示）：
   a) 计算色度：
      c = (1 - |2 * l' - 1|) * s_l'
   b) 辅助值：
      x = c * (1 - |((h / 60) mod 2) - 1|)
   c) 基于色相区段的临时三元组：
      如果    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)
   d) 添加偏移：
      m  = l' - c / 2
      r' = r1 + m
      g' = g1 + m
      b' = b1 + m

3) 将 RGB 转换为 HSV：
   a) 找到 max 和 min：
      max = max(r', g', b')
      min = min(r', g', b')
      delta = max - min
   b) 数值：
      v = max
   c) HSV 饱和度：
      如果 max == 0 则 s_v' = 0
      否则 s_v' = delta / max

4) 转换为最终单位：
   H = h
   S_v = s_v' * 100
   V   = v * 100

在许多工作流程中，转换器根本不改变色相。它将饱和度和明度解释为 HSL 参数，暂时计算出 RGB 颜色，然后根据 HSV 规则推导出饱和度和数值。

hsl(196, 47%, 54%) 的示例
1) 归一化并计算 HSL 的色度
2) 推导中间 RGB 颜色
3) 计算 HSV 的 max、min、delta 和 v
4) 最终 HSV（四舍五入）可能如下所示：
   hsv(196, 59%, 76%)

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

在后台，从 HSL 转换到 HSV 主要是关于改变你描述同一颜色的方式。你保持色相为度数，但重新解释其他两个值，以便它们匹配基于数值的模型，而不是基于明度的模型。

hsl(210, 39%, 17%)
-> rgb(r, g, b)
-> hsv(h, s, v)

以下是 hsl(210, 39%, 17%) 的过程草图。

• 步骤 1 — 将 HSL 解释为 RGB 颜色

  使用常见的 HSL 到 RGB 公式将 HSL 转换为中间 RGB 三元组。在这个阶段，你仍然表示完全相同的颜色，但现在是以三个数值通道的形式。

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

• 步骤 2 — 从 RGB 推导 HSV

  计算最大和最小通道值，然后使用它们之间的差值来计算 HSV 术语中的数值和饱和度。色相角从原始 HSL 值中重用。

  max = max(r', g', b')
  min = min(r', g', b')
  delta = max - min
  v = max
  if max == 0 then s_v = 0 else s_v = delta / max

• 步骤 3 — 将结果表示为 hsv(h, s, v)

  最后，将饱和度和数值缩放为百分比。生成的 HSV 三元组描述的视觉颜色与起始 HSL 值完全相同，只是格式不同。

  hsv(210, 57%, 24%)

一旦你理解了这个流程，你就可以自信地使用转换工具或库助手在 HSL 和 HSV 之间移动，而无需手动重复数学运算。

何时使用 HSL，何时使用 HSV

HSL 和 HSV 是两种相关的方式来组织相同的颜色空间。它们共享色相和饱和度的概念，但对第三个值的定义不同。

HSL 的优势

• 主题和调色板设计: 明度在从单一色相构建色调和阴影集合时提供可预测的控制。
• 可读的规格: 像 hsl(210, 40%, 20%) 这样的值在设计文档和代码审查中易于解释。
• 对齐明暗模式: 在保持色相稳定的同时改变明度范围，有助于保持主题的视觉一致性。

HSV 更适合的地方

• 交互式颜色选择器: 色相、饱和度和数值的滑块直接映射到许多工具让用户探索颜色的方式。
• 微调亮度和强度: 在某些绘画和 3D 工作流程中，数值可能比明度更自然。
• 与现有工具协作: 许多图形和 UI 库将 HSV 作为其主要颜色调整模型。

总结

在设计和考虑颜色系统时使用 HSL。在与直接操控数值和饱和度的工具、选择器或 API 集成时使用 HSV。

同时使用 HSL 和 HSV 的实用技巧

在许多项目中，你不需要只选择一个模型。完全可以在 HSL 中规划颜色，然后在特定工具需要时将其转换为 HSV。

定义清晰的工作流程

• 将 HSL 保留为设计标记: 将品牌颜色和语义角色存储为易于阅读和调整的 HSL 值。
• 在集成点转换为 HSV: 仅在选择器或引擎期望 HSV 的地方执行转换，而不是在整个代码库中。

在需要时与其他格式结合

• 使用 RGB 或 HEX 进行最终存储: 在 HSL 或 HSV 中调整颜色后，可以将最终值冻结为 CSS 中的 RGB 三元组或 HEX 字符串。
• 将 alpha 作为单独的关注点处理: 基础颜色通常在没有透明度的情况下效果最佳；仅在覆盖、阴影或焦点状态下添加 alpha。

注意常见陷阱

• 在没有计划的情况下混合多种模型: 决定 HSL、HSV、RGB 和 HEX 的使用位置，以便未来的更改保持可管理。
• 仅依赖一个滑块来调整深度: 更好的调色板通常会同时调整饱和度和第三个值（明度或数值），而不是仅改变一个。
• 忘记可访问性: 在 HSL 和 HSV 之间切换时，注意文本和关键 UI 元素的对比度。

通过一致的策略，你可以在不混淆的情况下结合使用 HSL 和 HSV，并保持你的颜色系统可预测且易于维护。

HSL 到 HSV 转换表

下面的表列出了几种熟悉的颜色及其匹配的 HSL 和 HSV 值。数字经过四舍五入以提高可读性，因此请使用页面顶部的转换器进行精确工作。

对于任何其他 HSL 颜色，你可以使用页面顶部的转换器计算匹配的 HSV 值，使用标准算法。

常见问题：HSL 到 HSV

• 为什么要将 HSL 转换为 HSV

  一些工具和库暴露 HSV 滑块或 API，而你的设计系统可能更喜欢 HSL。转换让你在每个阶段使用更舒适的模型，而不会失去一致性。

• HSL 和 HSV 描述不同的颜色空间吗

  不。两种模型都是相同基础 RGB 颜色空间的不同坐标系统。区别在于它们如何定义第三个轴，而不是它们可以表示哪些颜色。

• 转换时色相会改变吗

  在典型的转换中，色相角是保留的。改变的是饱和度和第三个值，它们是从基于明度的参数重新解释为基于数值的参数。

• 我可以在不损失的情况下从 HSV 返回到 HSL 吗

  可以。只要你保持在有效范围内，通过 RGB 在 HSL 和 HSV 之间移动是可逆的，直到舍入差异。视觉颜色保持不变。

• 一个模型是否比另一个更好

  没有哪个模型是严格更好的。HSL 通常适用于设计标记和文档，而 HSV 适合交互式颜色选择器和某些图形工作流程。在一个项目中使用这两者并制定清晰的转换规则是正常的。

相关转换器：

• HEX 转 RGB 转换器

  即时计算 hex 转 rgb

• HEX 转 HSL 转换器

  即时计算 hex 转 hsl

• HEX 转 HSV 转换器

  即时计算 hex 转 hsv

• RGB 转 HSL 转换器

  即时计算 rgb 转 hsl

• RGB 转 HSV 转换器

  即时计算 rgb 转 hsv

• HSV 转 HSL 转换器

  即时计算 hsv 转 hsl