CSS에서 hsl() 함수는 색조(Hue)-채도(Saturation)-명도(Lightness) 모델, 즉 HSL 색상 모델을 기반으로 색상을 정의할 때 사용합니다. RGB보다 직관적으로 색감을 조절할 수 있어 디자인 작업에서 널리 활용됩니다.
hsl() 함수의 매개변수
- 색조(Hue): 색상환에서의 각도를 나타내며 0~360 사이의 값입니다. 0은 빨강, 120은 초록, 240은 파랑에 해당합니다.
- 채도(Saturation): 색의 선명한 정도를 백분율(%)로 표현합니다. 0%는 무채색(회색), 100%는 가장 순수한 색입니다.
- 명도(Lightness): 색의 밝기를 백분율(%)로 표현합니다. 0%는 검정, 50%는 일반적인 색, 100%는 흰색입니다.
예제
다음 코드를 실행하면 CSS에서 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>