RGBA는 Red(빨강), Green(초록), Blue(파랑), Alpha(알파)의 약자로, CSS3에서 색상을 표현하는 강력한 방식입니다. 여기서 Alpha는 색상의 불투명도(opacity)를 의미하며, 0.0부터 1.0 사이의 숫자로 지정합니다.
Alpha 값이 1.0이면 완전히 불투명한 상태가 되고, 값이 작아질수록 점점 투명해집니다. 즉, 0.5는 반투명, 0.0에 가까울수록 거의 완전히 투명한 상태가 됩니다.
아래 이미지에서 Alpha 매개변수 값에 따라 동일한 색상이라도 투명도가 어떻게 달라지는지 확인할 수 있습니다.
RGBA 기본 문법
rgba(red, green, blue, alpha)
- red, green, blue: 각각 0~255 범위의 정수 또는 백분율(%)로 지정합니다.
- alpha: 0.0(완전 투명) ~ 1.0(완전 불투명) 사이의 소수 값입니다.
예제 코드
이제 RGBA 색상 값을 활용한 실제 예제를 살펴보겠습니다. 동일한 RGB 값(108, 111, 35)에 서로 다른 알파 값을 적용하여 투명도의 변화를 비교합니다.
<!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>크리켓 선수</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>실행 결과
위 코드를 실행하면 같은 초록빛 계열의 배경색이지만, 알파 값이 0.6에서 0.1로 낮아질수록 배경이 점점 더 투명해지는 것을 확인할 수 있습니다.
정리
RGBA 색상 값은 배경색, 텍스트 색상, 테두리 등 다양한 CSS 속성에 적용할 수 있으며, 특히 오버레이 효과나 반투명 UI 요소를 만들 때 유용하게 사용됩니다. HEX나 RGB만으로는 표현할 수 없는 투명도 제어가 가능하다는 점이 가장 큰 장점입니다.