RGB 转 HSL 转换器

RGB 转 HSL 转换器可将 rgb(59, 130, 246) 这样的 RGB 值转换为 hsl(217, 91%, 60%) 这样的 HSL 值。两者描述的是同一种颜色，但 RGB 通过三个光通道实现，而 HSL 用色相、饱和度和亮度来描述 — 调整和变化颜色直观得多。

当你想以编程方式让颜色变亮、变暗或降低饱和度时，把 RGB 转换为 HSL 是第一步 — 这些操作在 HSL 中很简单，在原始 RGB 中却很别扭。

为何转换为 HSL

调整明暗

只改亮度，即可从一种基础色生成一致的悬停、激活和禁用状态。

控制鲜艳度

调整饱和度，让颜色更醒目，或为低调的背景做柔化处理。

和谐配色

按等步长移动色相，即可创建互补或类似的配色方案。

如何将 RGB 转换为 HSL

1

输入 RGB 值

键入三个通道 — 例如 59, 130, 246。逗号或空格都可以，需要的话也可用 rgb(...) 包裹。

2

读取 HSL 结果

HSL 值会在你输入时即时计算，实时色块同步更新，方便你用肉眼核对颜色。

3

或直接选色

点击预览色块打开系统原生取色器直观选色 — RGB 和 HSL 字段会自动更新。

4

复制与复用

把 hsl() 字符串直接复制到你的 CSS。下方面板还会显示 HEX、RGB、HSV 和 CMYK。

功能特性

RGB 与 HSL

RGB

三个光通道

契合屏幕发光成色的方式
难以在不改变色相的情况下"变亮"
每通道取值 0–255

HSL

贴近人类的模型

亮度和饱和度是独立的调节项
轻松生成浅色、深色和配色
色相 0–360°，S 和 L 为 0–100%

实时输出

输入时结果实时更新，全部在浏览器中完成。

所有格式一次呈现

为每种颜色同时显示 HEX、RGB、HSL、HSV 和 CMYK。

常见问题

RGB 和 HSL 有什么区别？

RGB 通过混合红、绿、蓝光来定义颜色。HSL 用色相（颜色类型）、饱和度（鲜艳度）和亮度（明暗）来定义同一颜色 — 把相同的数据重新映射为更直观的术语。

我何时应该使用 HSL？

当你需要在不改变基础色相的前提下创建颜色变体 — 更浅或更深的色调，或更鲜艳/更柔和的版本 — 时使用 HSL。它非常适合主题和 UI 状态。

转换准确吗？

准确。计算是精确的；相同的 RGB 输入总会得到相同的 HSL。为便于阅读，HSL 值会四舍五入为整数，往返转换时可能相差一个单位，但看起来完全一致。

哪些 RGB 值是有效的？

三个通道每一个都必须是 0 到 255 的整数。用逗号或空格分隔输入，带不带 rgb() 包裹都可以。

可以把 HSL 输出直接粘贴进 CSS 吗？

可以。输出采用所有现代浏览器都支持的标准 hsl(h, s%, l%) 语法，因此可直接写入样式表。