웹 페이지의 배경색을 지정하거나 디자인 툴에서 색을 고를 때 항상 등장하는 값이 RGB 코드입니다. 숫자 세 개로 이루어진 이 표기법은 모니터가 색을 만들어내는 방식을 그대로 옮겨 놓은 것이라, 원리만 이해하면 색상 작업 전반이 훨씬 수월해집니다.
RGB 코드란 무엇인가
RGB는 빛의 삼원색인 빨강(Red), 초록(Green), 파랑(Blue)의 앞 글자를 딴 이름입니다. 모니터와 스마트폰 화면은 이 세 가지 빛을 각각 다른 세기로 섞어 색을 표현합니다. 물감처럼 섞을수록 어두워지는 감산혼합이 아니라, 빛을 더할수록 밝아지는 가산혼합 방식이라는 점이 핵심입니다.
각 채널은 0부터 255까지 총 256단계의 세기를 가집니다. 따라서 표현 가능한 색의 수는 256 × 256 × 256, 약 1,677만 가지가 됩니다. 흔히 말하는 24비트 트루컬러가 바로 이 범위를 가리킵니다.
rgb(0, 0, 0): 세 채널의 빛이 모두 꺼진 상태이므로 검정rgb(255, 255, 255): 세 채널이 모두 최대 세기이므로 흰색rgb(255, 0, 0): 빨강 채널만 켜진 가장 순수한 빨강rgb(128, 128, 128): 세 값이 같아 채도가 없는 중간 회색
RGB 코드를 표기하는 여러 방식
같은 색이라도 사용하는 환경에 따라 적는 방법이 다릅니다. 아래 표기법은 모두 동일한 하늘색 계열을 가리킵니다.
| 표기 방식 | 예시 | 주로 쓰이는 곳 |
|---|---|---|
| 10진수 RGB | rgb(52, 152, 219) | CSS, 이미지 편집 프로그램 |
| 16진수 HEX | #3498DB | CSS, HTML, 디자인 시안 공유 |
| 투명도 포함 RGBA | rgba(52, 152, 219, 0.5) | 반투명 오버레이, 그림자 |
| 0~1 정규화 값 | (0.204, 0.596, 0.859) | OpenGL, 3D 렌더링, 게임 엔진 |
정규화 값은 각 채널을 255로 나눈 결과입니다. 52 ÷ 255 = 0.204가 되는 식이며, 셰이더 코드나 3D 툴에서는 이 방식이 표준입니다. 웹 작업만 한다면 10진수와 16진수 두 가지만 알아도 충분합니다.
기본 색상의 대응 관계는 외워 두면 유용합니다.
| 색상 | RGB 코드 | HEX 코드 |
|---|---|---|
| 검정 | rgb(0, 0, 0) | #000000 |
| 흰색 | rgb(255, 255, 255) | #FFFFFF |
| 빨강 | rgb(255, 0, 0) | #FF0000 |
| 초록 | rgb(0, 255, 0) | #00FF00 |
| 파랑 | rgb(0, 0, 255) | #0000FF |
| 노랑 | rgb(255, 255, 0) | #FFFF00 |
RGB 코드를 HEX로 변환하는 3단계
HEX 코드는 RGB 값을 16진수로 바꿔 이어 붙인 것뿐입니다. rgb(52, 152, 219)를 예로 들어 계산 과정을 따라가 보겠습니다.
- 채널 값을 16으로 나눕니다. 52 ÷ 16 = 3 나머지 4가 됩니다. 몫이 앞자리, 나머지가 뒷자리입니다.
- 10 이상의 숫자를 알파벳으로 바꿉니다. 10은 A, 11은 B, 12는 C, 13은 D, 14는 E, 15는 F입니다. 152는 몫 9, 나머지 8이므로 98이 되고, 219는 몫 13, 나머지 11이므로 DB가 됩니다.
- 세 결과를 순서대로 붙이고 앞에 #을 답니다. 34, 98, DB를 이어
#3498DB가 완성됩니다.
반대로 HEX를 RGB로 되돌릴 때는 두 자리씩 끊어 앞자리 × 16 + 뒷자리로 계산하면 됩니다. DB라면 13 × 16 + 11 = 219가 나옵니다. 색상 팔레트 전체를 옮겨야 하거나 수십 개의 값을 한꺼번에 다뤄야 할 때는 손계산보다 색상 변환기를 활용하는 편이 실수를 줄이는 데 훨씬 유리합니다.
RGB, HSL, CMYK는 어떻게 다른가
색을 정의하는 방식은 RGB 하나가 아닙니다. 목적에 따라 적합한 모델이 달라집니다.
| 모델 | 구성 요소 | 강점 | 주 용도 |
|---|---|---|---|
| RGB | 빨강, 초록, 파랑 | 화면 출력과 1:1 대응 | 웹, 앱, 영상 |
| HSL | 색상, 채도, 명도 | 밝기와 채도만 따로 조절 가능 | 테마 색상 파생, 다크 모드 |
| CMYK | 청록, 자홍, 노랑, 검정 | 잉크 혼합을 그대로 반영 | 인쇄물, 패키지 |
버튼의 기본색과 마우스를 올렸을 때의 색을 만드는 상황을 생각해 보면 차이가 분명해집니다. RGB에서는 세 값을 모두 조정해야 하지만, HSL에서는 명도 값 하나만 10% 낮추면 같은 계열의 어두운 색이 자연스럽게 나옵니다.
인쇄물 작업이라면 처음부터 CMYK로 진행하는 편이 안전합니다. 화면의 형광빛 도는 초록이나 선명한 파랑은 잉크로 그대로 재현되지 않아, 인쇄 후 색이 탁해 보이는 문제가 자주 발생합니다.
실무에서 바로 쓰는 RGB 코드 활용법
코드의 구조를 이해했다면 다음 세 가지를 적용해 볼 만합니다.
- 투명도는 RGBA로 처리합니다. 네 번째 값은 0(완전 투명)부터 1(완전 불투명) 사이입니다. 이미지 위에 얹는 어두운 오버레이는
rgba(0, 0, 0, 0.4)정도가 무난합니다. - 명도 대비를 확인합니다. 웹 접근성 기준은 본문 텍스트와 배경 사이에 4.5:1 이상의 대비를 권장합니다. 회색 배경에 연한 회색 글씨를 쓰는 조합은 이 기준을 넘기기 어렵습니다.
- 브랜드 색은 변수로 관리합니다. CSS 변수에
--brand: #3498DB형태로 한 번만 정의해 두면, 색이 바뀔 때 파일 전체를 뒤질 필요가 없습니다.
색상 값은 결국 숫자일 뿐이지만, 그 숫자가 어떤 원리로 화면 위 색이 되는지 알고 있으면 시안을 코드로 옮기는 과정에서 생기는 대부분의 오차를 스스로 잡아낼 수 있습니다.