CSS에서 색조-채도-명도 모델(HSL)에 투명도까지 더해 색상을 정의하고 싶다면 hsla() 함수를 사용하면 됩니다. HSLA는 기존 HSL에 마지막 매개변수로 알파(Alpha, 투명도) 값을 추가한 형태입니다.
HSLA의 구성 요소
- 색조(Hue) : 0~360도 사이의 각도 값으로 색상환에서의 위치를 나타냅니다. 0은 빨강, 120은 초록, 240은 파랑입니다.
- 채도(Saturation) : 0%는 무채색(회색), 100%는 가장 선명한 순수한 색을 의미합니다.
- 명도(Lightness) : 0%는 검정, 50%는 순수한 색, 100%는 흰색입니다.
- 알파(Alpha) : 0은 완전히 투명, 1은 완전히 불투명을 의미하며 그 사이 값으로 반투명 효과를 줄 수 있습니다.
예제 코드
아래 코드를 실행하면 hsl()과 hsla() 함수가 CSS에서 어떻게 동작하는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color:hsl(0,100%,50%);
}
h2 {
background-color:hsl(192,89%,48%);
}
p {
background-color:hsla(290,100%,50%,0.3);
}
</style>
</head>
<body>
<h1>Red Background</h1>
<h2>Blue Background</h2>
<p>This is demo text!</p>
</body>
</html>코드 설명
위 예제에서 첫 번째 제목(h1)은 hsl(0,100%,50%)로 순수한 빨간색 배경이 적용됩니다. 두 번째 제목(h2)은 hsl(192,89%,48%)로 파란 계열의 배경이 지정됩니다. 문단(p) 요소에는 hsla(290,100%,50%,0.3)이 사용되었는데, 보라색 계열의 배경에 알파 값이 0.3이므로 배경이 약 30% 불투명한 반투명 상태로 표시됩니다.
이처럼 hsla() 함수를 활용하면 직관적인 색상 조절과 함께 세밀한 투명도 제어가 가능해, 오버레이 효과나 은은한 배경색 연출에 유용하게 사용할 수 있습니다.