CSS 函数

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

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

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

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

可能的值

hsl() 函数的函数符号为 hsl(H S L[ / A]).

  • H:可以包含表示色调角度的任一格式:

    • <number>:0 到 255 之间的任何数字。

    • <angle>:0deg 到 360deg 之间的任何值。

    • keyword none

  • S:可以包含表示饱和度的任一格式:

    • <percentage>:0%（完全饱和）和 100%（完全不饱和）之间的任何值。

    • keyword none

  • L:可以包含表示亮度的任一格式:

    • <percentage>:0%（全黑）、100%（全白）和 50%（正常）之间的任何值。

    • keyword none

  • A:表示颜色的透明度。它是一个可选值。

    • <alpha-value>:0 到 1 之间的任何数字，其中 1 对应于完全不透明，0 对应于完全透明。

    • keyword 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（hue, saturation, lightness 和 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()

以下示例展示了 conic-gradient() 函数中 hsl() 函数的用法:

<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>