CSS hsl() 함수형 표기: HSL 색 구문

Baseline넓은 지원

모든 주요 브라우저가 지원하는 기능입니다.

hsl() 함수형 표기는 sRGB 색공간의 색을 색상(hue), 채도(saturation), 명도(lightness) 성분으로 표현합니다. 선택적으로 알파 성분이 색의 투명도를 나타냅니다.

hsla() 함수형 표기는 hsl()의 별칭으로서 서로 완전히 동일합니다. hsl()을 사용하는 걸 권장합니다.

#color {
  background-color: hsl(50 100 50);
  /* background-color: hsl(150deg 30% 40%); */
  /* background-color: hsl(0.2turn 60% 50% / 0.7); */
  /* background-color: hsl(120grad 100% 50% / 25%); */
}

#color {
  width: 100px;
  height: 100px;
}

<div id="color"></div>

불러오는 중...

구문

/* 절대 값 */
hsl(120deg 75% 25%)
hsl(120 75 25) /* 색상의 deg, 채도와 명도의 % 단위는 선택사항 */
hsl(120deg 75% 25% / 60%)
hsl(none 75% 25%)

/* 상대 값 */
hsl(from green h s l / 0.5)
hsl(from #0000FF h s calc(l + 20))
hsl(from rgb(200 0 0) calc(h + 30) s calc(l + 30))

/* 구형 'hsla()' 별칭 */
hsla(120deg 75% 25% / 60%)

/* 구형 구문 */
hsl(120, 75%, 25%)
hsl(120deg, 75%, 25%, 0.8)

hsl()/hsla()의 값을 쉼표로 구분하는 건 구형 구문입니다. 구형 구문에서는 none 값을 사용할 수 없고, 색상 성분의 deg 단위는 선택사항이며, 채도와 명도의 % 단위는 필수입니다.

값

절대 값 구문

hsl(H S L[ / A])

H

색의 색상(<hue>) 각도를 나타내는 <number>, <angle>, 또는 키워드 none (0deg와 같음)입니다.

주어진 색상 각도가 가리키는 색은 sRGB(hsl(), hwb()), CIELAB(lch()), Oklab(oklch()) 색 공간에서 모두 다릅니다. <hue> 문서에서 자세한 정보를 확인하세요.

S

색의 채도를 나타내는 <percentage> 또는 키워드 none (0%와 같음) 값입니다. 100%는 포화색, 0%는 무채색(회색)입니다.

L

색의 밝기를 나타내는 <percentage> 또는 키워드 none (0%와 같음) 값입니다. 100%는 흰색, 0%는 검은색, 50%는 “일반” 색입니다.

A (선택사항)

색의 알파 채널을 나타내는 <alpha-value> 값입니다. 0은 0% (완전 투명), 1은 100% (완전 불투명)입니다. none을 사용해 알파 채널이 없음을 명시할 수도 있습니다.

A 값을 생략하면 100%와 같습니다. 생략하지 않을 경우 앞의 세 값과 /로 구분해야 합니다.

hsl() 절대 값은 rgb() 값으로 직렬화됩니다. 직렬화 과정에서 빨강, 초록, 파랑 성분이 반올림될 수 있습니다.

상대 값 구문

hsl(from <color> H S L[ / A])

from <color>

상대 색의 기준색을 나타내는 <color> 값입니다. 앞의 from까지 포함해야 합니다. 기준색으로는 다른 상대색을 포함한 아무 <color> 값이나 사용할 수 있습니다.