ຫົວຫຍັງ CSS hsl()

ການກໍານົດ ແລະ ການນໍາໃຊ້

CSS ຂອງ: hsl() ຫົວຫຍັງນີ້ໃຊ້ກົນລະບົບສີ-ຄວາມຫວັງ-ຄວາມສົນເສຍ (HSL) ເພື່ອກຳນົດສີ. ຍັງສາມາດເພີ່ມສະມາຊິກ alpha (ສະແດງຄວາມແປກກະພາບສີ) ໄດ້.

ຄວາມແນະນຳ:HSL ມີຄວາມໝາຍຄວາມສະຫວັນ (Hue), ຄວາມຫວັງ (Saturation) ແລະ ຄວາມສົນເສຍ (Lightness), ມີຄວາມສະແດງສີໃນພາບສະຫວັນສີຫວັງ.

ຄວາມເຫັນ:hsla() ຫົວຫຍັງນີ້ແມ່ນ: hsl() ຫົວຫຍັງອື່ນຂອງຫົວຫຍັງ. ສະເໜີທີ່ຈະນຳໃຊ້: hsl() ຫົວຫຍັງ.

ຄວາມຈະລະນານີ້

ຕົວຢ່າງ 1

ການສະແດງສີ HSL(A) ທີ່ຫຼາຍຫວັງ:

#p1 {background-color:hsl(120 100% 50%);} /* ສີຫວັງ */
#p2 {background-color:hsl(120 100% 75%);} /* ສີຫວັງ */
#p3 {background-color:hsl(120 100% 25%);} /* ສີຫວັງ */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* ສີຫວັງສີຫວັງ */
#p5 {background-color:hsl(120 60% 70%);} /* ສີຫວັງ */
#p6 {background-color:hsl(290 100% 50%);} /* ສີຫວັງ */
#p7 {background-color:hsl(290 60% 70%);} /* ສີຫວັດສີຫວັງ */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* ສີຫວັດສີຫວັງສີຫວັງສີຫວັງ */

亲自试一试

例子 2

使用逗号分隔值的旧语法：

#p1 {background-color:hsl(120, 100%, 50%);} /* 绿色 */
#p2 {background-color:hsl(120, 100%, 75%);} /* 浅绿色 */
#p3 {background-color:hsl(120, 100%, 25%);} /* 深绿色 */
#p4 {background-color:hsl(120, 60%, 70%);} /* 柔和的绿色 */
#p5 {background-color:hsl(290, 100%, 50%);} /* 紫色 */
#p6 {background-color:hsl(290, 60%, 70%);} /* 柔和的紫色 */

亲自试一试

CSS 语法

绝对值语法

hsl(hue saturation lightness / A)
值 描述
hue 必需。定义色轮上的度数（从 0 到 360）- 0（或 360）是红色，120 是绿色，240 是蓝色。
saturation

必需。定义颜色的饱和度；0% 是灰色，100% 是全色（全饱和度）。

也可以使用 None（与 0% 相同）。
lightness

必需。定义颜色的亮度；0% 是黑色，50% 是正常，100% 是白色。

也可以使用 None（与 0% 相同）。
/ A

可选。表示颜色的 alpha 通道值（从 0%（或 0）- 完全透明到 100%（或 100）- 完全不透明）。

ກໍ່ສາມາດໃຊ້ None (ສະແດງວ່າບໍ່ມີ alpha 通道).

ຄູ່ກະທັ້ງແມ່ນ 100%.

相对值语法

hsl(from color hue saturation lightness / A)
值 描述
from color

以关键字 from 开头，后跟一个表示原始颜色的颜色值。

这是相对颜色所基于的原始颜色。
hue 必需。定义色轮上的度数（从 0 到 360）- 0（或 360）是红色，120 是绿色，240 是蓝色。
saturation

必需。定义颜色的饱和度；0% 是灰色，100% 是全色（全饱和度）。

也可以使用 None（与 0% 相同）。
lightness

必需。定义颜色的亮度；0% 是黑色，50% 是正常，100% 是白色。

也可以使用 None（与 0% 相同）。
/ A

可选。表示颜色的 alpha 通道值（从 0%（或 0）- 完全透明到 100%（或 100）- 完全不透明）。

ກໍ່ສາມາດໃຊ້ None (ສະແດງວ່າບໍ່ມີ alpha 通道).

ຄູ່ກະທັ້ງແມ່ນ 100%.

ລາຍລະອຽດດ້ານເຕັກນິກ

ສະຖານະ: CSS3

ການສະໜັບສະໜູນບັນຊີບັນນາທິການ

ຈຳນວນທີ່ຢູ່ໃນຕາລະບັນເວັບໄຊແມ່ນການສະໜັບສະໜູນກອນສະພາບນີ້ໃນບັນຊີທໍາອິດທີ່ສະໜັບສະໜູນຄັດພະຍາຍາມ.

Chrome Edge Firefox Safari Opera
hsl()
1 9 1 3.1 9.5
ທີ່ມີ alpha ກອງປະສົມ hsl()
65 79 52 12.1 52
ຕາມການແຍກຄຳປະສົມ
65 79 52 12.1 52

ບັນຊີກ່ວາງ:

ການສອນ:ສະພາບສີ HSL CSS

参考：ການຄົ້ນຫາຄູ່ມື CSS ການສະແດງສີ

参考：ກອນສະພາບ CSS hwb()

参考：ກອນສະພາບ CSS lab()

参考：ກອນສະພາບ CSS lch()

参考：CSS oklab() 函数

参考：CSS oklch() 函数