HSV 到 HSL 转换器

什么是 HSV

HSV 代表 色相、饱和度 和 亮度。它通过色轮上的色相角度、色相的强度以及相对于黑色的亮度来描述颜色。

色相范围从 0 到 360 度。饱和度和亮度是从 0% 到 100% 的百分比。低饱和度值会产生更柔和和灰暗的色调，而低亮度值则使颜色更暗，更接近黑色。

由于这种布局，HSV 在绘画软件和颜色选择器中很常见。它让用户可以在不触及单个 RGB 通道的情况下，以 "颜色感觉有多强" 和 "颜色有多亮" 的方式进行思考。

什么是 HSL

HSL 代表 色相、饱和度 和 亮度。它使用相同的色相角度概念，但将亮度替换为亮度，后者衡量颜色与黑色或白色的接近程度。

HSL 中的色相也以度数表示，从 0 到 360。饱和度和亮度是从 0% 到 100% 的百分比。在 0% 的亮度时，颜色是黑色；在 100% 时，它是白色；在 50% 时，它具有中等亮度。

这使得 HSL 成为构建主题和调色板的舒适格式。设计师可以保持品牌颜色的色相不变，并调整亮度和饱和度以创建一致的状态和深度级别。

HSV 到 HSL 转换公式

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

给定：
  h   在 [0, 360) 范围内
  s_v 在 [0, 100] 范围内  // HSV 饱和度
  v   在 [0, 100] 范围内  // 数值

1) 归一化 HSV 值：
   s_v' = s_v / 100
   v'   = v / 100

2) 将 HSV 转换为 RGB（中间步骤）：
   a) 计算色度：
      c = v' * s_v'
   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  = v' - c
      r' = r1 + m
      g' = g1 + m
      b' = b1 + m

3) 将 RGB 转换为 HSL：
   a) 找到 max 和 min：
      max = max(r', g', b')
      min = min(r', g', b')
      delta = max - min
   b) 亮度：
      l = (max + min) / 2
   c) HSL 饱和度：
      如果 delta == 0 则 s_l' = 0
      否则 s_l' = delta / (1 - |2 * l - 1|)

4) 转换为最终单位：
   H   = h
   S_l = s_l' * 100
   L   = l * 100

在这个算法中，色相角度被保留。转换器暂时将 HSV 颜色表示为 RGB，然后根据这些 RGB 值计算亮度和新的饱和度，以获得 HSL 三元组。

hsv(196, 59%, 76%) 的示例
1) 将 s_v 和 v 归一化到 [0, 1] 范围
2) 计算 c、x、m 并推导 r'、g'、b'
3) 找到 RGB 的 max、min 和 delta
4) 使用 HSL 规则计算 l 和 s_l
5) 四舍五入结果（一种可能的近似值）：
   hsl(196, 49%, 54%)

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

从概念上讲，从 HSV 转换到 HSL 是关于用不同的轴描述颜色空间中的同一点。色相保持不变，而饱和度和第三个值则根据亮度而不是亮度重新解释。

hsv(210, 57%, 24%)
-> rgb(r, g, b)
-> hsl(h, s, l)

以下是 hsv(210, 57%, 24%) 的简化演示。

• 第 1 步 - 将 HSV 解释为 RGB

  标准化饱和度和亮度，计算色度和辅助值，根据色相区间选择一个临时三元组，并添加偏移。这会产生三个标准化的 RGB 通道。

  s_v' = 0.57
  v'   = 0.24
  rgb(26, 43, 60) 四舍五入后

• 第 2 步 - 从 RGB 推导 HSL 参数

  使用最大和最小通道值计算亮度，并测量颜色与灰色的距离。这个范围成为 HSL 空间中的新饱和度。

  max = max(r', g', b')
  min = min(r', g', b')
  l = (max + min) / 2
  if delta == 0 then s_l = 0 else s_l = delta / (1 - |2 * l - 1|)

• 第 3 步 - 将结果表示为 hsl(h, s, l)

  保持原始的色相角度，但用新的饱和度和亮度替换 HSV 的饱和度和亮度。屏幕上的颜色保持不变；只有表示法发生变化。

  hsl(210, 39%, 17%)

相同的逻辑适用于任何有效的 HSV 值，这就是为什么转换器或工具函数通常比手动计算更好的选择。

何时使用 HSV 以及何时使用 HSL

HSV 和 HSL 共享相同的色相维度，但在表示亮度和强度的方式上有所不同。每种模型在工作流程的不同部分可能更方便。

HSV 方便的地方

• 颜色选择器和绘画工具: 当人们以视觉方式调整颜色时，亮度和饱和度滑块是直观的。
• 处理以亮度为重点的用户界面: 一些界面以 "颜色有多亮" 的方式思考，而不是颜色与黑色和白色的接近程度。
• 快速探索: 改变亮度通常在寻找色相的更亮或更暗变体时提供快速反馈。

HSL 更合适的地方

• 设计结构化调色板: 亮度提供了一种可预测的方式来构建色调和阴影。
• 编写设计规格: HSL 值如 hsl(210, 40%, 20%) 在文档和代码中易于阅读。
• 协调明暗主题: 在保持色相稳定的同时调整亮度范围有助于保持一致的感觉。

总结

在交互式调整和专注于亮度的工具中使用 HSV。在设计令牌、调色板和文档中更倾向于使用 HSL，因为基于亮度的控制更直观。

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

在单个项目中同时使用 HSV 和 HSL 是很常见的。少量的规划可以使这些模型协同工作，而不是相互竞争。

分开编辑和存储

• 在 HSV 中实验：调整色相、饱和度和亮度，直到颜色在选择器中感觉合适。
• 以 HSL 存储令牌：将最终值保留在 HSL 中，以便于阅读、调整和记录。

与其他格式结合

• 在需要时通过 RGB 转换：许多库已经实现了 HSV 到 RGB 和 RGB 到 HSL 的转换，因此你可以组合它们，而不是编写自定义数学。
• 使用 HSLA 或 RGBA 进行透明度：将基础颜色保留在 HSL 或 RGB 中，仅在实际需要半透明覆盖时添加 alpha。

保持格式一致

• 为每一层定义清晰的规则：例如，在选择器中使用 HSV，在令牌中使用 HSL，在最终 CSS 中使用 RGB 或 HEX。
• 避免随机混合模型：一致使用格式使未来的重构和主题更改更易于管理。

通过明确划分 HSV 和 HSL 的使用场合，你可以利用这两种模型，而不会给代码库带来混乱。

HSV 到 HSL 转换表

下表显示了几种熟悉的颜色，分别用 HSV 和 HSL 描述。为了便于查阅，值已四舍五入，因此在需要精确数字时，请依赖上面的转换器。

对于任何其他 HSV 颜色，你可以使用页面顶部的转换器来获取相应的 HSL 值，使用标准算法。

常见问题：HSV 到 HSL

• 为什么要将 HSV 转换为 HSL

  许多工具提供 HSV 控件，而你的令牌和文档可能使用 HSL。转换让你可以用一种模型进行设计，并用另一种模型存储或共享颜色，而不改变它们的外观。

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

  不。它们只是同一 RGB 基色空间的不同坐标系统。任何有效的 HSV 颜色都有匹配的 HSL 表示，反之亦然。

• 转换时色相保持不变吗

  在标准算法中，色相角度被保留。变化的是饱和度和第三个值，它们根据每个模型的规则重新计算。

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

  可以。通过 RGB 在 HSV 和 HSL 之间移动是可逆的，直到四舍五入。只要值正确限制，视觉颜色保持不变。

• 在所有情况下，一个模型比另一个模型更好吗

  不一定。HSV 在选择器和绘画工具中通常更方便，而 HSL 在设计令牌、调色板和书面规格中更清晰。在同一项目中使用这两者并制定明确的转换规则是很正常的。

相关转换器：

• HEX 转 HSL 转换器

  即时计算 hex 转 hsl

• HEX 转 HSV 转换器

  即时计算 hex 转 hsv

• RGB 转 HSL 转换器

  即时计算 rgb 转 hsl

• RGB 转 HSV 转换器

  即时计算 rgb 转 hsv

• HSL 转 HSV 转换器

  即时计算 hsl 转 hsv

• HSV 转 RGB 转换器

  即时计算 hsv 转 rgb