CSS에서는 rgb() 함수를 사용하여 Red-Green-Blue(RGB) 색상 모델 기반으로 색상을 정의할 수 있습니다. RGB 모델은 빨강(Red), 초록(Green), 파랑(Blue) 세 가지 광원의 강도를 조합하여 다양한 색상을 표현하는 방식으로, 각 채널 값은 0부터 255 사이의 정수로 지정합니다.
예를 들어 rgb(255,0,0)은 순수한 빨간색, rgb(0,255,0)은 초록색, rgb(0,0,255)는 파란색을 나타냅니다. 세 값이 모두 255이면 흰색, 모두 0이면 검정색이 됩니다.
RGB 색상 적용 예제
아래 예제 코드를 실행하면 h1 요소에는 빨간색 배경, h2 요소에는 파란색 배경이 적용되고, p 요소에는 파란색 배경에 흰색 글자가 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color:hsl(0,100%,50%);
}
h2 {
background-color:hsl(192,89%,48%);
}
p {
background-color:rgb(0,0,255);
color: rgb(255,255,255);
}
</style>
</head>
<body>
<h1>빨간색 배경</h1>
<h2>파란색 배경</h2>
<p>데모 텍스트입니다!</p>
</body>
</html>코드 설명
- h1 요소: HSL 색상 모델인
hsl(0,100%,50%)을 사용하여 빨간색 배경을 지정했습니다. - h2 요소:
hsl(192,89%,48%)로 청록색 계열의 파란색 배경을 지정했습니다. - p 요소:
rgb(0,0,255)로 파란색 배경을,rgb(255,255,255)로 흰색 글자색을 지정하여 가독성을 높였습니다.
이처럼 CSS에서는 rgb() 함수 외에도 hsl(), HEX 코드, 색상 이름 등 다양한 방식으로 색상을 정의할 수 있으며, 상황에 맞게 선택하여 사용하면 됩니다.