HSL은 색상, 채도 및 밝기를 나타낸다.
HSL 값
CSS에서 색상은 색상, 채도 및 밝기(HSL)를 사용하여 다음과 같은 형태로 지정할 수 있다:
hsl(hue, saturation, lightness)
색상은 0에서 360까지의 색상 휠의 도입니다. 0은 빨간색, 120은 녹색, 240은 파란색이다.
포화도는 백분율 값입니다. 0%는 회색의 색조를 의미하며, 100%는 전체 색상이다.
가벼움도 백분율이다. 0%는 검은색, 50%는 밝지도 어둡지도 않고, 100%는 흰색이다
| <!DOCTYPE html> <html> <body> <h1>HSL 값을 사용하여 색상 지정</h1> <h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2> <h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2> <h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2> <h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2> <h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2> <h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2> </body> </html> |
위의 hsl값으로 설정한 색상값의 결과는 아래 그림과 같다.
포화도(Saturation)
채도는 색상의 강도로 설명할 수 있다.
100%는 회색 음영이 없는 순수한 색상이다.
50%는 50%가 회색이지만 색상을 볼 수 있다.
0%는 완전히 회색이므로 더 이상 색상을 볼 수 없다.
| <!DOCTYPE html> <html> <body> <h1>HSL Saturation</h1> <p>hsl()의 두 번째 매개변수는 포화도를 정의합니다. 채도가 낮으면 색상이 줄어듭니다. 0%는 완전히 회색입니다:</p> <h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2> <h2 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h2> <h2 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h2> <h2 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h2> <h2 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h2> <h2 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h2> </body> </html> |
위의 hsl 포화도를 조절한 화면 결과는 아래 그림과 같다.
밝기(lightness)
색상의 밝기는 색상에 부여할 빛의 양으로 설명할 수 있다. 여기서 0%는 빛이 없음(검은색), 50%는 50%의 빛(어두운 색도 아니고 밝지 않음), 100%는 완전한 밝기(흰색)를 의미한다.
| <!DOCTYPE html> <html> <body> <h1>HSL Lightness</h1> <p>hsl()의 세 번째 매개 변수는 밝기를 정의합니다. 0%는 검은색, 100%는 흰색을 의미합니다:</p> <h2 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h2> <h2 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h2> <h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2> <h2 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h2> <h2 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h2> <h2 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h2> </body> </html> |
hsl에서 밝기값을 조절한 위의 코드 예제 결과 값은 아래 그림과 같다.
CSS HSL 회색 색상
회색 음영은 색상과 채도를 0으로 설정하여 정의하고 밝기를 0%에서 100%로 조정하여 어둡게/밝게 음영을 조정하는 경우가 많다:
| <!DOCTYPE html> <html> <body> <h1>CSS HSL 회색 색상</h1> <p>HSL에서는 채도를 0%로 설정하고 밝기를 0%에서 100%로 조정하여 회색 음영을 만듭니다:</p> <h2 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h2> <h2 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h2> <h2 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h2> <h2 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h2> <h2 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h2> <h2 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h2> </body> </html> |
CSS HSL에서 색상과 채도를 0으로 설정하면 회색값을 설정할 수 있다. 이를 활용한 예제의 결과는 아래 그림과 같다.
CSS HSLA
HSLA 색상 값은 색상의 불투명도를 지정하는 알파 채널로 HSL 색상 값을 확장한 것이다.
HSLA 색상 값은 다음과 같이 지정된다:
hsla(hue, saturation, lightness, alpha)
알파 매개 변수는 0.0(완전 투명)과 1.0(전혀 투명하지 않음) 사이의 숫자이다:
| <!DOCTYPE html> <html> <body> <h1>HSLA로 투명한 색상 만들기</h1> <h2 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h2> <h2 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h2> <h2 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h2> <h2 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h2> <h2 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h2> <h2 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h2> </body> </html> |
위의 코드를 실행한 CSS HSLA 색상값의 예제 결과는 아래 그림과 같다.
지금까지 CSS HSL, HSLA 색상값을 활용에 대해 살펴보았다.
CSS에서 색은 매우 중요하다. 많이 활용하시기를 바란다.
모두 화이팅입니다.
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > CSS문법' 카테고리의 다른 글
| CSS 배경이미지(CSS Background Image) (0) | 2023.07.07 |
|---|---|
| CSS 배경(CSS Background) (0) | 2023.07.06 |
| CSS HEX Colors (0) | 2023.07.04 |
| CSS RGB색상(CSS RGB Colors) (0) | 2023.07.03 |
| CSS 색상(CSS Colors) (0) | 2023.07.02 |
댓글