CSS3 RGBA, HSL, HSLA 색상 값 완벽 정리

CSS3에서는 기존의 HEX나 RGB 방식보다 더 유연하게 색상을 표현할 수 있는 다양한 색상 값을 제공합니다. 대표적으로 RGBA, HSL, HSLA가 있으며, 각각의 특징과 사용법을 예제와 함께 살펴보겠습니다.

CSS3 RGBA 색상 값이란?

RGBA는 Red(빨강), Green(초록), Blue(파랑), Alpha(알파)의 약자입니다. 앞의 세 가지 값으로 색을 지정하고, 마지막 알파 값으로 색상의 불투명도(opacity)를 조절합니다.

알파 값은 0.0부터 1.0 사이의 숫자를 사용하며, 1.0은 완전히 불투명한 상태, 0.0은 완전히 투명한 상태를 의미합니다. 아래 이미지에서 알파 매개변수 값에 따라 같은 색이라도 투명도가 달라지는 것을 확인할 수 있습니다.

RGBA 예제

알파 값을 단계별로 변경하여 배경색의 투명도 차이를 확인하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color:rgba(108,111,35,0.6);}
#demo2 {background-color:rgba(108,111,35,0.5);}
#demo3 {background-color:rgba(108,111,35,0.4);}
#demo4 {background-color:rgba(108,111,35,0.3);}
#demo5 {background-color:rgba(108,111,35,0.2);}
#demo6 {background-color:rgba(108,111,35,0.1);}
</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>

실행 결과

CSS3 RGBA, HSL, HSLA 색상 값 완벽 정리

CSS3 HSL 색상 값이란?

HSL은 요소에 색상을 지정할 때 Hue(색조), Saturation(채도), Lightness(명도)를 기준으로 색을 표현하는 방식입니다.

Hue(색조): 0~360 범위의 각도 값으로, 0 또는 360은 빨강, 120은 초록, 240은 파랑을 나타냅니다.
Saturation(채도): 색의 선명함을 백분율(%)로 표현합니다. 100%에 가까울수록 선명하고, 0%에 가까울수록 무채색이 됩니다.
Lightness(명도): 색의 밝기를 백분율(%)로 표현합니다. 0%는 검정, 100%는 흰색입니다.

HSL 예제

색조와 명도 값을 변경하면서 배경색이 어떻게 달라지는지 확인해 보겠습니다.

<!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>

실행 결과

CSS3 RGBA, HSL, HSLA 색상 값 완벽 정리

CSS3 HSLA 색상 값이란?

HSLA는 HSL 방식에 Alpha(알파)가 추가된 형태로, Hue(색조), Saturation(채도), Lightness(명도), Alpha(불투명도) 네 가지 값을 사용합니다.

알파 값 역시 0.0~1.0 사이의 숫자이며, 0.0은 완전히 투명한 상태, 1.0은 완전히 불투명한 상태를 의미합니다. RGBA와 마찬가지로 반투명 배경이나 오버레이 효과를 만들 때 유용하게 활용됩니다.

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>

실행 결과

CSS3 RGBA, HSL, HSLA 색상 값 완벽 정리

마무리

RGBA는 RGB 색상에 투명도를 더한 방식이고, HSL은 색조·채도·명도를 기반으로 직관적으로 색을 조합할 수 있는 방식입니다. 여기에 알파 값을 추가한 HSLA를 활용하면 반투명 효과까지 손쉽게 구현할 수 있습니다. 상황에 맞게 이 세 가지 색상 값을 적절히 활용하면 더욱 세련된 웹 디자인을 완성할 수 있습니다.