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

선택 사항입니다. 색상의 알파 채널 값(0%(또는 0)에서 완전 투명까지, 100%(또는 100)에서 완전 불투명까지)

None(알파 채널이 없음을 의미)를 사용할 수도 있습니다.

기본 값은 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

선택 사항입니다. 색상의 알파 채널 값(0%(또는 0)에서 완전 투명까지, 100%(또는 100)에서 완전 불투명까지)

None(알파 채널이 없음을 의미)를 사용할 수도 있습니다.

기본 값은 100%입니다.

기술 세부 사항

版本： CSS3

浏览器支持

표中的数字表示首个完全支持该函数的浏览器版本。

크롬 에지 파이어폭스 사파리 오페라
hsl()
1 9 1 3.1 9.5
닫는 alpha 매개변수의 hsl()
65 79 52 12.1 52
공백으로 구분된 매개변수
65 79 52 12.1 52

관련 페이지

教程：CSS HSL 색상

참조:CSS 색상

참조:CSS hwb() 함수

참조:CSS lab() 함수

참조:CSS lch() 함수

참조:CSS oklab() 함수

참조:CSS oklch() 함수