HSL 转 RGB — 将 HSL 颜色转换为 RGB 值
将 HSL 颜色值转换为 RGB。实时色样预览，完全在浏览器中运行。无上传、无账号、无限制。
HSL to RGB
Convert HSL color values to RGB online. Enter HSL like 30,100,50 and get RGB. Works entirely in your browser.
HSL 是设计师最先想到的色彩模型，因为它贴近人对颜色的描述方式：先选一个 hue，再决定要多么鲜艳，然后推得更亮或更暗。CSS Color Module Level 3 在 2011 年把 hsl() 和 hsla() 升格为一等公民，每个现代浏览器都能渲染它们。RGB 是软件使用的色彩模型 —— 每块屏幕上的每个像素都由红、绿、蓝子像素的强度来描述，所有绘图 API（HTML canvas、WebGL、服务器端图像库）都接受 RGB 三元组。两者的相互转换是前端工作中的日常琐事，而转换有两种不同的形态，取决于来回的方向。
HSL 转 RGB 中「不那么显然」的一点，是数学本身并不复杂。hue 作为色轮上的一个位置，选出基础色；saturation 把颜色从中性灰推向完全鲜艳；lightness 把颜色推向黑（L=0）或白（L=100）。在 L=50%、S=100% 时，颜色是该 hue 最饱和的形态。转 RGB 时，每个 hue 通过一个分段函数产生三个通道，再应用 lightness 和 saturation 因子，最终落在 0-255 的整数值上。这里的输出正是浏览器实际渲染的、兼容 CSS 的 RGB 字符串。
最终的交接：如果目标是 CSS 文件，rgb() 输出和原始 hsl() 值可以互换，每个浏览器都能用。如果目标是绘图 API 或图像处理库，RGB 三元组是唯一可接受的形式。如果目标需要感知均匀（匹配看起来同样亮的颜色、挑选可访问的对比度对），HSL 是错误的起点 —— OKLCH 或 CIELAB 才是对的模型，颜色转换器同时支持两者。
使用方法
输入 H、S、L 值
键入 hue（0-360）、saturation（0-100%）和 lightness（0-100%）。输出随键入更新，色样面板实时反映计算出的 RGB 颜色。
查看 RGB 分解
输出显示红、绿、蓝三个通道（各 0-255）。底部显示默认的 sRGB 色彩空间，以及存在时的 alpha 通道。
复制 RGB 字符串
把值复制为 CSS 可用的 `rgb(59, 130, 246)` 或 `rgba(59, 130, 246, 1)` 声明。粘贴到样式表、设计工具或 CSS-in-JS 模板字符串中。
常见问题
HSL 每个通道代表什么？
hue（0-360）在色轮上选位置 —— 0 是红，120 是绿，240 是蓝。saturation（0-100%）控制颜色的强度，从纯灰到全饱和。lightness（0-100%）决定颜色接近白还是黑，50% 是最饱和的状态。
HSL 和 Photoshop 拾色器显示的一致吗？
概念上类似 —— Photoshop 的 HSB（hue、saturation、brightness）拾色器用 brightness 代替 lightness。CSS HSL 用 lightness，50% L 是最饱和的颜色；HSB 用 brightness，100% B 才是最饱和。
为什么手选的 HSL 转成 RGB 后看起来不一样？
HSL 是一个便于描述颜色的模型，不是感知一致的模型。两个 lightness 值相同的 HSL 颜色在视觉重量上可以差异很大 —— HSL(240, 100%, 50%) 的鲜蓝看起来比 HSL(60, 100%, 50%) 的鲜黄更深。输出的 RGB 三元组保留的是数学，不是感知亮度。
可以往返转回 HSL 吗？
可以 —— 在 8 位精度内转换是无损的。RGB 转 HSL 工具读取 RGB 输出，重新计算 hue、saturation 和 lightness，由于 RGB 取整为整数，每个通道误差在 ±1 以内。
H 值超出 0-360 会怎样？
输入会按 360 取模归一化。HSL(720, 50%, 50%) 与 HSL(0, 50%, 50%) 是同一种颜色。负的 hue 值向前回绕 —— HSL(-120, 50%, 50%) 与 HSL(240, 50%, 50%) 相同。回绕前后输出的 RGB 完全一致。
限制说明
- 仅支持 sRGB本工具默认 sRGB 色彩空间，这是网页 CSS 的标准。目标是 Display P3 或 Rec.2020 的 HSL 值会被当作 sRGB 解析，超出 sRGB 色域的通道会被裁剪到最近的色域内颜色。
- 8 位精度RGB 输出按每个通道 0-255 的整数取整。对于需要每通道 16 位精度的广色域或印刷工作流，请使用输出浮点 RGB 三元组的工具。
- lightness 非感知均匀HSL 的 lightness 轴不是感知均匀的。L=20% 的颜色在视觉上不是 L=40% 的两倍深。要感知准确的亮度，请使用 OKLCH 或 CIELAB。
平台说明
- macOS
- Digital Color Meter 把光标下的颜色读为 RGB 或通用 HSL。本浏览器工具是把设计文件中的 HSL 值转换为 canvas、WebGL 或老式 CSS 可用 RGB 三元组的合适选择。
- Windows
- PowerToys 的 Color Picker 把任意像素复制为 HEX、RGB 或 HSL。本浏览器工具适合处理来自 CSS 文件、Figma 导出或设计系统中、需要落到遗留样式表里成为 RGB 声明的 HSL 值。
- Linux
- GIMP 的拾色器同时显示 HSL 和 RGB。命令行场景下，ImageMagick 可以通过 `convert -colorspace HSL` 输出 HSL。本浏览器工具适合批量转换来自设计导出的 HSL 值。
- Web
- 完全在客户端运行。页面加载后离线可用。输出是合法的 CSS `rgb()` 值 —— 可粘贴到任何样式表、CSS-in-JS 模板或 canvas API 调用中。