RGB 转 HSV 转换器

什么是 RGB

RGB 是一种将颜色描述为 红色、绿色 和 蓝色 光的组合的方式。每个组件以从 0 到 255 的十进制值表示，其中 0 表示该通道没有贡献，255 表示全强度。

当三个通道混合在一起时，它们会创建您在屏幕上看到的像素。例如，rgb(255, 255, 255) 产生白色，rgb(0, 0, 0) 结果为黑色，而 rgb(255, 0, 0) 产生纯红色。

由于 RGB 基于数字通道，因此在代码中使用起来非常方便：您可以生成渐变、动态调整通道并通过简单地更改数字来动画颜色过渡。

什么是 HSV

HSV 代表 色相、饱和度 和 明度。它以更接近人们谈论颜色的方式组织颜色：它是什么基本颜色、颜色的强度如何以及它在屏幕上看起来多明亮或多黑暗。

色相 以从 0 到 360 的度数表示，并在颜色轮上移动（例如，红色接近 0，绿色接近 120，蓝色接近 240）。饱和度 和 明度 以从 0% 到 100% 的百分比表示。

低饱和度值会使颜色趋向于灰色。低明度设置会使颜色变得更暗，更接近黑色。在高饱和度和高明度下，颜色变得鲜艳明亮，这就是为什么 HSV 常用于用户微调颜色强度和明度的界面。

RGB 转 HSV 公式

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

1) Normalize channels to [0, 1]:
   r' = r / 255, g' = g / 255, b' = b / 255
2) Find max and min:
   max = max(r', g', b')
   min = min(r', g', b')
   delta = max - min
3) Compute value:
   v = max
4) Compute saturation:
   if max == 0 then s = 0
   else s = delta / max
5) Compute hue:
   if delta == 0 then h = 0
   else if max == r' then h = 60 * (((g' - b') / delta) mod 6)
   else if max == g' then h = 60 * (((b' - r') / delta) + 2)
   else if max == b' then h = 60 * (((r' - g') / delta) + 4)
6) Convert to final units:
   H = h          // degrees in [0, 360)
   S = s * 100    // percentage
   V = v * 100    // percentage

该算法首先将 RGB 组件缩放到 0 到 1 的范围内，然后查看它们的分散程度。该分散程度控制饱和度，而最高的通道定义明度。色相取决于哪个通道占主导地位以及其他通道与其的比较。

rgb(79, 163, 194) 的示例

1) 归一化:
   r' = 79 / 255
   g' = 163 / 255
   b' = 194 / 255
2) 计算 max、min、delta
3) 使用上述规则计算 h、s、v
4) 四舍五入的结果:
   hsv(196, 59%, 76%)

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

从 RGB 转换到 HSV 始终遵循相同的模式：缩放通道，相互比较，然后利用这些关系推导出色相、饱和度和明度。

rgb(26, 43, 60)
↓    ↓    ↓
[26, 43, 60] -> hsv(h, s, v)

以下是对 rgb(26, 43, 60) 的各个阶段的详细观察。

• 步骤 1 — 归一化通道：

  r' = 26 / 255
  g' = 43 / 255
  b' = 60 / 255

• 步骤 2 — 找到最大值、最小值和增量：

  这三个值告诉您颜色可以多明亮以及通道之间的分离程度。最大值和最小值之间的差异最终决定了饱和度。

  max = max(r', g', b')
  min = min(r', g', b')
  delta = max - min

• 步骤 3 — 计算 H、S 和 V：

  使用 HSV 公式从主导通道推导出色相，然后计算饱和度和明度。最后，将饱和度和明度转换为更易于在文档和设计规范中阅读的百分比。

  hsv(210, 57%, 24%)

相同的工作流程适用于任何有效的 RGB 颜色：归一化通道，找到它们的范围，并应用公式以获得 HSV 表示。

RGB 和 HSV 的应用场景

RGB 和 HSV 从不同的角度谈论相同的颜色。RGB 关注红色、绿色和蓝色光的存在量，而 HSV 关注选择了哪个色相、颜色的强度以及它在屏幕上看起来多明亮。

RGB 的典型用法

• 编程和动画: 三个数字通道在 JavaScript 和 CSS 关键帧中易于操作。
• 低级图形工作: 许多渲染 API 和图像格式直接使用 RGB 值。
• 精确控制: 从 0 到 255 的通道值在代码中生成或限制颜色时提供了精细控制。

HSV 的典型用法

• 颜色选择器和调色板: 色相、饱和度和明度的滑块自然映射到 HSV 模型。
• 探索变体: 通过调整饱和度和明度，您可以快速创建基础颜色的更亮、更暗或更柔和的版本。
• 人性化调节: 非技术用户通常发现通过颜色的强度和明度来调整颜色比通过三个数字通道更容易。

总结

当您需要明确的数字通道用于代码和效果时，请使用 RGB。当您构建选择器、实验调色板或以更直观的方式传达颜色选择时，请选择 HSV。

使用 HSV 与 RGB 并行的实用技巧

许多项目以一种表示法存储颜色，但以另一种方式思考它们。通常在 RGB 或 HEX 中定义令牌，同时在设计工具和选择器中使用 HSV 来探索变体。

构建基于 HSV 的调色板

• 固定色相，变化饱和度和明度: 保持品牌颜色的色相不变，调整饱和度和明度以创建悬停、按下和禁用等状态。
• 背景使用较低的饱和度: 柔和的色相版本通常更适合表面和容器，而较高的饱和度适用于强调和行动呼吁元素。

在 HSV 和 CSS 表示法之间移动

• 转换并冻结令牌: 使用转换器从 HSV 转换为 RGB 或 HSL，然后将最终值以单一格式存储在样式表或设计令牌中。
• 单独处理透明度: 当您需要不透明度时，在 CSS 中使用 rgba() 或 hsla()，但仍在 HSV 空间中选择基础颜色。

常见陷阱

• 在一个文件中混合多种格式: 选择一种主要的文本格式，例如 RGB 或 HSL，仅在必要时进行转换。
• 将明度与亮度混淆: HSV 中的明度是相对于黑色的亮度测量，这与 HSL 中的亮度不同。
• 仅通过明度改变深度: 通常，通过调整饱和度和明度而不是依赖单个滑块来获得更好的结果。

通过明确的策略来决定何时使用 RGB 和何时考虑 HSV，您的颜色系统将保持可预测，并且随着时间的推移更易于维护。

RGB 转 HSV 转换表

下表显示了一组熟悉的颜色，以 RGB 和 HSV 格式表示。值经过四舍五入以提高可读性，因此非常适合在日常工作中快速参考。

对于精确工作，您始终可以使用页面顶部的转换器，它遵循标准的 RGB 到 HSV 算法以处理任何有效输入。

常见问题：RGB 转 HSV

• 为什么要将 RGB 转换为 HSV

  RGB 适合存储和低级工作，但 HSV 更容易调整颜色的强度和亮度。在这两种格式之间转换可以让您利用两种思考颜色的方式。

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

  色相以从 0 到 360 的度数表示。饱和度和明度是从 0% 到 100% 的百分比，这就是为什么大多数选择器将它们显示为带有百分比标签的滑块。

• 转换为 HSV 会改变颜色吗

  不会。RGB 和 HSV 都描述相同的颜色空间。有效的 RGB 三元组及其 HSV 对应值表示相同的视觉颜色；只有表示法不同。

• HSV 和 HSL 有什么不同

  这两种模型共享色相和饱和度，但第三个值不同。HSL 使用亮度，它将颜色与黑色和白色进行比较，而 HSV 使用明度，它仅将颜色与黑色进行比较。

• 我可以在一个项目中混合 RGB、HSV 和其他格式吗

  可以。一个常见的方法是为令牌选择一种主要文本格式，例如 HEX 或 HSL，并在需要更直观控制时在工具或实用程序中转换为 HSV。关键是保持系统的一致性，并依赖转换器而不是手动计算。

相关转换器：

• HEX 转 RGB 转换器

  即时计算 hex 转 rgb

• HEX 转 HSL 转换器

  即时计算 hex 转 hsl

• HEX 转 HSV 转换器

  即时计算 hex 转 hsv

• RGB 转 HEX 转换器

  即时计算 rgb 转 hex

• RGB 转 HSL 转换器

  即时计算 rgb 转 hsl

• HSV 转 RGB 转换器

  即时计算 hsv 转 rgb