HSL 转 RGB 转换器

什么是 HSL

HSL 代表 色相、饱和度 和 明度。它以接近人们在日常工作中谈论颜色的方式描述颜色：它是哪种基础颜色，感觉有多强烈，以及它是更暗还是更亮。

色相是色轮上的一个角度，从 0 到 360。饱和度和明度是从 0% 到 100% 的百分比。较低的饱和度使颜色趋向灰色，而明度控制从黑色到白色的整体亮度。

由于这种结构，HSL 适合构建色调尺度、主题变化和语义标记：您可以保持色相不变，改变饱和度或明度，以获得一系列相关颜色。

什么是 RGB

RGB 是一种基于三种光成分的颜色模型：红色、绿色和蓝色。每个成分是从 0 到 255 的整数。值为 0 表示该通道关闭，而 255 表示全强度。

当这些通道结合在一起时，它们形成屏幕上的像素。例如，rgb(255, 255, 255) 是白色，rgb(0, 0, 0) 是黑色，而 rgb(0, 128, 255) 是一种明亮的蓝色，通常用于链接和按钮。

RGB 是许多图形和渲染系统的本地格式，这就是它在 CSS、画布 API、图像格式和 UI 框架中无处不在的原因。

HSL 转 RGB 公式

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

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

1) Normalize saturation and lightness:
   s' = s / 100
   l' = l / 100

2) Compute chroma:
   c = (1 - |2 * l' - 1|) * 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 = l' - c / 2
   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)

该公式首先构建一个具有给定色度和色相的颜色，然后调整它，使最终的明度与目标值匹配。最后，标准化的通道被缩放到 RGB 中使用的 0 到 255 范围。

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

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

HSL 转 RGB 算法乍一看可能令人畏惧，但它始终遵循相同的模式：计算颜色应该有多强，选择色轮上的基础方向，然后调整一切以使明度对齐。

hsl(210, 39%, 17%)
-> rgb(r, g, b)

以下是对 hsl(210, 39%, 17%) 的更详细描述。

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

  将饱和度和明度转换为分数，并用它们计算色度，描述颜色与灰色的距离。

  s' = 39 / 100
  l' = 17 / 100
  c = (1 - |2 * l' - 1|) * 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)

一旦您理解了这些阶段，您就可以将相同的方法应用于任何 HSL 颜色，并自信地将其转换为 RGB，无论是在代码中还是使用此页面上的转换器。

HSL 和 RGB 的使用场景

HSL 和 RGB 描述相同的颜色，但每种格式在不同情况下表现出色。HSL 更适合规划调色板，而 RGB 是渲染引擎和许多 API 实际使用的格式。

HSL 的典型用途

• 设计主题: 在组件之间保持色相稳定，并调整饱和度和明度以创建一致的尺度。
• 探索变化: 明度和饱和度的微小变化会产生可预测的同一基础颜色的更亮或更暗版本。
• 记录调色板: 当您在设计规范中描述品牌颜色时，HSL 值易于阅读。

RGB 的典型用途

• 低级图形和渲染: 许多绘图 API 和着色器代码直接期望 RGB 值。
• 与现有代码接口: 遗留样式、库和设计标记通常将颜色存储为 RGB 或 HEX。
• 处理图像: 像素数据和许多图像格式基于 RGB 通道。

总结

当您希望更好地控制颜色之间的关系时，请使用 HSL。当需要将这些值传递到 CSS、绘图 API 或需要数字通道的组件时，请将其转换为 RGB。

在使用 HSL 和 RGB 时的实用技巧

在实际项目中，您很少只选择一种颜色格式。通常会在 HSL 中思考，在 HEX 中存储标记，并在运行时通过 RGB 通道渲染所有内容。

在 HSL 中构建调色板，在 RGB 或 HEX 中存储值

• 首先在 HSL 中实验: 调整色相、饱和度和明度，直到调色板感觉合适。然后将其转换为 RGB 或 HEX 以用于您的设计标记。
• 保持代码友好的值: RGB 三元组适合程序化操作，而 HEX 在配置文件中紧凑且方便。

单独处理透明度

• 使用 HSLA 或 RGBA: 保持基础颜色为 HSL 或 RGB，仅在实际需要透明度的地方添加 alpha 通道，例如覆盖层或焦点环。
• 除非需要，否则不要将 alpha 编码到标记中: 基础颜色通常在完全不透明时更容易重用。

保持格式一致

• 每层选择一种存储格式: 例如，使用 HSL 进行设计规范，使用 HEX 进行标记，使用 RGB 在图形库要求的地方。
• 依赖转换器而不是手动计算: 这减少了错误，并使您的设计系统更易于维护。

通过明确何时使用 HSL 以及何时转换回 RGB 的策略，您的颜色系统保持可预测，并在项目发展时更易于演变。

HSL 转 RGB 转换表

下表显示了几种熟悉的颜色，分别以 HSL 和 RGB 格式书写。数字经过四舍五入，以便在您处理布局、主题或 UI 组件时易于扫描。

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

常见问题：HSL 转 RGB

• 为什么将 HSL 转换回 RGB

  许多工具和设计系统更喜欢 HSL 来规划调色板，但浏览器和图形库通常期望 RGB 或 HEX。转换使您能够保持舒适的设计工作流程，同时仍然提供您的技术栈所需的格式。

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

  色相以度数从 0 到 360 测量，饱和度和明度是从 0% 到 100% 的百分比。CSS 通常将其写为 hsl(h, s%, l%)。

• 转换为 RGB 会改变颜色吗

  不会。HSL 和 RGB 只是同一颜色空间的两种表示。正确转换的 RGB 三元组在渲染时看起来与原始 HSL 值相同。

• 如何处理 HSL 和 RGB 的透明度

  当您需要 alpha 通道时，请使用 hsla() 或 rgba()。这两种表示法通过第四个参数控制不透明度，扩展了基础颜色格式。

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

  可以。一个常见的方法是选择一种格式作为标记的真实来源，并依赖转换器处理所有其他情况。这使您的系统灵活而不牺牲一致性。

相关转换器：

• HEX 转 RGB 转换器

  即时计算 hex 转 rgb

• HEX 转 HSL 转换器

  即时计算 hex 转 hsl

• HEX 转 HSV 转换器

  即时计算 hex 转 hsv

• RGB 转 HEX 转换器

  即时计算 rgb 转 hex

• RGB 转 HSL 转换器

  即时计算 rgb 转 hsl

• HSL 转 HEX 转换器

  即时计算 hsl 转 hex