HEX·RGB·HSL 색상 코드 차이와 변환

디자인 도구에서는 HEX, 코드에서는 RGB, 색을 미세 조정할 때는 HSL, 인쇄에서는 CMYK를 씁니다. 모두 같은 색을 다르게 적은 것뿐인데, 표기법이 달라 변환이 자주 필요합니다. 각각이 무엇이고 어떻게 바꾸는지 정리했습니다.

네 가지 색상 표기

HEX와 RGB는 표기만 다를 뿐 같은 정보입니다. #RRGGBB의 각 두 자리(16진수)가 RGB의 빨강·초록·파랑(0~255)에 그대로 대응합니다. HSL은 색을 ‘색상-채도-명도’로 나눠 밝기만 낮추거나 채도만 올리는 식의 조정에 편합니다.

실무에서는 뭘 쓸까

어느 하나가 우월한 게 아니라 상황별로 편한 표기가 다릅니다.

• HEX — 디자이너와 개발자가 색을 주고받을 때 표준처럼 쓰입니다. 짧고, 복사 한 번이면 끝이라 오해가 없습니다.
• RGB(RGBA) — 투명도가 필요할 때. rgba(196, 92, 44, 0.5)처럼 네 번째 값(0~1)으로 반투명 오버레이나 그림자를 만듭니다. 8자리 HEX(#C45C2C80)도 같은 역할을 합니다.
• HSL — 한 색의 변형을 만들 때. 버튼의 hover 색이 필요하면 색상(H)과 채도(S)는 그대로 두고 명도(L)만 10%p 올리면 톤이 맞는 밝은 색이 나옵니다. 디자인 시스템에서 색 단계(50~900)를 짤 때도 같은 원리를 씁니다.

참고로 CSS에는 red, tomato처럼 이름으로 부르는 색도 140여 개 있습니다. 간단한 테스트엔 편하지만, 미묘한 톤을 지정할 수 없어 실무에서는 코드 표기를 쓰는 게 안전합니다.

자주 찾는 색 코드

검색창에 자주 입력되는 기본 색들입니다. 외울 필요는 없고, 흰색과 검정 정도만 기억해도 충분합니다.

참고로 순수한 검정(#000000)과 흰색(#FFFFFF)은 대비가 너무 강해 눈이 쉽게 피로해집니다. 실제 서비스들은 #0A0A0A나 #FAFAFA처럼 살짝 톤을 뺀 값을 쓰는 경우가 많습니다.

CMYK는 근사값이다

화면은 빛을 더하는 RGB, 인쇄는 잉크를 섞는 CMYK라 변환은 항상 근사입니다. 같은 CMYK 값도 용지·잉크·프로파일에 따라 다르게 인쇄됩니다. 그래서 정밀 인쇄에서는 변환기 값을 참고만 하고, 실제 출력은 전용 컬러 프로파일로 확인하는 게 안전합니다.

색을 정할 땐 대비도 함께

색 코드를 다룰 때 자주 놓치는 게 가독성입니다. 글자색과 배경색의 명도 대비가 약하면 읽기 어렵고, 웹접근성 기준에도 못 미칩니다. WCAG는 일반 텍스트에 4.5 : 1 이상을 요구하고, 한국 웹접근성(KWCAG)도 같은 수준을 권장합니다.

감으로 잡기 어려운 영역이라 숫자로 확인하는 게 빠릅니다. 예를 들어 흰 배경에서 회색 글자는 #767676 정도가 4.5 : 1을 겨우 통과하는 경계선입니다. 그보다 밝은 회색을 본문에 쓰면 ‘은은해 보이지만 읽기 힘든’ 글이 됩니다. 브랜드 색을 버튼 배경으로 쓸 때도 흰 글자와의 대비를 확인해야 하고요. 한 가지 주의할 점 — HSL의 명도(L)는 사람 눈이 느끼는 밝기와 정확히 일치하지 않아서, 같은 L값이라도 노랑은 밝고 파랑은 어둡게 보입니다. 최종 판단은 대비 검사기로 하세요.

• 색상 코드 변환: HEX·RGB·HSL·CMYK 양방향 변환과 복사
• 색상 대비 검사: 두 색의 대비비와 WCAG AA·AAA 통과 여부
• CSS 그라데이션: 색을 골라 CSS 코드 바로 생성

자주 묻는 질문