HTML 색조, 채도, 명도(HSL) 색상

HSL은 색조(Hue), 채도(Saturation), 명도(Lightness)를 나타낸다.

HSLA 색상 값은 알파 채널(불투명도)을 가진 HSL의 확장이다.

 

HTML HSL 색상

HTML 색상은 색조, 채도 및 명도(HSL)를 사용하여 다음과 같은 형식으로 지정할 수 있다:

hsl(hue, saturation, lightness)

색조는 0에서 360도까지의 색상값을 가진다. 0은 빨간색, 120은 녹색, 240은 파란색이다.
채도는 백분율 값이다. 0%는 회색의 색조를 의미하며, 100%는 전체 색상이다.
명도는 백분율 값이다. 0%는 검은색이고 100%는 흰색이다.

아래의 HSL 값을 혼합하여 예제이다:

HTML 색조채도명도(HSL) 색상값 예

 

HTML 채도(Saturation)

채도는 색상의 강도로 설명할 수 있다.

 

100%는 회색 음영이 없는 순수한 색상이다.
50%는 50%가 회색이지만 색상을 볼 수 있다.
0%는 완전히 회색이므로 더 이상 색상을 볼 수 없다.

HTML HSL 색조 채도 명도 색상 예제

 

HTML 명도(Lightness)

색상의 밝기는 색상에 부여할 빛의 양으로 설명할 수 있다.

여기서 0%는 빛이 없음(검은색),

            50%는 50%의 빛(어두운 색도 아니고 밝지 않음),

          100%는 완전한 밝기(흰색)를 의미한다.

HTML HSL 명도 색상 예

HTML HSL 회색 음영

회색 음영은 색상과 채도를 0으로 설정하고 밝기를 0%에서 100%로 조정하여 더 어둡게/밝게 음영을 정의하는 경우가 많다:

HTML HSL 회색 음영 색상 예

 

HTML HSLA 색상값

알파 매개 변수는 0.0(완전 투명)과 1.0(전혀 투명하지 않음) 사이의 숫자이다:

HSLA 색상 값은 다음과 같이 지정된다:

hsla(hue, saturation, lightness, alpha)

알파 매개 변수는 0.0(완전 투명)과 1.0(전혀 투명하지 않음) 사이의 숫자이다:

HTML HSLA 색상 예제

 

마무리

HTML 색상에 대해 살펴보았다. 이번 글에서는 HTML HSL과 HSLA 함수를 통해 색상을 만들어 보는 실습을 해보았다.다양한 색상으로 글자색, 배경색, 윤곽선색 등을 설정해보며 함수를 익숙하게 하는 것에 도움이 될 것이다.

 

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.