RGB 转 HSL 颜色转换器

色相(H)显示颜色在色轮上的位置,饱和度(S)显示颜色的鲜艳或暗淡程度,明度(L)显示颜色接近黑色还是白色的程度。这三个数值可直接在 CSS 中以 hsl(H, S%, L%) 的形式使用。

首先将 R、G、B 缩放到 0 到 1 的范围。明度(L)是最高通道和最低通道的平均值。饱和度(S)是通道差值相对于明度的比例,而色相(H)则根据哪个通道数值最高,在 0 到 360 度的范围内计算得出。

• 将 R、G、B 数值除以 255,缩放到 0 到 1 的范围。
• 找出缩放后数值中的最大值(max)和最小值(min)。
• 明度(L)计算为最大值与最小值的平均数。
• 饱和度(S)通过将最大值与最小值之差相对于明度归一化得出。
• 色相(H)根据哪个通道(R、G 或 B)数值最高,在 0 到 360 度范围内计算得出。

R=52, G=152, B=219(一种鲜艳的蓝色)大约对应 H=204 度, S=70%, L=53%。

• 请将 R、G、B 输入为 0 到 255 之间的整数;超出该范围的数值不代表有效颜色。
• 色相(H)是色轮上 0 到 360 度之间的位置:0 表示红色,120 表示绿色,240 表示蓝色。
• 饱和度和明度以百分比表示;饱和度 0% 为灰色调,明度 100% 为白色。

RGB(红、绿、蓝)模型准确反映了屏幕通过发光产生颜色的方式:每个通道取 0 到 255 之间的强度值,三个通道组合可产生数百万种不同的颜色。然而,当你想让颜色“更亮”或“更鲜艳”时,这个模型并不直观,因为你需要同时调整三个通道。

相比之下,HSL(色相、饱和度、明度)模型按照人眼感知颜色的方式来描述颜色:色相表明这是什么颜色(红色、绿色、紫色),饱和度显示其鲜艳程度,明度显示其明暗程度。因此设计师和开发者在构建调色板时通常更偏好使用 HSL。

此工具先将输入的 RGB 数值缩放到 0 到 1 的范围,然后找出最高和最低的通道值来计算明度和饱和度,接着判断哪个通道占主导,从而确定色相在色轮上的精确位置。

HSL 格式最大的优势在于可以直接在 CSS 中以 hsl(色相, 饱和度%, 明度%) 的形式使用。例如,要为品牌主色创建更深的变体,只需降低明度数值即可;而在 RGB 中则需要分别重新计算三个通道。

这类颜色转换在网页设计、标志制作、数据可视化和界面主题系统中十分常见。将 RGB 转换为 HSL,是希望构建浅色/深色主题变体或统一调色板的开发者的实用起点。