CSS3에서는 요소의 색상을 지정할 때 HSL(Hue, Saturation, Lightness) 방식을 사용할 수 있습니다. HSL은 색조(Hue), 채도(Saturation), 명도(Lightness)의 약자로, RGB 방식보다 직관적으로 색상을 표현할 수 있다는 장점이 있습니다.
HSL의 세 가지 구성 요소
1. 색조(Hue)
색조는 색상환에서의 각도를 의미하며 0부터 360 사이의 값으로 표현됩니다. 0(또는 360)은 빨간색, 120은 초록색, 240은 파란색을 나타냅니다.
2. 채도(Saturation)
채도는 색의 선명한 정도를 백분율(%)로 나타냅니다. 0%는 무채색(회색톤)이며, 100%는 가장 순수하고 선명한 원색입니다.
3. 명도(Lightness)
명도는 색의 밝기를 백분율(%)로 표현합니다. 0%는 검정, 50%는 해당 색상의 기본 밝기, 100%는 흰색입니다.
HSL 색상 값 예제
다음은 hsl() 함수를 활용해 여러 문단의 배경색을 각각 다르게 지정하는 예제입니다. 마지막 문단에는 비교를 위해 rgba() 함수가 사용되었습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsl(150, 100%, 50%);}
#demo2 {background-color: hsl(150, 100%, 50%);}
#demo3 {background-color: hsl(140, 100%, 40%);}
#demo4 {background-color: hsl(120, 100%, 40%);}
#demo5 {background-color: hsl(120, 100%, 30%);}
#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>실행 결과
위 코드를 실행하면 각 문단마다 서로 다른 색조와 명도의 녹색 계열 배경색이 적용되어 화면에 출력됩니다. 색조 값이 150에서 120으로 낮아질수록 색이 노란빛에 가까워지고, 명도 값이 50%에서 30%로 줄어들수록 색이 어두워지는 것을 확인할 수 있습니다. 마지막 문단은 rgba() 함수로 인해 반투명한 배경색이 적용됩니다.