CSS3에서는 RGB, RGBA, HSL, HSLA 네 가지 방식으로 색상을 정의할 수 있습니다. 여기에 더해 기존의 색상 이름(color value)과 16진수(hexadecimal) 값 역시 그대로 사용할 수 있어, 상황에 맞게 다양한 표기법을 선택할 수 있습니다.
RGBA – 알파(투명도)가 추가된 RGB
RGBA는 Red(빨강), Green(초록), Blue(파랑)에 Alpha(알파)를 더한 색상 표기법입니다. 알파 값은 색상의 불투명도(opacity)를 나타내며, 0.0부터 1.0 사이의 숫자로 지정합니다. 1.0은 완전히 불투명한 상태, 0.0은 완전히 투명한 상태를 의미합니다.
아래 예제에서는 동일한 RGB 값에 알파 값을 0.6에서 0.1까지 단계적으로 낮추어, 배경색이 점점 투명해지는 차이를 확인할 수 있습니다.
예제
<!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>
실행 결과
HSL – 색조·채도·명도로 색상 표현하기
HSL은 Hue(색조), Saturation(채도), Lightness(명도)의 약자로, 요소의 색상을 직관적인 세 가지 속성으로 표현하는 방식입니다. 색조(Hue) 값은 0~360도 범위에서 지정하며, 0 또는 360은 빨강, 120은 초록, 240은 파랑에 해당합니다. 채도(Saturation)와 명도(Lightness)는 백분율(%) 값으로 표현하며, 채도가 높을수록 선명하고 낮을수록 무채색에 가까워집니다.
예제
<!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>
실행 결과
HSLA – 알파가 추가된 HSL
HSLA 색상 값은 HSL에 Alpha(알파)를 더한 형태로, 색조·채도·명도에 투명도까지 함께 제어할 수 있습니다. 알파 값 역시 0.0부터 1.0 사이의 숫자이며, 0.0은 완전히 투명한 상태, 1.0은 완전히 불투명한 상태를 의미합니다.
예제
<!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>
실행 결과
16진수(Hex) 값으로 색상 지정하기
마지막으로, 가장 널리 쓰이는 방식인 16진수(hexadecimal) 값으로 색상을 지정하는 방법을 살펴보겠습니다. 아래 예제에서는 배경색을 #B13838로 지정하고, 글자색은 흰색으로 설정하여 가독성 좋은 텍스트 블록을 만들었습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: justify;
text-justify: inter-word;
color: white;
background-color: #B13838;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div>
</body>
</html>
실행 결과
