HSV 到 RGB 转换器

什么是 HSV

HSV 代表 色相、饱和度 和 明度。它通过颜色轮上的基本色相、该色相的强度以及与黑色相比结果的亮度或暗度来描述颜色。

色相以 0 到 360 度为单位测量。饱和度和明度以 0% 到 100% 的百分比表示。低饱和度会使颜色趋向灰色，而低明度则使其更暗，更接近黑色。

由于 HSV 将色相、强度和亮度分开，它在颜色选择器和数字绘画工具中非常受欢迎，用户可以探索基础颜色的变化。

什么是 RGB

RGB 是一种基于三种光通道的颜色模型：红色、绿色和蓝色。每个通道的值范围从 0 到 255。值为 0 表示该通道没有贡献，而 255 表示最大强度。

当三个通道结合在一起时，它们形成屏幕上的像素。例如，rgb(255, 255, 255) 是白色，rgb(0, 0, 0) 是黑色，rgb(255, 165, 0) 是明亮的橙色。

RGB 是许多图形 API 和图像格式的本地表示，这就是为什么将 HSV 转换为 RGB 是前端开发和视觉工具中的常见步骤。

HSV 到 RGB 公式

hsv(h, s, v) -> rgb(r, g, b)

Given:
  h in [0, 360)
  s in [0, 100]
  v in [0, 100]

1) Normalize saturation and value:
   s' = s / 100
   v' = v / 100

2) Compute chroma:
   c = v' * s'

3) Find a helper value:
   x = c * (1 - |((h / 60) mod 2) - 1|)

4) Compute a temporary rgb triple in [0, c]:
   if      0 <= h < 60   then (r1, g1, b1) = (c, x, 0)
   else if 60 <= h < 120 then (r1, g1, b1) = (x, c, 0)
   else if 120 <= h < 180 then (r1, g1, b1) = (0, c, x)
   else if 180 <= h < 240 then (r1, g1, b1) = (0, x, c)
   else if 240 <= h < 300 then (r1, g1, b1) = (x, 0, c)
   else                    (r1, g1, b1) = (c, 0, x)

5) Add the lightness offset:
   m  = v' - c
   r' = r1 + m
   g' = g1 + m
   b' = b1 + m

6) Convert to final RGB:
   r = round(r' * 255)
   g = round(g' * 255)
   b = round(b' * 255)

该公式首先构建具有所需饱和度和明度的颜色，然后根据色相选择颜色轮的区域，最后调整通道，以使整体亮度与目标值匹配。

hsv(196, 59%, 76%) 的示例
1) 将 s 和 v 归一化到 [0, 1] 范围
2) 计算 c、x 和 m
3) 为色相区段选择临时三元组
4) 将 m 添加到每个通道并缩放到 0-255
5) 四舍五入的结果:
   rgb(79, 163, 194)

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

从高层次来看，从 HSV 转换到 RGB 意味着决定颜色距离灰色有多远，选择颜色轮上的方向，然后将该信息转换为三个数值通道。

hsv(210, 57%, 24%)
-> rgb(r, g, b)

以下是 hsv(210, 57%, 24%) 的处理过程概述。

• 步骤 1 - 归一化并计算色度

  将饱和度和明度转换为分数，并用它们计算色度。色度描述与相同明度的纯灰色相比，颜色的存在程度。

  s' = 57 / 100
  v' = 24 / 100
  c = v' * s'

• 步骤 2 - 选择色相区域和基础三元组

  将色相除以 60 以找到颜色轮的区域。每个区域都有不同的临时三元组，例如 (c, x, 0) 或 (0, x, c)，这设置了红色、绿色和蓝色之间的关系，然后进行最终调整。

  h = 210
  h / 60 is between 3 and 4
  temporary triple uses (0, x, c)

• 步骤 3 - 添加偏移量并缩放到 RGB

  添加偏移量 m，以使最大通道与请求的值匹配，然后将结果缩放到 0 到 255 的范围，并四舍五入为整数。

  rgb(26, 43, 60)

您可以将相同的模式应用于任何有效的 HSV 颜色，这就是为什么使用转换器而不是手动重复这些计算是方便的。

HSV 和 RGB 的应用场景

HSV 和 RGB 描述相同的颜色，但强调不同的方面。HSV 以色相、饱和度和明度为基础，而 RGB 直接处理三个数值光通道。

HSV 的典型用途

• 交互式颜色选择器: 色相、饱和度和明度的滑块在用户探索颜色选项时感觉自然。
• 细粒度调整: 通过改变一两个参数而不是三个通道，很容易使颜色更亮或更生动。
• 视觉实验: 艺术家和设计师在尝试基础色相的变化时，通常更喜欢使用 HSV。

RGB 的典型用途

• 低级渲染: 许多图形 API 和图像格式直接使用 RGB 值。
• CSS 和网页布局: 像 rgb() 和 rgba() 的函数被广泛支持，并且易于集成到样式表中。
• 与其他格式的互操作性: HEX 和 HSL 转换通常在底层通过 RGB 进行。

总结

在交互式探索和调整颜色时使用 HSV，在准备在代码中存储、渲染或动画这些颜色时转换为 RGB。

使用 HSV 和 RGB 的实用技巧

您不必为整个项目选择仅一种颜色模型。HSV 和 RGB 可以在您提前规划工作流程时互为补充。

编辑时使用 HSV，存储时使用 RGB

• 在 HSV 中实验：调整色相、饱和度和明度，直到颜色感觉合适，然后转换为 RGB 作为最终的标记。
• 在代码中保持 RGB：RGB 值易于程序化操作，并且与现有库和格式兼容良好。

与其他颜色格式结合

• 在转换时通过 RGB 移动：即使您主要使用 HSL 或 HEX，转换通常使用 RGB 作为模型之间的桥梁。
• 使用 RGBA 处理透明度：将基础颜色保持为 RGB，仅在需要叠加或柔和边缘的地方添加 alpha 通道。

保持系统一致

• 定义明确的规则：决定在何处使用 HSV（例如，在选择器或编辑工具中）以及在何处 RGB 是最终格式。
• 依赖转换器：使用助手而不是手动计算，以便主题和调色板在代码库中保持准确。

通过在编辑时使用 HSV 和在实现时使用 RGB 的明确分离，您可以获得直观的控制和可预测的渲染。

HSV 到 RGB 转换表

下面的表格显示了几种知名颜色的 HSV 和 RGB 形式。为了可读性，值已四舍五入，因此在需要精确数字时，请使用页面顶部的转换器。

对于任何其他 HSV 组合，您可以依赖页面顶部的转换器，它实现了有效输入的标准 HSV 到 RGB 算法。

常见问题解答：HSV 到 RGB

• 为什么要将 HSV 转换为 RGB

  许多工具以 HSV 表示颜色以进行交互式编辑，但渲染引擎和 CSS 通常需要 RGB。转换使您能够保持直观的编辑模型，同时仍然输出您的技术栈所期望的格式。

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

  色相以 0 到 360 度为单位测量。饱和度和明度是从 0% 到 100% 的百分比。即使底层数学使用分数，典型的 CSS 和图形表示也使用此范围。

• 转换为 RGB 会改变颜色吗

  不会。HSV 和 RGB 描述的是相同的颜色空间。正确转换的 RGB 三元组在显示时将与原始 HSV 值看起来相同。

• 我可以从 RGB 返回到 HSV 吗

  可以。只要值保持在有效范围内，您可以在 HSV 和 RGB 之间移动，而不会丢失信息，除了轻微的四舍五入差异。

• HSV 是否在所有情况下优于 RGB

  不一定。HSV 适合编辑和选择器，而 RGB 更适合低级工作、存储和许多 API。通常在使用两个模型时并排使用，并有明确的转换规则。

相关转换器：

• HEX 转 RGB 转换器

  即时计算 hex 转 rgb

• HEX 转 HSV 转换器

  即时计算 hex 转 hsv

• RGB 转 HEX 转换器

  即时计算 rgb 转 hex

• RGB 转 HSL 转换器

  即时计算 rgb 转 hsl

• RGB 转 HSV 转换器

  即时计算 rgb 转 hsv

• HSV 转 HEX 转换器

  即时计算 hsv 转 hex