HSLA 색상 값이란?
CSS3에서 지원하는 HSLA 색상 값은 색조(Hue), 채도(Saturation), 명도(Lightness), 알파(Alpha)의 네 가지 요소를 사용해 색상을 표현하는 방식입니다. 여기서 알파(Alpha)는 색상의 불투명도(opacity)를 의미하며, 0.0부터 1.0 사이의 숫자로 지정합니다. 0.0은 완전히 투명한 상태를, 1.0은 완전히 불투명한 상태를 나타냅니다.
HSLA의 구성 요소
- 색조(Hue): 0~360도 사이의 각도 값으로 색상환에서의 위치를 나타냅니다. 0은 빨강, 120은 초록, 240은 파랑에 해당합니다.
- 채도(Saturation): 0%~100% 사이의 백분율 값으로, 0%는 무채색(회색 톤), 100%는 가장 선명하고 순수한 색을 의미합니다.
- 명도(Lightness): 0%~100% 사이의 백분율 값으로, 0%는 검정, 50%는 원래 색상, 100%는 흰색입니다.
- 알파(Alpha): 색상의 투명도를 결정하며, 0.0(완전 투명)부터 1.0(완전 불투명) 사이의 값을 가집니다.
HSLA 사용 예제
아래 예제는 서로 다른 색조와 알파 값을 적용하여 배경색의 투명도를 단계적으로 조절하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {background-color:rgba(108,111,35,0.6);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>실행 결과
위 코드를 실행하면 각 문단마다 다른 색조와 알파 값이 적용된 배경색이 나타납니다. demo1부터 demo4까지는 알파 값이 0.8, 0.6, 0.4, 0.3으로 점점 낮아져 배경이 점차 투명해지는 것을 확인할 수 있으며, demo5는 알파가 없는 일반 HSL 값, demo6은 RGBA 값으로 표현한 비교 예제입니다.
HSLA를 활용하면 직관적으로 색상을 조정하면서 동시에 투명도까지 세밀하게 제어할 수 있어, 오버레이 효과나 반투명 배경 디자인에 특히 유용합니다.