编辑“︁CSS HSL颜色”︁（章节）

= CSS HSL颜色 =

HSL（Hue, Saturation, Lightness）是一种在CSS中定义颜色的方法，它通过色相、饱和度和亮度三个参数来直观地描述颜色。与十六进制（HEX）和RGB（Red, Green, Blue）颜色模型相比，HSL更符合人类对颜色的感知方式，便于调整颜色的明暗和鲜艳程度。

== 基本概念 ==
HSL颜色由以下三个分量组成：
* '''色相（Hue）'''：表示颜色的基本色调，取值范围是0°到360°，对应色轮上的角度。例如：
  * 0°或360°为红色
  * 120°为绿色
  * 240°为蓝色
* '''饱和度（Saturation）'''：表示颜色的鲜艳程度，取值范围是0%到100%。0%表示灰色，100%表示完全饱和的颜色。
* '''亮度（Lightness）'''：表示颜色的明暗程度，取值范围是0%到100%。0%为黑色，100%为白色，50%为颜色最纯的状态。

=== 数学表示 ===
HSL颜色可以用数学公式表示为：
<math>\text{HSL}(H, S\%, L\%)</math>
其中：
* <math>H \in [0, 360]</math>
* <math>S \in [0, 100]</math>
* <math>L \in [0, 100]</math>

== 语法与示例 ==
在CSS中，HSL颜色可以使用以下语法定义：
<syntaxhighlight lang="css">
/* 基本语法 */
color: hsl(H, S%, L%);
/* 带透明度（HSLA） */
color: hsla(H, S%, L%, A);
</syntaxhighlight>

=== 基础示例 ===
以下代码展示了如何使用HSL定义不同颜色：
<syntaxhighlight lang="css">
/* 纯红色 */
.color-red {
  color: hsl(0, 100%, 50%);
}

/* 淡蓝色 */
.color-light-blue {
  color: hsl(240, 100%, 80%);
}

/* 半透明绿色 */
.color-transparent-green {
  color: hsla(120, 100%, 50%, 0.5);
}
</syntaxhighlight>

=== 输出效果 ===
{| class="wikitable"
|-
! 类名 !! 效果
|-
| <code>.color-red</code> || <span style="color:hsl(0,100%,50%);">红色文本</span>
|-
| <code>.color-light-blue</code> || <span style="color:hsl(240,100%,80%);">淡蓝色文本</span>
|-
| <code>.color-transparent-green</code> || <span style="color:hsla(120,100%,50%,0.5); background:#ddd;">半透明绿色文本</span>
|}

== 色轮可视化 ==
以下Mermaid图表展示了HSL色轮的基本结构：
<mermaid>
pie showData
    title HSL色相（Hue）分布
    "0°-60°: 红-黄" : 60
    "60°-120°: 黄-绿" : 60
    "120°-180°: 绿-青" : 60
    "180°-240°: 青-蓝" : 60
    "240°-300°: 蓝-紫" : 60
    "300°-360°: 紫-红" : 60
</mermaid>

== 实际应用场景 ==
HSL颜色模型特别适合需要动态调整颜色的场景，例如：

=== 1. 主题切换 ===
通过调整亮度（L）可以轻松实现深色/浅色模式切换：
<syntaxhighlight lang="css">
:root {
  --primary-hue: 200;
  --primary-saturation: 100%;
}
.light-theme {
  --primary-lightness: 70%;
}
.dark-theme {
  --primary-lightness: 30%;
}

.button {
  background-color: hsl(
    var(--primary-hue),
    var(--primary-saturation),
    var(--primary-lightness)
  );
}
</syntaxhighlight>

=== 2. 悬停效果 ===
通过微调色相或饱和度创建交互效果：
<syntaxhighlight lang="css">
.button {
  background-color: hsl(180, 80%, 50%);
  transition: background-color 0.3s;
}
.button:hover {
  background-color: hsl(180, 100%, 60%);
}
</syntaxhighlight>

=== 3. 数据可视化 ===
使用HSL创建有规律的色阶：
<syntaxhighlight lang="javascript">
// 生成10个色相相同但亮度渐变的颜色
const colors = [];
for (let i = 0; i < 10; i++) {
  colors.push(`hsl(260, 80%, ${50 + i * 3}%)`);
}
</syntaxhighlight>

== 与其他颜色模型的比较 ==
{| class="wikitable"
|-
! 模型 !! 优点 !! 缺点
|-
| HSL || 直观易调整，适合动态修改 || 不直接对应显示器的RGB子像素
|-
| RGB || 精确控制，直接对应硬件 || 不易理解颜色关系
|-
| HEX || 简洁，兼容性好 || 难以直接调整颜色属性
|}

== 高级技巧 ==
=== 色彩调和 ===
使用HSL可以轻松创建协调的配色方案：
* '''类似色'''：色相差30°内的颜色
* '''互补色'''：色相差180°的颜色
* '''三色组'''：色相差120°的三种颜色

=== 亮度校正 ===
人眼对不同颜色的亮度感知不同，可以使用公式校正：
<math>
L_{\text{perceived}} = 0.2126 \times R + 0.7152 \times G + 0.0722 \times B
</math>

== 浏览器支持 ==
HSL颜色被所有现代浏览器支持，包括：
* Chrome 1+
* Firefox 1+
* Safari 3.1+
* Edge 12+
* Opera 9.5+

== 总结 ==
HSL颜色模型为CSS开发者提供了：
* 更直观的颜色定义方式
* 方便的亮度/饱和度调整
* 动态颜色操作能力
* 协调配色方案创建能力

掌握HSL将使您能够更高效地处理网页设计中的颜色需求，特别是在需要程序化生成或修改颜色的场景中。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS颜色与背景]]