颜色转 HSL

什么是 HSL 颜色？

HSL 颜色使用三个与人眼感知颜色方式高度对应的属性来描述颜色：色相、饱和度和亮度。色相是 0° 到 360° 之间的角度，表示颜色在色轮上的位置 — 0° 为红色，120° 为绿色，240° 为蓝色。饱和度是 0%（完全灰）到 100%（完全鲜艳）的百分比。亮度也是百分比，0% 为黑色，50% 为纯色相，100% 为白色。例如 hsl(199, 88%, 48%) 是一种高饱和度的天蓝色。

HSL 在 CSS Color Module Level 3 中被标准化，现代浏览器通过 hsl() 和 hsla() 函数广泛支持。由于它的三个通道对应感知特性，HSL 是构建配色方案、生成浅色和深色变体、以及为非设计师提供颜色控件的首选格式。

何时使用 HSL 颜色

当需要以人的角度而非原始光强来推理颜色时，HSL 最有用。常见场景包括：

• 构建调色板。 保持色相不变，改变饱和度或亮度可生成和谐的渐变色板。
• 创建浅色与深色。 提高亮度得到浅色，降低亮度得到深色 — 比调整三个 RGB 通道直观得多。
• 主题与深色模式。 仅替换亮度值即可在保持色相的前提下将品牌色从浅色模式切换到深色模式。
• UI 中的颜色选择器。 大多数可视化颜色选择器都提供 HSL 滑块，因为设计师习惯以色相/饱和度/亮度思考。
• CSS 变量。 存储 --brand: 199 88% 48% 可让同一色相搭配不同亮度修饰符复用。
• 无障碍调整。 降低饱和度或调整亮度可挽救未通过 WCAG 对比度检查的配色对。

当需要像素级精确的通道值时（使用 RGB）或需要紧凑的可分享代码时（使用 HEX），HSL 不太合适。

HSL 与 RGB、HEX 的区别

HSL、RGB 和 HEX 都描述同一个 sRGB 颜色。RGB 和 HEX 直接编码红、绿、蓝通道 — 二者在数学上等价，只是十进制与十六进制的区别。HSL 是 RGB 的一种变换，将颜色重新表达为色相、饱和度和亮度。在 sRGB 色域内，三者之间的转换是无损的。

关键区别在于认知：在 RGB/HEX 中更改一个通道通常会同时改变三个感知属性，而在 HSL 中更改一个通道会产生可预测的视觉变化。这使得 HSL 成为设计系统、色彩理论教程和程序化颜色生成的首选格式。

常见 HSL 颜色

下表列出了常用的颜色及其对应的 HSL 值。

名称	HSL	HEX
黑色	hsl(0, 0%, 0%)	#000000
白色	hsl(0, 0%, 100%)	#FFFFFF
红色	hsl(0, 100%, 50%)	#FF0000
绿色	hsl(120, 100%, 50%)	#00FF00
蓝色	hsl(240, 100%, 50%)	#0000FF
天蓝	hsl(199, 88%, 48%)	#0EA5E9
黄色	hsl(60, 100%, 50%)	#FFFF00

注意 CSS 还支持 hsla()，它增加一个 0 到 1 之间的第四个 alpha 值 — 例如 hsla(199, 88%, 48%, 0.5) 表示 50% 不透明度。

如何将颜色转换为 HSL

使用本工具转换颜色只需一秒钟，且完全在浏览器中完成，无需上传、无需注册、无需安装。请按以下步骤操作：

1. 拾取颜色。 使用颜色拾取器，或在 HEX 输入框中输入 6 位 HEX 代码（带或不带 #）。
2. 查看结果。 H、S、L 数值会实时更新，hsl() 字符串和预览色块也会同步刷新。
3. 复制 HSL。 点击"复制 HSL"按钮复制 hsl(h, s%, l%) 字符串，然后粘贴到 CSS、设计工具或文档中。

由于所有步骤都通过 JavaScript 在浏览器本地运行，您的颜色选择永远不会上传到服务器。这使转换完全私密且即时。