CSS中有一個很實用的顏色表示方式叫做HSL。

HSL即Hue（色相）、Saturation（飽和度）、Lightness（亮度）三個參數的縮寫。

其中Hue表示色相，取值范圍是0到360度，0度表示紅色，120度表示綠色，240度表示藍色。

/* 以下是hsl顏色表示法的示例 */
color: hsl(0, 100%, 50%);  /* 紅色 */
color:hsl(120, 100%, 50%); /* 綠色 */
color:hsl(240, 100%, 50%); /* 藍色 */

Saturation表示飽和度，取值范圍是0%到100%，0%表示無色，100%表示鮮艷的顏色。

/* 以下是hsl顏色表示法的示例 */
color:hsl(0, 0%, 50%);    /* 灰色 */
color:hsl(0, 100%, 50%);  /* 紅色 */

Lightness表示亮度，取值范圍是0%到100%，0%表示黑色，100%表示白色。

/* 以下是hsl顏色表示法的示例 */
color:hsl(0, 0%, 0%);     /* 黑色 */
color:hsl(0, 0%, 100%);   /* 白色 */

除了通過hsl()函數設置顏色，也可以通過hsla()函數設置顏色及透明度。

/* 以下是hsla顏色表示法的示例 */
color: hsla(0, 100%, 50%, 0.4); /* 紅色，透明度40% */
color: hsla(120, 100%, 50%, 0.4); /* 綠色，透明度40% */
color: hsla(240, 100%, 50%, 0.4); /* 藍色，透明度40% */

以上就是HSL顏色表示法的基本介紹及示例。