CSS에서 hsl() 함수를 사용하면 색조(Hue)-채도(Saturation)-명도(Lightness) 모델을 기반으로 직관적으로 색상을 정의할 수 있습니다. RGB 방식보다 각 값이 색상에 미치는 영향을 쉽게 파악할 수 있어, 디자인 의도에 맞는 색 조정이 훨씬 편리합니다.
HSL의 세 가지 구성 요소
hsl() 함수는 다음과 같은 형식으로 작성됩니다.
hsl(색조, 채도, 명도)
- 색조(Hue): 0~360도 사이의 각도 값으로 색상환에서의 위치를 나타냅니다. 0은 빨강, 120은 초록, 240은 파랑입니다.
- 채도(Saturation): 백분율(%)로 표현되며, 0%는 무채색(회색조), 100%는 가장 선명한 순수한 색입니다.
- 명도(Lightness): 백분율(%)로 표현되며, 0%는 검정, 50%는 기본 색상, 100%는 흰색입니다.
예제 코드
아래 예제는 hsl() 함수를 사용해 제목 요소의 배경색을 빨강과 파랑으로 지정하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: hsl(0, 100%, 50%);
}
h2 {
background-color: hsl(192, 89%, 48%);
}
</style>
</head>
<body>
<h1>빨간색 배경</h1>
<h2>파란색 배경</h2>
</body>
</html>코드 설명
hsl(0, 100%, 50%)은 색조 0도(빨강), 채도 100%(가장 선명함), 명도 50%(기본 밝기)를 의미하므로 순수한 빨간색이 됩니다. 반면 hsl(192, 89%, 48%)은 청록에 가까운 파란색 계열을 나타냅니다.
투명도까지 지정하고 싶다면?
색상에 알파(투명도)를 추가하려면 hsla() 함수를 사용하세요. 네 번째 인자로 0(완전 투명)~1(완전 불투명) 사이의 값을 전달합니다.
background-color: hsla(192, 89%, 48%, 0.5);
HSL 모델을 활용하면 같은 색조에서 명도나 채도만 미세하게 조절하여 통일감 있는 색상 팔레트를 손쉽게 만들 수 있습니다.