CSS HSL 颜色

HSL 代表色调、饱和度和亮度。

颜色值

在 CSS 中，可以使用色调、饱和度和亮度 (HSL) 来指定颜色，格式如下：

HSL（色调,饱和,亮度）

色调是色轮上从 0 到 360 的一个度数。0 是红色，120 是绿色，240 是蓝色。

饱和度是一个百分比值。 0% 表示灰度，100% 表示全色。

亮度也是一个百分比。 0% 为黑色，50% 既不亮也不暗，100% 为白色

通过混合以下 HSL 值进行实验：

色调

0

饱和

     100% 
   

亮度

50%

示例

      hsl(0, 100%, 50%) 
    
      hsl(240, 100%, 50%) 
    
      hsl(147, 50%, 47%) 
    
      hsl(300, 76%, 72%) 
    
      hsl(39, 100%, 50%) 
    
      hsl(248, 53%, 58%)

亲自试一试 »

饱和

饱和度可以描述为颜色的强度。

100% 是纯色，没有灰色阴影。

50%是50%灰色，但你仍然可以看到颜色。

0%是完全灰色的；你再也看不到颜色了。

示例

      hsl(0, 100%, 50%) 
    
      hsl(0, 80%, 50%) 
    
      hsl(0, 60%, 50%) 
    
      hsl(0, 40%, 50%) 
    
      hsl(0, 20%, 50%) 
    
      hsl(0, 0%, 50%)

亲自试一试 »

亮度

颜色的亮度可以描述为您想要赋予该颜色多少光，其中0％表示没有光（黑色），50％表示50％光（既不暗也不亮），100％表示完全亮度（白色）。

示例

      hsl(0, 100%, 0%) 
    
      hsl(0, 100%, 25%) 
    
      hsl(0, 100%, 50%) 
    
      hsl(0, 100%, 75%) 
    
      hsl(0, 100%, 90%) 
    
      hsl(0, 100%, 100%)

亲自试一试 »

灰色阴影

灰色阴影通常通过将色调和饱和度设置为 0 来定义，并将亮度从 0% 调整到 100% 以获得更暗/更亮的阴影：

示例

      hsl(0, 0%, 0%) 
    
      hsl(0, 0%, 24%) 
    
      hsl(0, 0%, 47%) 
    
      hsl(0, 0%, 71%) 
    
      hsl(0, 0%, 94%) 
    
      hsl(0, 0%, 100%)

亲自试一试 »

HSLA 值

HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定颜色的不透明度。

HSLA 颜色值通过以下方式指定：

HSLA(色调，饱和,亮度、阿尔法）

alpha 参数是 0.0（完全透明）和 1.0（完全不透明）之间的数字：

通过混合以下 HSLA 值进行实验：

色调

0

饱和

     100% 
   

亮度

50%

0.5

示例

      hsla(9, 100%, 64%, 0) 
    
      hsla(9, 100%, 64%, 0.2) 
    
      hsla(9, 100%, 64%, 0.4) 
    
      hsla(9, 100%, 64%, 0.6) 
    
      hsla(9, 100%, 64%, 0.8) 
    
      hsla(9, 100%, 64%, 1)

亲自试一试 »