RGB 到 HSL 转换器

什么是 RGB

RGB 模型将颜色描述为三种光成分的混合：红色、绿色和蓝色。每个通道用从 0 到 255 的整数表示，其中 0 表示该通道没有贡献，而 255 表示最大强度。

当三个通道结合在一起时，它们形成了您在屏幕上看到的像素。例如，rgb(255, 255, 255) 是白色，rgb(0, 0, 0) 是黑色，而 rgb(0, 128, 255) 是一种饱和的浅蓝色。

由于 RGB 使用普通数字，因此它非常适合动态效果：渐变、动画过渡或生成的调色板都可以表示为三个数值通道的变化。

什么是 HSL

HSL 代表 色相、饱和度 和 明度。它重新组织了 RGB 使用的相同颜色空间，但使用更易于阅读和理解的参数进行设计工作。

色相 在色轮上以 0 到 360 度的形式测量。例如，红色接近 0，绿色接近 120，蓝色接近 240。饱和度 和 明度 以 0% 到 100% 的百分比表示。

低饱和度值使颜色更接近中性灰色。明度控制颜色的明暗程度：0% 产生黑色，50% 产生色相的鲜艳版本，而 100% 产生白色。因此，HSL 在构建调色板和用户界面状态变化时通常感觉更直观。

RGB 到 HSL 公式

rgb(r, g, b) -> hsl(h, s, l)

1) 将通道归一化到 [0, 1]：
   r' = r / 255
   g' = g / 255
   b' = b / 255

2) 找到 max 和 min：
   max = max(r', g', b')
   min = min(r', g', b')
   delta = max - min

3) 计算亮度：
   l = (max + min) / 2

4) 计算饱和度：
   如果 delta == 0 则
     s = 0
   否则
     s = delta / (1 - |2 * l - 1|)

5) 计算色相：
   如果 delta == 0 则
     h = 0
   否则如果 max == r' 则
     h = 60 * (((g' - b') / delta) mod 6)
   否则如果 max == g' 则
     h = 60 * (((b' - r') / delta) + 2)
   否则如果 max == b' 则
     h = 60 * (((r' - g') / delta) + 4)

6) 转换为最终单位：
   H = h             // [0, 360) 范围内的度数
   S = s * 100       // 百分比
   L = l * 100       // 百分比

该算法保留原始 RGB 信息，但以不同的方式表达。明度基于最亮和最暗通道的平均值，饱和度取决于通道的分散程度，而色相由主导成分决定。

rgb(79, 163, 194) 的示例
1) 将 r、g、b 归一化到 [0, 1] 范围
2) 计算 max、min、delta
3) 使用上述规则计算 h、s、l
4) 四舍五入结果：
   hsl(196, 49%, 54%)

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

每个 RGB 到 HSL 的转换遵循相同的结构：缩放通道，相互比较，并利用它们之间的关系计算色相、饱和度和明度。

rgb(26, 43, 60)
[26, 43, 60] -> hsl(h, s, l)

让我们使用 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')
  l = (max + min) / 2

• 步骤 3 — 计算饱和度和色相：

  如果所有三个通道几乎相同，颜色接近灰色，饱和度较低。当一个通道明显占主导地位时，饱和度增加，色相指向该通道最强的颜色轮部分。

  hsl(210, 39%, 17%)

您可以对任何有效的 RGB 颜色应用相同的方法：规范化值，计算明度，推导饱和度，最后从主导通道计算色相。

选择 RGB 和 HSL

RGB 和 HSL 描述相同的颜色，但强调不同的方面。RGB 专注于三个数值通道，而 HSL 专注于基本色相、颜色的强度以及颜色的明暗程度。

何时使用 RGB

• 图形和代码中的低级工作: 许多 API 和图像格式直接使用 RGB 值。
• 基于通道的效果: 在构建滤镜、渐变或过渡时，您可以在 JavaScript 或 CSS 中调整单个通道。
• 与现有代码的互操作性: 遗留样式和库通常期望 RGB 或 HEX 值，因此 RGB 是一个自然的起点。

何时 HSL 更合适

• 设计调色板和状态: 保持色相固定，同时改变饱和度和明度，使得从单一基础颜色创建悬停、活动和禁用状态变得容易。
• 探索细微变化: 明度的小变化通常比直接调整 RGB 通道更可预测。
• 与主题相关的工作: HSL 令牌易于阅读和调整，当您为界面维护明暗主题时。

总结

当您需要明确的通道控制或当 API 期望该格式时，请使用 RGB。在构建调色板、定义设计令牌或希望颜色值更易于人类调整和讨论时，请优先使用 HSL。

构建 HSL 调色板的实用技巧

许多团队以一种格式存储颜色，但以另一种格式思考它们。通常在代码中保留 HEX 或 RGB 值，同时在 HSL 中探索变体，以获得更结构化的颜色系统。

保持品牌颜色的色相稳定

• 固定色相，变化饱和度和明度：这会产生仍然感觉像同一品牌颜色的阴影，但适用于不同的 UI 角色，如背景、边框和强调色。
• 对表面使用低饱和度：色相的柔和版本通常更适合面板和卡片，而较高的饱和度更适合按钮和关键高亮。

在 HSL 和其他 CSS 格式之间转换

• 一次转换用于令牌：您可以在 HSL 中实验颜色，然后将最终值固定为 HSL、RGB 或 HEX 作为设计令牌。
• 单独处理 alpha：对于透明度，您可以使用 hsla() 或 rgba() 函数，同时仍然考虑 HSL 中的基础颜色。

避免常见陷阱

• 在一个文件中混合太多格式：为令牌选择一个主要表示法，并在需要时通过工具转换为其他格式。
• 忽视对比度：在调整明度时，始终检查文本和图标在背景颜色上的外观。
• 仅使用明度来表示深度：更好的调色板通常同时调整饱和度和明度，而不是依赖单个滑块。

通过对 HSL 的一致策略和明确的转换规则，您的颜色系统在不同主题和组件之间变得更易于理解和维护。

RGB 到 HSL 转换表

下表列出了以 RGB 和 HSL 格式表示的一组熟悉的颜色。为了清晰起见，值进行了四舍五入，使得该表在设计或实现主题时方便作为快速参考。

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

常见问题：RGB 到 HSL

• 为什么要将 RGB 转换为 HSL

  RGB 方便存储和低级图形工作，但 HSL 更容易构建结构化的调色板并讨论设计决策。在格式之间移动可以将可预测的数学与更人性化的颜色描述结合起来。

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

  色相以 0 到 360 度表示。饱和度和明度是从 0% 到 100% 的百分比，这就是为什么许多设计工具将它们显示为带有百分比标签的滑块。

• 转换为 HSL 会改变颜色吗

  不会。HSL 和 RGB 只是编码相同颜色空间的两种不同方式。有效的 RGB 三元组及其 HSL 对应项在屏幕上描述相同的视觉颜色。

• HSL 和 HSV 有什么不同

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

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

  可以。常见的方法是为设计令牌选择一种主要表示法，例如 HSL 或 HEX，并在特定 API 要求时转换为 RGB 或其他格式。关键是保持转换自动化，避免手动重新计算。

相关转换器：

• HEX 转 RGB 转换器

  即时计算 hex 转 rgb

• HEX 转 HSL 转换器

  即时计算 hex 转 hsl

• HEX 转 HSV 转换器

  即时计算 hex 转 hsv

• RGB 转 HEX 转换器

  即时计算 rgb 转 hex

• RGB 转 HSV 转换器

  即时计算 rgb 转 hsv

• HSL 转 RGB 转换器

  即时计算 hsl 转 rgb