HSL 转 RGB 转换器是什么?
这个工具可以把用 HSL 模型(色相 Hue、饱和度 Saturation、亮度 Lightness)表示的颜色,转换为屏幕显示、CSS 和图片文件中常用的 RGB 模型。HSL 对设计师来说更直观,因为它把"是什么颜色"(色相)与"颜色有多鲜艳"(饱和度)、"有多亮"(亮度)分开来描述;而 RGB 则用红、绿、蓝三种光的强度来表示同一种颜色。这里的换算是精确的,适用于任何有效的 HSL 输入。
使用方法
输入以度为单位的色相(0–360)、以百分比表示的饱和度(0–100)和亮度(0–100)。计算器会返回等价的 rgb(r, g, b) 值,每个通道取值 0 到 255,并提供实时色块,方便你直观地确认结果。
公式解析
首先把饱和度和亮度缩放到 0–1 区间。彩度为下式,代表颜色的鲜艳程度。
$$C = (1 - |2L - 1|)\,S$$辅助值 X 用于处理每个 60° 色相区间内部的过渡混合,
$$X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right)$$而 m 则把整体数值平移,使其符合所设定的亮度。
$$m = L - \tfrac{C}{2}$$根据色相落在哪个 60° 区段,C、X 和 0 会按特定顺序分配给 R、G、B,随后加上 m,再将各通道乘以 255 并四舍五入取整。
实例演算
以 HSL(210°, 50%, 50%) 为例:\(S = 0.5\),\(L = 0.5\)。
$$C = (1 - |0|)\cdot 0.5 = 0.5$$\(H/60 = 3.5\),于是 \((3.5 \bmod 2) = 1.5\),
$$X = 0.5\cdot(1 - |1.5 - 1|) = 0.25$$$$m = 0.5 - 0.25 = 0.25$$色相 210° 落在第 3 区段(180–240°),得到 \((R',G',B') = (0,\ X,\ C) = (0,\ 0.25,\ 0.5)\)。加上 m 并乘以 255:
$$(R, G, B) = ((0+m)\cdot 255,\ (0.25+m)\cdot 255,\ (0.5+m)\cdot 255)$$得到 \(R = 64\),\(G = 128\),\(B = 191\) → rgb(64, 128, 191)。
常见问题
各项输入的取值范围是多少?色相为 0–360 度;饱和度和亮度均为 0–100 百分比。
为什么数值要四舍五入?RGB 通道必须是 0 到 255 之间的整数,因此缩放后的结果会四舍五入到最接近的整数。
能得到灰色吗?可以——把饱和度设为 0,色相任意取值,此时 R、G、B 都会等于亮度缩放到 0–255 后的同一数值。