什么是 HSL颜色？
HSL颜色（色相、饱和度、亮度）是一种圆柱形颜色模型，以比 RGB 更直观的方式表示颜色，便于人类理解和操作。它将颜色分为三个组成部分：色相（颜色本身）、饱和度（颜色强度）和亮度（明暗程度）。
快速了解
| 全称 | 色相饱和度亮度颜色模型 |
|---|---|
| 创建时间 | 1970 年代（HSL 模型） |
| 规范文档 | 官方规范 |
工作原理
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 样式和主题
- 颜色选择器界面
- 生成互补色
示例
Loading code...常见问题
HSL 相比 RGB 在网页设计中有什么优势？
HSL 对设计师更直观，因为它将颜色分为人类易于理解的组件：色相（哪种颜色）、饱和度（多鲜艳）和亮度（多明亮）。这使得创建颜色变体变得容易——您可以通过增加亮度来使颜色变亮，或通过降低饱和度来创建柔和色调，而无需复杂的 RGB 计算。
如何创建 HSL 颜色的深色或浅色版本？
要创建深色版本，在保持色相（H）和饱和度（S）不变的情况下降低亮度值（L）。要创建浅色版本，增加亮度。例如，hsl(200, 100%, 50%) 是鲜艳的蓝色；hsl(200, 100%, 30%) 更深，hsl(200, 100%, 70%) 更浅。亮度为 0% 时始终是黑色，100% 时始终是白色。
HSL 和 HSB/HSV 有什么区别？
HSL（色相、饱和度、亮度）和 HSB/HSV（色相、饱和度、明度/值）类似，但计算饱和度和明度的方式不同。在 HSL 中，亮度 50% 给出纯色，而在 HSB 中，明度 100% 才是。HSL 用于 CSS，而 HSB 常见于 Photoshop 等设计工具。相同的数值可能产生不同的结果。
如何将 HSL 转换为 RGB 或十六进制颜色代码？
HSL 到 RGB 的转换涉及基于色相扇区（0-360° 分为六个 60° 区段）的数学公式，并根据饱和度和亮度计算 RGB 值。在 JavaScript 中，您可以直接使用 CSS（浏览器自动转换）或使用 color.js 等库。大多数设计工具和在线转换器也可以即时执行此转换。
什么是 HSLA，什么时候应该使用它？
HSLA 在 HSL 基础上添加了用于透明度控制的 alpha 通道。语法是 hsla(色相, 饱和度%, 亮度%, alpha)，其中 alpha 范围从 0（完全透明）到 1（完全不透明）。当您需要半透明颜色时使用 HSLA，例如覆盖层、阴影或玻璃效果。现代 CSS 也接受带可选 alpha 参数的 hsl()：hsl(200 100% 50% / 0.5)。