HEX·RGB·HSL 색상 코드 읽는 법

디자인 시안이나 웹사이트를 보다 보면 #C23B30, rgb(194, 59, 48) 같은 코드를 만납니다. 외계어처럼 보이지만 구조를 한 번만 이해하면 코드만 보고도 대충 어떤 색인지 짐작할 수 있게 됩니다. 세 가지 표기법을 차례로 풀어 보겠습니다.

최종 업데이트: 2026년 7월

1. 왜 색을 코드로 적을까

"살짝 어두운 벽돌색"이라고 말로 전하면 사람마다 다른 색을 떠올립니다. 코드로 적으면 #C23B30 하나로 전 세계 어떤 컴퓨터에서든 같은 색이 재현됩니다. 디자이너가 개발자에게 색을 넘길 때, 브랜드 컬러를 문서로 남길 때, 인쇄소와 소통할 때 모두 코드가 기준이 됩니다.

화면의 색은 결국 빨강(R)·초록(G)·파랑(B) 빛을 얼마나 섞느냐로 정해집니다. 각 빛의 양을 0부터 255까지 256단계로 조절할 수 있어서, 조합하면 약 1,677만 가지 색이 나옵니다. HEX와 RGB는 이 세 숫자를 적는 방식만 다르고, HSL은 아예 다른 각도에서 색을 설명합니다.

2. HEX: 웹의 표준 표기

HEX는 16진수(hexadecimal)의 줄임말입니다. # 뒤에 여섯 자리가 오는데, 두 자리씩 끊어서 빨강·초록·파랑입니다.

16진수는 0~9 다음에 A~F를 이어 붙여 한 자리로 0부터 15까지 세는 방식입니다. 두 자리면 16×16=256단계가 되어 0~255를 딱 담을 수 있습니다. 00이 가장 어둡고 FF가 가장 밝다는 것만 기억해도 코드가 읽히기 시작합니다.

• 세 쌍이 모두 비슷한 값이면 무채색입니다. #888888은 중간 회색.
• 첫 쌍(R)만 크면 붉은 계열, 둘째 쌍(G)만 크면 초록 계열, 셋째 쌍(B)만 크면 파란 계열.
• #F00처럼 세 자리로 줄여 쓰기도 합니다. 각 자리를 두 번 반복한 #FF0000과 같습니다.

3. RGB: 빛 세 가지의 양

RGB 표기는 같은 세 숫자를 10진수로 풀어 쓴 것입니다. rgb(194, 59, 48)은 빨강 194, 초록 59, 파랑 48이라는 뜻으로, #C23B30과 완전히 같은 색입니다.

투명도가 필요하면 네 번째 값을 붙여 rgba(194, 59, 48, 0.5)처럼 씁니다. 마지막 0.5가 불투명도 50%라는 뜻입니다. 반투명 오버레이나 그림자 색을 지정할 때 자주 등장합니다.

그림 프로그램의 색상 선택기는 대부분 R·G·B 값을 각각 보여 주므로, HEX를 모르는 프로그램에도 RGB 값만 옮겨 적으면 같은 색을 만들 수 있습니다.

4. HSL: 사람이 생각하는 방식

HEX와 RGB는 기계에 편한 표기라서 "조금 더 밝게"를 코드로 계산하기 어렵습니다. HSL은 색을 사람의 감각에 가까운 세 축으로 나눕니다.

• 색상(Hue): 색상환에서의 각도. 0°가 빨강, 120°가 초록, 240°가 파랑, 한 바퀴 돌아 360°가 다시 빨강.
• 채도(Saturation): 색의 쨍한 정도. 0%면 회색, 100%면 가장 선명한 색.
• 밝기(Lightness): 0%면 검정, 100%면 흰색, 50%가 그 색의 본래 모습.

HSL의 장점은 조작이 직관적이라는 점입니다. 버튼 색을 호버에서 살짝 어둡게 하고 싶으면 밝기만 5~10% 내리면 되고, 같은 톤의 배색을 만들고 싶으면 색상(H)만 돌리면 됩니다. 이미지 색상 추출 도구도 각 색의 HSL 값을 함께 보여 주는데, 추출한 색을 변형해 쓸 때 이 값을 기준으로 조절하면 편합니다.

5. 서로 변환하기

세 표기는 모두 같은 색을 가리키므로 손실 없이 오갈 수 있습니다. HEX ↔ RGB는 단순히 16진수 ↔ 10진수 변환입니다.

외워서 계산할 필요는 없습니다. 색을 다루는 프로그램 대부분이 세 표기를 동시에 보여 주고, 색상 추출 도구에서도 사진에서 뽑은 색마다 HEX·RGB·HSL을 함께 확인할 수 있습니다.

6. 어디서 어떤 표기를 쓰나

• 웹 개발(CSS): HEX가 기본. 투명도가 필요하면 rgba() 또는 8자리 HEX.
• 포토샵·피그마 등 디자인 도구: HEX 입력칸이 있고 RGB 슬라이더도 함께 제공.
• 파워포인트·한글·워드: "다른 색" 대화상자에서 RGB 값(빨강·녹색·파랑)으로 입력. 최근 버전은 HEX 입력칸도 있습니다.
• 인쇄물: 화면과 달리 잉크를 쓰므로 CMYK라는 별도 체계를 씁니다. 화면용 코드를 그대로 넘기면 인쇄 색이 달라질 수 있으니 인쇄소와 협의가 필요합니다.

7. 자주 묻는 질문

HEX 코드는 대문자로 써야 하나요?

대소문자를 가리지 않습니다. #c23b30과 #C23B30은 같은 색입니다. 문서 안에서 한 가지로 통일해 쓰면 읽기 좋을 뿐입니다.

#FFF와 #FFFFFF는 같은 색인가요?

같습니다. 세 자리 표기는 각 자리를 두 번 반복한 여섯 자리의 줄임말입니다. 다만 모든 색을 세 자리로 줄일 수 있는 것은 아니고, #C23B30처럼 두 자리가 서로 다른 색은 여섯 자리로만 적습니다.

모니터마다 같은 코드가 다르게 보이는 건 왜죠?

코드는 "빛을 이만큼 내라"는 지시일 뿐이고, 실제 발색은 디스플레이 패널과 색 설정에 따라 달라집니다. 정밀한 색 작업에는 모니터 캘리브레이션이 필요하고, 일반 용도라면 코드가 같으면 같은 색으로 취급해도 무방합니다.

8자리 HEX는 뭔가요?

마지막 두 자리가 투명도입니다. #C23B3080은 #C23B30을 50% 불투명도로 쓴다는 뜻으로, rgba(194, 59, 48, 0.5)와 같습니다.