CSS3에서 색상을 지정하는 방법 중 하나인 HSLA는 Hue(색조), Saturation(채도), Lightness(명도), Alpha(알파)의 약자입니다. RGBA가 빨강·초록·파랑 값에 알파를 더한 방식이라면, HSLA는 사람이 직관적으로 이해하기 쉬운 색조·채도·명도 기반으로 색상을 표현하면서 마지막에 투명도(opacity)까지 함께 지정할 수 있는 방식입니다.
HSLA의 구성 요소
- Hue(색조): 0~360도 사이의 각도 값으로 색상환에서의 위치를 나타냅니다. 예를 들어 0은 빨강, 120은 초록, 240은 파랑입니다.
- Saturation(채도): 백분율(%)로 표현하며, 0%는 무채색(회색), 100%는 가장 선명한 순수한 색입니다.
- Lightness(명도): 백분율(%)로 표현하며, 0%는 검정, 50%는 순수한 색, 100%는 흰색입니다.
- Alpha(알파): 0.0(완전히 투명)부터 1.0(완전히 불투명) 사이의 값으로 요소의 투명도를 결정합니다.
사용 문법
hsla(hue, saturation%, lightness%, alpha)
예제 코드
다음 예제는 같은 초록 계열의 색조(120)를 사용하면서 명도와 알파 값을 다르게 적용하여 배경색을 지정하는 방법을 보여줍니다.
<html>
<head>
<style>
#d1 {background-color:hsla(120,100%,50%,0.3);}
#d2 {background-color:hsla(120,100%,75%,0.3);}
#d3 {background-color:hsla(120,100%,25%,0.3);}
</style>
</head>
<body>
<p>HSLA 색상:</p>
<p id = "d1">낮은 명도의 초록</p>
<p id = "d2">높은 명도의 초록</p>
<p id = "d3">어두운 초록</p>
</body>
</html>실행 결과 설명
위 코드를 실행하면 세 개의 단락(p 태그)이 서로 다른 느낌의 초록색 배경을 가지게 됩니다.
#d1: 명도 50%의 표준적인 초록에 알파 0.3을 적용해 반투명하게 표현됩니다.#d2: 명도 75%로 밝기를 높여 연하고 부드러운 연두색 느낌을 줍니다.#d3: 명도 25%로 어둡게 하여 깊이감 있는 진한 초록으로 표현됩니다.
세 요소 모두 알파 값이 0.3이므로 배경이 비치는 반투명 상태라는 점이 동일합니다. 이처럼 HSLA를 활용하면 색조는 유지하면서 명도와 투명도만 자유롭게 조절할 수 있어, 디자인 일관성을 유지하며 다양한 색상 변형을 만들 때 매우 유용합니다.
HSLA 사용 시 장점
- 직관적인 색상 조정: RGB보다 색조·채도·명도 개념이 디자이너에게 익숙하여 의도한 색을 쉽게 찾을 수 있습니다.
- 간편한 투명도 제어: 별도의 opacity 속성 없이 색상 자체에 투명도를 포함시킬 수 있습니다.
- 팔레트 생성 용이: 동일한 색조에서 명도만 변경해 밝기 단계별 색상 팔레트를 손쉽게 만들 수 있습니다.