CSS의 rgb() 함수는 빨강(Red), 초록(Green), 파랑(Blue) 세 가지 색상 채널의 값을 조합하여 원하는 색상을 정의하는 함수입니다. 각 채널은 0부터 255 사이의 정수 또는 백분율로 표현할 수 있으며, 이 세 값을 조합하면 약 1,670만 가지의 다양한 색상을 표현할 수 있습니다.
rgb() 함수의 기본 문법
기본 문법은 다음과 같습니다. 각 자리에 해당 색상 채널의 강도를 순서대로 입력합니다.
rgb(red, green, blue) /* 예시 */ rgb(255, 0, 0); /* 순수한 빨간색 */ rgb(0, 0, 255); /* 순수한 파란색 */ rgb(255, 255, 255); /* 흰색 */
실전 예제
아래 코드는 rgb() 함수와 hsl() 함수를 함께 활용하여 제목과 단락 요소의 배경색 및 글자색을 지정하는 방법을 보여줍니다. 직접 실행해 결과를 확인해 보세요.
<!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>Red Background</h1>
<h2>Blue Background</h2>
<p>This is demo text!</p>
</body>
</html>
코드 설명
- h1 요소: hsl(0, 100%, 50%)을 사용하여 빨간색 배경을 적용했습니다.
- h2 요소: hsl(192, 89%, 48%)을 사용하여 청록색에 가까운 파란색 배경을 적용했습니다.
- p 요소: rgb(0, 0, 255)로 파란색 배경을 지정하고, rgb(255, 255, 255)로 흰색 글자색을 지정하여 가독성을 높였습니다.
참고 사항
rgb() 함수에는 네 번째 값으로 알파 채널(투명도)을 추가할 수도 있습니다. 예를 들어 rgba(0, 0, 255, 0.5)처럼 작성하면 50% 투명한 파란색이 됩니다. 최신 CSS에서는 rgb(0 0 255 / 0.5) 형태의 공백 구문(space-separated syntax)도 지원되므로 상황에 맞게 활용하면 좋습니다.