HSL 转 RGB 颜色转换器

结果中的 R、G、B 数值表示红、绿、蓝三个通道在 0 到 255 范围内的强度。你可以直接在 CSS 中以 rgb(R, G, B) 的形式使用这些数值,或在图像编辑软件中使用。

首先根据饱和度和明度计算出一个“色度”数值(C)。根据色相落在哪个 60 度区间,为 R、G、B 通道分配临时数值;最后加上明度偏移量(m),并将结果缩放到 0 到 255 的范围。

• 将饱和度和明度从百分比转换为 0 到 1 的范围。
• 独立于明度偏移量(m),计算出“色度”数值(C)。
• 确定色相数值落在哪个 60 度区间。
• 根据该区间,为 R、G、B 通道分配临时数值(C、X、0 的组合)。
• 加上明度偏移量(m),再将结果乘以 255,得到最终的 R、G、B 数值。

H=210°, S=65%, L=45%(一种鲜艳的蓝色)大约对应 R=40, G=115, B=189。

• 请将色相(H)输入为 0 到 360 度之间的数值;360 度与 0 度(红色)代表同一种颜色。
• 请将饱和度和明度以百分比(0-100)输入;小数数值可获得更精确的结果。
• 得出的 RGB 数值可能是小数;在屏幕或 CSS 中使用时,可四舍五入为最接近的整数。

HSL(色相、饱和度、明度)模型是设计师定义颜色时最常用的格式之一,因为独立调整色相、饱和度和明度可以更轻松地创建颜色的各种变体。然而,由于屏幕和大多数图像格式都以 RGB 处理颜色,以 HSL 定义的颜色必须先转换为 RGB 才能显示出来。

这一转换的关键在于确定色相(H)落在色轮的哪个 60 度区间;色轮被划分为六个相等的 60 度区间,每个区间中红、绿、蓝三个通道的组合方式各不相同,由不同通道占主导。

饱和度和明度决定了该区间内通道数值的“宽度”(色度,C)。饱和度越高,颜色越鲜艳;饱和度越低,颜色越暗淡(接近灰色);而明度则使结果偏向黑色或白色。

此工具按照标准转换步骤处理你输入的 H、S、L 数值,生成可直接使用的 R、G、B 数值。你可以将结果用于 CSS 的 rgb() 函数、图像编辑软件或其他任何基于颜色的工具。

将 HSL 转换为 RGB,对于需要把设计系统中以 HSL 定义的品牌颜色,提供给期望 RGB 或 HEX 输入的第三方工具(例如较旧的图像编辑软件或印刷软件)的开发者尤其实用。