Web前端

现代 CSS 颜色体系：彻底掌握 HSL 与 HSLA 色彩模型

1 min read

在 Web 开发中，相比于十六进制（#3498db）和 RGB（rgb(52, 152, 219)），HSL（色相、饱和度、亮度） 是最符合人类直觉与设计系统变量构建的色彩模型。本文介绍 HSL 的核心参数与主题配色应用。

一、 HSL 三要素解析

  • H（Hue 色相）： 0 ~ 360 度的色相环角度（0°为红，120°为绿，240°为蓝）；
  • S（Saturation 饱和度）： 0% ~ 100%（0%为纯灰，100%为最鲜艳色彩）；
  • L（Lightness 亮度）： 0% ~ 100%（0%为纯黑，50%为标准色，100%为纯白）；
  • A（Alpha 透明度）： 0 ~ 1。

二、 主题设计系统中的神级优势

:root {
    --primary-h: 210;
    --primary-s: 100%;
    
    /* 轻松衍生各种状态色，无需重新取色 */
    --color-primary: hsl(var(--primary-h), var(--primary-s), 50%);
    --color-primary-hover: hsl(var(--primary-h), var(--primary-s), 40%); /* 加深 */
    --color-primary-light: hsl(var(--primary-h), var(--primary-s), 95%); /* 浅底色 */
}
#Web前端