CSS HSL 색상

HSL 값

CSS에서는 색상을 톤, 채도, 밝기（HSL）로 지정할 수 있습니다. 다음과 같은 형식으로 지정됩니다：

hsla(hue, saturation, lightness)

색상（hue）는 색상 원의 0에서 360의 도수입니다. 0은 빨간색, 120는 녹색, 240는 파란색입니다。

채도（saturation）는 백분율 값입니다. 0％는 회색 그림자를 의미하며, 100％는 전면 색상입니다。

밝기（lightness）도 백분율입니다. 0％는 검은색, 50％는 어둡지 않고 밝지 않음, 100％는 백색입니다。

다음 HSL 값과 혼합하여 실험을 진행하세요：

　

HUE

0

SATURATION

100%

LIGHTNESS

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 색상 값은 알파 채널을 포함한 HSL 색상 값의 확장입니다 - 그 색상의 불투명도를 지정합니다。

HSLA 색상 값은 다음과 같이 지정됩니다：

hsla(hue, saturation, lightness, alpha)

alpha 파라미터는 0.0(완전 투명)과 1.0(완전 불투명) 사이의 숫자입니다:

다음 HSLA 값을 혼합하여 실험해보세요:

　

HUE

0

SATURATION

100%

LIGHTNESS

50%

ALPHA

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)

직접 시도해보세요