RGB 转 HSL — 将 RGB 颜色值转换为 HSL
将 RGB 颜色值转换为 HSL。实时色样与滑块预览，直观查看色相、饱和度、亮度 —— 完全在浏览器中运行，无需上传。
RGB to HSL
Convert RGB color values to HSL online. Enter RGB like 255,102,0 and get HSL. Works entirely in your browser.
HSL 是设计师真正用来思考颜色的色彩模型。RGB 写的是「59 红、130 绿、246 蓝」，你脑海中浮现不出任何画面 —— 三元组是机器指令，不是颜色描述。HSL 写的是「221 度色相（蓝），83% 饱和度（鲜艳），48% 亮度（适中）」，你立刻就知道这是一种饱和度高的中等蓝。从 RGB 到 HSL 的转换并不是数学游戏 —— 它把屏幕的母语翻译成设计师的母语，让颜色推理变得可行，而 RGB 三元组做不到这一点。
色相角度是转换最有价值的输出。一旦知道一个颜色的色相 —— 比如 221 度 —— 就能立刻推算出哪些颜色与之相似（221 ± 30 度）、哪些与之互补（221 + 180 = 41 度）、哪些构成三角关系（221、341、101 度）。基于 HSL 构建的设计系统可以保持饱和度与亮度不变、只旋转色相来定义调色板，产出一组视觉上天然和谐的配色，无需手动微调。本转换器给出的色相值，是构建这种调色板的起点。
饱和度与亮度数值让转换结果在 CSS 中真正可用。CSS 的 hsl() 函数被所有浏览器和所有 CSS 预处理器支持。形如 --primary: hsl(221, 83%, 48%) 的 CSS 自定义属性，自解释程度远高于 --primary: #3B82F6 —— 读出色相就知道是蓝色，读出饱和度就知道多鲜艳，读出亮度就知道多亮。本转换器产出的 HSL 值，正是让 CSS 具备这种自解释能力的前提。
使用方法
输入 RGB 值
输入红、绿、蓝三个值（各 0-255），或粘贴形如 `rgb(59, 130, 246)` 的字符串。HSL 输出实时更新。色样与 HSL 色轮直观展示色相，配合饱和度与亮度滑块便于视觉对照。
查看 HSL 分解
输出显示色相（0-360 度）、饱和度（0-100%）和亮度（0-100%）。每个分量既以数字呈现，也展示在色轮（色相）以及饱和度/亮度渐变上的位置。
复制 HSL 值
把值复制为 CSS 可用的 `hsl(221, 83%, 48%)` 或 `hsla(221, 83%, 48%, 1)` 声明。粘贴到样式表、CSS-in-JS 模板字符串或设计令牌定义中。
常见问题
为什么要用 HSL 而不是 RGB？
HSL 对应人类思考颜色的方式：色相是基底颜色（红、蓝、绿），饱和度是强烈程度（鲜艳 vs 暗淡），亮度是明暗（亮 vs 暗）。RGB 对应屏幕产生颜色的方式（红、绿、蓝三个子像素）。设计师用 HSL 思考，屏幕用 RGB 渲染。转换在两种心智模型之间架起桥梁。
色相是怎么从 RGB 计算出来的？
色相由 RGB 三个通道的相对比例决定。最大的通道决定基础色相区域（0-60 为红主导，120-180 为绿主导，240-300 为蓝主导），另外两个通道的差值决定该区域内的偏移量。具体公式来自计算机图形学教材中的标准 RGB-to-HSL 变换。
工具能在色轮上展示颜色吗？
可以 —— HSL 色轮面板用径向指示器标出精确的色相角度。饱和度用距色轮中心的距离表示，亮度用标记的明暗表示。这种可视化方式比单纯看数字更容易理解颜色关系。
HSL 和 HSV/HSB 有什么区别？
HSL（Hue, Saturation, Lightness）采用双锥模型，纯白和纯黑饱和度都为 0。HSV（Hue, Saturation, Value，也叫 HSB）采用单锥模型，白色位于锥顶。HSL 是 CSS 标准；HSV 是 GIMP、Photoshop 等拾色器的标准。本工具专门输出 HSL。
能通过滑块调节 HSL 值吗？
不能 —— 本工具只做 RGB 转 HSL 的单向转换。如果想通过滑块交互式地探索颜色，请使用颜色转换器，它为所有颜色模型提供滑块。RGB 转 HSL 工具专注于转换速度，而不是颜色探索。
限制说明
- 仅支持 sRGB 色彩空间转换假设 sRGB 基色。来自 Display P3、Adobe RGB 或其他色彩空间的 RGB 值，转换得到的 HSL 值描述的是它在 sRGB 中渲染的效果，可能与原始色彩空间的设计意图不符。
- 不具备感知均匀性HSL 不是感知均匀的颜色空间 —— 饱和度与亮度相同但色相不同的两种颜色，在人眼中的实际饱和度和亮度可能并不相等。需要感知均匀的颜色操作时，请使用支持 CIELAB 或 CIELUV 色彩空间的工具。
- 灰色的色相未定义当 R=G=B（某种灰色）时，色相在数学上未定义。工具对灰色值返回 0 度色相。因为饱和度为 0%，CSS 中色相数值实际上并不影响渲染。
平台说明
- macOS
- Digital Color Meter 显示 RGB 但不显示 HSL。当设计规范使用 HSL 进行主题或色阶定义时，本浏览器工具正好补足这一缺口。
- Web
- 完全在客户端运行。色轮在本地渲染，不依赖任何外部资源。