컴퓨터는 색을 어떻게 만들까: RGB, HEX, 2진수 이야기

#FF0000. #00FF00. #0000FF. 디자인 시안이나 코드에서 한 번쯤 마주친 표기일 겁니다. 암호 같기도, 게임 코드 같기도 합니다. 사실은 색깔의 이름입니다.

위에서부터 차례로 빨강, 초록, 파랑. 컴퓨터가 색을 부를 때 쓰는 이름입니다. 이 표기가 어디서 왔는지 풀어 보겠습니다.

RGB — 색을 만드는 세 글자

Red, Green, Blue. 빛의 세 가지 원색입니다. 섞는 비율에 따라 우리가 보는 모든 색이 만들어집니다.

우리는 매일 RGB를 보고 있다

화면이 있는 곳에는 거의 다 RGB가 있습니다.

• 모니터 / TV — 픽셀 하나가 빨강·초록·파랑 세 점으로 구성
• 스마트폰 화면 — 같은 구조, 더 작은 픽셀
• 게이밍 키보드 LED — 한 키에 R·G·B LED 세 개
• PC 케이스 조명 — RGB 스트립이 곧 RGB 신호

화면을 충분히 확대하면 보입니다. 빨강, 초록, 파랑. 그게 전부입니다. 수백만 개의 작은 RGB 점들이 모여 우리가 보는 한 장의 화면이 됩니다.

색은 섞어서 만든다

RGB 각 채널은 0부터 255까지 세기를 가집니다.

• RGB(255, 0, 0) — 빨강만 최대 → 순수한 빨강
• RGB(0, 255, 0) — 초록만 최대 → 순수한 초록
• RGB(255, 255, 0) — 빨강 + 초록 → 노랑
• RGB(0, 0, 0) — 모두 꺼짐 → 검정
• RGB(255, 255, 255) — 모두 최대 → 흰색

빨강과 초록을 섞으면 노랑이 된다는 게 직관에 어긋날 수 있지만, 이건 빛의 합성입니다. 미술 시간에 배운 물감 섞기(빨강 + 초록 = 갈색)와는 다른 규칙입니다. 빛은 더할수록 밝아지고, 다 합치면 흰색입니다.

세 슬라이더를 직접 움직여서 확인해 보세요.

오른쪽 끝에 보이는 8자리 숫자가 그 채널의 2진수 표현입니다. 슬라이더를 움직이면 이 숫자도 같이 바뀝니다. 0과 1로 어떻게 256가지를 만드는지가 다음 주제입니다.

왜 하필 0부터 255까지일까

컴퓨터는 0과 1만 다룹니다. 0 또는 1을 담는 한 자리를 비트(bit) 라고 합니다. 비트가 늘어날수록 표현할 수 있는 값이 2배씩 늘어납니다.

비트 8개 = 1바이트(byte). 색 하나에 RGB 세 채널, 총 3바이트 = 24비트입니다. 24비트는 약 1670만 가지 색을 표현합니다. 사람 눈이 구분하기에 충분한 단계라 1바이트가 한 채널의 표준이 됐습니다.

2진수, 직접 읽어 보기

각 자리에는 정해진 값이 있습니다. 왼쪽부터 차례로 128, 64, 32, 16, 8, 4, 2, 1 — 2의 거듭제곱입니다.

1이 적힌 자리의 값을 모두 더하면 10진수가 나옵니다.

그래서 8비트의 최댓값이 255입니다. RGB 한 채널의 표현 범위가 0~255인 정확한 이유입니다.

HEX — 같은 숫자, 더 짧게

RGB(255, 255, 255). 글자 수가 16개입니다. CSS 한 줄, 디자인 툴 한 칸에 매번 적기에는 깁니다. 그래서 같은 숫자를 더 짧게 쓰는 방법이 등장합니다.

16진수란

16진수는 한 글자로 0부터 15까지 표현하는 진법입니다. 그런데 우리가 평소 쓰는 숫자는 0~9까지 10개. 부족한 6개는 알파벳에서 빌려 옵니다.

규칙은 세 가지입니다.

• 0~9는 평소처럼 그대로
• 10부터는 A로 시작
• F가 한 글자 최댓값 (= 15)

왜 하필 16진수일까

2진수 4자리(0000 ~ 1111)는 정확히 16가지를 표현합니다.

2진수 4자리 = 16진수 한 글자. 네 글자를 한 글자로 줄입니다. RGB 한 채널이 8비트니까 정확히 16진수 두 글자로 떨어집니다.

RGB를 HEX로 옮기는 법

RGB(255, 87, 51)을 변환해 보겠습니다.

14글자였던 표기가 7글자가 됩니다.

HEX 보고 색 짐작하기

거꾸로 HEX를 보면 어떤 색인지 감이 옵니다.

• #FF5733 — R 최대(FF), G 절반(57), B 낮음(33) → 빨강이 강한 주황
• #3576E0 — R 낮음(35), G 중간(76), B 강함(E0) → 약간 보라가 섞인 파랑
• #29A85A — R 낮음(29), G 강함(A8), B 낮음(5A) → 시원한 초록

세 자리만 봐도 “주황 계열인지, 파랑 계열인지” 구분이 되면 디자이너와 개발자가 같은 언어로 대화할 수 있게 됩니다.

한 줄 요약

• RGB — 빨강·초록·파랑 세 채널, 각 0~255
• 2진수 8비트 — 한 채널이 표현하는 256가지의 정체
• HEX — 같은 숫자를 두 글자로 짧게 적는 표기법

세 개념이 한 줄로 연결되면 색 코드는 더 이상 외계어가 아닙니다. RGB의 세 숫자가 곧 HEX의 여섯 글자입니다.

다음 단계는 이 숫자를 디자이너의 언어로 바꾸는 일입니다. “조금 더 밝게”, “채도만 낮춰서”, “종이에 그대로” 같은 요청은 RGB·HEX만으로는 다루기 어렵습니다. HSL·CMYK·OKLCH가 이 문제를 어떻게 푸는지는 RGB만으론 부족하다: HSL·CMYK·OKLCH 색 표기법에서 이어집니다.