什么是 HSL Color？
HSL Color（色相、饱和度、亮度）是一种圆柱形颜色模型，以比 RGB 更直观的方式表示颜色，便于人类理解和操作。它将颜色分为三个组成部分：色相（颜色本身）、饱和度（颜色强度）和亮度（明暗程度）。
快速了解
| 全称 | 色相饱和度亮度颜色模型 |
|---|---|
| 创建时间 | 1970 年代（HSL 模型） |
| 规范文档 | 官方规范 |
HSL Color 工作原理
HSL 被设计为比 RGB 更直观的颜色选择和操作方式。色相表示为色轮上的角度（0-360°），其中 0° 是红色，120° 是绿色，240° 是蓝色。饱和度范围从 0%（灰色）到 100%（纯色）。亮度范围从 0%（黑色）到 100%（白色），50% 是纯色。HSL 使创建颜色变体变得容易——您可以通过调整亮度来使颜色变亮或变暗，或通过降低饱和度来创建柔和版本。HSLA 添加了用于透明度的 alpha 通道。
主要特点
- 色相：色轮上的颜色角度（0-360°）
- 饱和度：颜色强度（0-100%）
- 亮度：明暗程度（0-100%）
- 比 RGB 更直观的颜色选择
- 易于创建颜色变体和调色板
- HSLA 添加 alpha 通道用于透明度
常见用途
- 创建调色板和主题
- 调整颜色亮度和饱和度
- CSS 样式和主题
- 颜色选择器界面
- 生成互补色
示例
HSL 颜色示例：
颜色 HSL RGB 等效值
红色 hsl(0, 100%, 50%) rgb(255, 0, 0)
绿色 hsl(120, 100%, 50%) rgb(0, 255, 0)
蓝色 hsl(240, 100%, 50%) rgb(0, 0, 255)
黄色 hsl(60, 100%, 50%) rgb(255, 255, 0)
青色 hsl(180, 100%, 50%) rgb(0, 255, 255)
颜色变体（相同色相）：
hsl(0, 100%, 25%) /* 深红色 */
hsl(0, 100%, 50%) /* 纯红色 */
hsl(0, 100%, 75%) /* 浅红色 */
hsl(0, 50%, 50%) /* 低饱和红色 */
hsl(0, 0%, 50%) /* 灰色 */
CSS 用法：
.element {
color: hsl(210, 100%, 50%);
background: hsla(0, 100%, 50%, 0.5);
}
色轮：
0° = 红色
60° = 黄色
120° = 绿色
180° = 青色
240° = 蓝色
300° = 品红