디지털 색상은 어떻게 표현되는가 — RGB HEX HSL이 필요한 이유

웹사이트를 만들거나 포토샵을 쓰다 보면 #FF5733이나 rgb(255, 87, 51) 같은 표현을 마주칩니다. 왜 색상을 숫자로 표현해야 하는 걸까요?

---

컴퓨터는 모든 것을 숫자로 처리합니다

컴퓨터는 문자, 이미지, 소리 모든 것을 숫자로 처리합니다. 색상도 마찬가지입니다. "빨간색"이라는 개념을 컴퓨터가 이해하려면 숫자로 변환해야 합니다.

---

왜 빨강, 초록, 파랑 세 가지인가

모니터 화면을 돋보기로 자세히 들여다보면 빨강(R), 초록(G), 파랑(B) 세 가지 색의 점들이 모여 있습니다. 이 세 가지 빛의 강도를 조절해서 수백만 가지 색상을 만들어냅니다.

빛의 삼원색이 RGB인 이유는 사람의 눈 구조와 관련이 있습니다. 눈의 망막에는 세 종류의 원뿔 세포가 있고, 각각 빨강, 초록, 파랑 파장에 민감하게 반응합니다. 모니터는 이 세 가지를 자극해서 우리 뇌가 다양한 색을 인식하게 합니다.

---

RGB — 빛의 강도를 숫자로

RGB는 각 색상의 강도를 0~255 사이의 숫자로 표현합니다.

• 빨강(R): 0(없음) ~ 255(최대)
• 초록(G): 0(없음) ~ 255(최대)
• 파랑(B): 0(없음) ~ 255(최대)

빨강: rgb(255, 0, 0)    — R 최대, G·B 없음
초록: rgb(0, 255, 0)    — G 최대, R·B 없음
파랑: rgb(0, 0, 255)    — B 최대, R·G 없음
흰색: rgb(255, 255, 255) — 세 가지 모두 최대
검정: rgb(0, 0, 0)      — 세 가지 모두 없음
노랑: rgb(255, 255, 0)  — R·G 최대, B 없음

---

HEX — RGB를 더 짧게 표현한 것

HEX 색상 코드(#FF5733 같은 것)는 RGB를 16진수로 표현한 것입니다. 보기에는 다르지만 담고 있는 정보는 같습니다.

10진수로 255는 16진수로 FF입니다. 그래서 #FF0000은 rgb(255, 0, 0)과 같은 색입니다.

웹 개발에서 HEX를 많이 쓰는 이유는 짧기 때문입니다. rgb(255, 87, 51) 대신 #FF5733으로 쓸 수 있습니다.

---

HSL — 사람이 이해하기 쉬운 방식

RGB와 HEX는 컴퓨터 친화적입니다. 같은 색을 더 직관적으로 표현하는 방법이 HSL입니다.

• H(Hue, 색조): 0~360도, 색상환에서의 위치. 0=빨강, 120=초록, 240=파랑
• S(Saturation, 채도): 0~100%, 색의 진함. 0%=회색, 100%=순수한 색
• L(Lightness, 밝기): 0~100%, 0%=검정, 50%=정상, 100%=흰색

hsl(0, 100%, 50%)   — 순수한 빨강
hsl(0, 100%, 25%)   — 어두운 빨강
hsl(0, 100%, 75%)   — 밝은 분홍
hsl(0, 0%, 50%)     — 중간 회색

HSL의 장점은 색상을 직관적으로 조절할 수 있다는 점입니다. 색조(H)만 바꾸면 같은 느낌의 다른 색이 되고, 밝기(L)만 바꾸면 같은 색의 밝고 어두운 버전이 됩니다.

---

각 표현 방식은 언제 쓰나요?

표현	특징	주로 사용
RGB	빛의 강도 직접 표현	CSS, 이미지 편집
HEX	짧고 간결	웹 디자인, CSS
HSL	직관적 조절	동적 색상 변환, 테마

---

왜 0~255인가

각 색상을 0~255 범위로 표현하는 이유는 컴퓨터가 8비트(1바이트)로 처리하기 편하기 때문입니다. 

2의 8승이 256이므로 0~255 = 256가지를 표현할 수 있습니다. 

R, G, B 각각 256가지씩이면 256×256×256 = 약 1,677만 가지 색상을 표현할 수 있습니다.

---

정리

디지털 색상은 빨강, 초록, 파랑 세 가지 빛의 강도를 숫자로 표현합니다. RGB는 직접적이고, HEX는 간결하며, HSL은 직관적입니다. 세 가지 모두 같은 색상을 다른 방식으로 표현할 뿐입니다.