CSS 函数 - hsl()

CSS 中的 hsl() 函数用于根据颜色的色相、饱和度和亮度分量来定义颜色，这些分量基于红、绿、蓝颜色通道。它允许您通过指定这三种原色的强度来指定颜色。

要添加颜色透明度，可以向 hsl() 函数传递一个可选的 alpha 分量。

使用单个公式，可以用 hsl() 定义互补色。如果颜色的色相角为 0，则其互补色的色相角为 180deg - 0。

传统的函数 hsla() 是函数 hsl() 的别名，它们都接受相同的参数并以相同的方式运行。

可能的值

hsl() 函数的功能表示法为 hsl(H S L[ / A])。

H：可以包含以下格式之一，表示色相角
- 一个 <number>：0 到 255 之间的任何数字。
- 一个 <angle>：0deg 到 360deg 之间的任何值。
- 关键字 none
S：可以包含以下格式之一，表示饱和度
- 一个 <percentage>：0%（完全饱和）到 100%（完全不饱和）之间的任何值。
- 关键字 none
L：可以包含以下格式之一，表示亮度
- 一个 <percentage>：0%（完全黑色）、100%（完全白色）和 50%（正常）之间的任何值。
- 关键字 none
A：表示颜色的透明度。这是一个可选值。
- <alpha-value>：0 到 1 之间的任何数字，其中 1 对应于完全不透明，0 对应于完全透明。
- 关键字 none

由于函数表示法将其序列化为 sRGB，因此红、绿、蓝分量的值在序列化时会被四舍五入。

语法

hsl(60deg 25% 50%) | hsl(60deg, 25%, 50%) | hsl(60deg 25% 50% / 0.5)

CSS hsl() - 带或不带 alpha 值

以下是一个示例，显示了 hsl() 函数的使用，其中所有三个值都带有和不带 alpha 值（数字值）传递。

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   .color-hsl-nocomma{
      background-color: hsl(70deg 60% 80%);
   }
   .color-hsl-comma{
      background-color: hsl(20deg, 90%, 20%);
      color: white;
   }
   .color-hsl-alpha-number{
      background-color: hsla(20deg 80% 60% /1);
   }
   .color-hsl-alpha-percent{
      background-color: hsla(90deg 80% 60% /0.6);
   }
   </style>
</head>
<body>
   <div class="color-hsl-nocomma">hsl(70deg 60% 80%)</div>
   <div class="color-hsl-comma">hsl(20deg, 90%, 20%)</div>
   <div class="color-hsl-alpha-number">hsla(20deg 80% 60% /1)</div>
   <div class="color-hsl-alpha-percent">hsla(90deg 80% 60% /0.6)</div>
</body>
</html>

CSS hsl() - 使用“none”作为其中一个值

以下是一个示例，显示了 hsl() 函数的使用，其中一个值为 none（色相、饱和度、亮度和 alpha 值）。

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   .hsl-hue-none{
      background-color: hsl(none 60% 80%);
   }
   .hsl-sat-none{
      background-color: hsl(20deg, none, 20%);
   
   }
   .hsl-light-none{
      background-color: hsla(20deg 80% none /1);
      color: white;
   }
   .hsl-alpha-none{
      background-color: hsla(90deg 80% 60% /none);
   }
   </style>
</head>
<body>
   <div class="hsl-hue-none">hsl(none 60% 80%)</div>
   <div class="hsl-sat-none">hsl(20deg, none, 20%)</div>
   <div class="hsl-light-none">hsla(20deg 80% none /1)</div>
   <div class="hsl-alpha-none">hsla(90deg 80% 60% /none)</div>
</body>
</html>

CSS hsl() - 使用 conic-gradient()

以下是一个示例，显示了 hsl() 函数在 conic-gradient() 函数中的用法。

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   .hsl-conic{
      background: conic-gradient(hsl(270 100% 50%),
      hsl(180 100% 50%),
      hsl(0 100% 50%),
      hsl(90 100% 50%));
   }
   </style>
</head>
<body>
   <p>hsl() with conic-gradient()</p>
   <div class="hsl-conic"></div>
</body>
</html>

打印页面