CSS3에서 색상을 지정하는 방법 중 하나인 HSL은 Hue(색조), Saturation(채도), Lightness(명도)의 약자입니다. HSL 방식을 사용하면 직관적으로 색상을 조절할 수 있어 웹 디자인에서 널리 활용됩니다.
HSL 구성 요소 이해하기
HSL 함수는 다음과 같은 형식으로 작성됩니다.
hsl(hue, saturation, lightness)
- 색조(Hue): 색상환에서의 각도를 의미하며 0~360도 범위의 값을 가집니다. 0은 빨강, 120은 초록, 240은 파랑을 나타냅니다.
- 채도(Saturation): 색의 선명한 정도를 나타내며 0%~100% 사이의 백분율 값입니다. 0%는 무채색(회색톤), 100%는 가장 순수하고 선명한 색입니다.
- 명도(Lightness): 색의 밝기를 나타내며 역시 0%~100% 사이의 백분율 값입니다. 0%는 검정, 50%는 기본 밝기, 100%는 흰색입니다.
예제
다음 예제는 HSL 색상 속성을 사용하여 같은 초록 계열이라도 명도에 따라 서로 다른 배경색을 표현하는 방법을 보여줍니다.
<html>
<head>
<style>
#g1 {background-color:hsl(120, 100%, 50%);}
#g2 {background-color:hsl(120,100%,75%);}
#g3 {background-color:hsl(120,100%,25%);}
</style>
</head>
<body>
<p>HSL colors:</p>
<p id = "g1">Green</p>
<p id = "g2">Normal Green</p>
<p id = "g3">Dark Green</p>
</body>
</html>예제 코드 분석
위 코드에서 세 개의 문단 요소는 모두 색조 120도(초록)와 채도 100%로 동일하지만, 명도 값만 다르게 설정되어 있습니다.
#g1: 명도 50% — 선명한 기본 초록색#g2: 명도 75% — 밝고 부드러운 연한 초록색#g3: 명도 25% — 어둡고 진한 초록색
이처럼 HSL을 활용하면 동일한 색조에서 명도와 채도만 미세하게 조정하여 자연스러운 색상 팔레트를 쉽게 만들 수 있습니다. RGB 방식보다 인간의 감각에 더 가까운 방식으로 색을 다룰 수 있다는 점이 HSL의 가장 큰 장점입니다.