CSS3의 새로운 색상 속성
CSS3는 기존 CSS보다 훨씬 다양하고 정밀한 색상 표현을 가능하게 해주는 여러 가지 새로운 색상 속성을 도입했습니다. 대표적인 추가 색상 속성은 다음과 같습니다.
- RGBA 색상
- HSL 색상
- HSLA 색상
RGBA는 기존 RGB 방식에 알파(Alpha) 값, 즉 투명도를 더한 형식이며, HSLA 역시 HSL 방식에 투명도를 결합한 형식입니다. 그중에서도 이번 글에서는 HSL 색상에 대해 자세히 살펴보겠습니다.
HSL 색상이란 무엇인가?
HSL은 색조(Hue), 채도(Saturation), 명도(Lightness)의 약자입니다. 각 요소의 의미는 다음과 같습니다.
- 색조(Hue): 색상환(Color Wheel)에서의 각도를 나타내며, 0도는 빨강, 120도는 초록, 240도는 파랑에 해당합니다.
- 채도(Saturation): 색의 선명한 정도를 의미하며, 0%부터 100% 사이의 백분율 값으로 표현됩니다. 0%는 무채색(회색톤), 100%는 가장 순수하고 선명한 색입니다.
- 명도(Lightness): 색의 밝기를 의미하며, 마찬가지로 0%부터 100% 사이의 백분율 값으로 표현됩니다. 0%는 검정, 50%는 원래 색조, 100%는 흰색입니다.
HSL 색상의 기본 문법은 아래와 같습니다.
#g1 {background-color: hsl(120, 100%, 50%);}
#g2 {background-color: hsl(120, 100%, 75%);}
#g3 {background-color: hsl(120, 100%, 25%);}위 예제에서 세 요소는 모두 동일한 색조(120도, 즉 초록)와 채도(100%)를 사용하지만, 명도 값만 다르게 설정했습니다. 그 결과 #g1은 가장 표준적인 초록색, #g2는 밝은 연두 계열의 초록색, #g3은 어둡고 진한 초록색으로 표시됩니다. 이처럼 HSL을 활용하면 하나의 색조를 기준으로 명도만 조절해 자연스러운 색상 단계를 손쉽게 만들 수 있어, 디자인 작업 시 매우 유용합니다.