같은 색, 네 가지 다른 언어

appstoryo

AppStoryo

lapnito.cz s.r.o.

blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use/ko

HEX vs RGB vs HSL vs CMYK: 어떤 색 형식을 언제 쓸까

Lubor Šimůnek

21032026

2026

lapnito.cz s.r.o.

CC BY 4.0

HEX, RGB, HSL, CMYK의 차이는 무엇일까요? 웹, 인쇄, UI 디자인, 소셜 미디어에 어떤 색 형식을 써야 하는지 실전 예시와 함께 알아보세요.

디자인articleAppStoryo

같은 색, 네 가지 다른 언어

아무 색이나 하나 골라보세요 — 예를 들어 따뜻한 코럴색이라고 합시다. 이제 그 색을 네 가지 방식으로 표현해 보겠습니다.

HEX: #E8635A

RGB: rgb(232, 99, 90)

HSL: hsl(4, 75%, 63%)

CMYK: 0, 57, 61, 9

네 가지 모두 정확히 같은 색을 가리킵니다. 서로 경쟁하는 표준이 아니라, 서로 다른 맥락에 맞게 최적화된 색의 표현 방식일 뿐입니다. 혼란은 어떤 상황에서 어떤 형식이 필요한지 모르는 데서 생깁니다.

이 가이드는 각 형식을 쉬운 말로 정리합니다. 무엇인지, 어떻게 작동하는지, 언제 써야 하는지, 그리고 언제 잘못된 선택이 되는지. 디자인, 개발, 인쇄, 마케팅 등 색을 다루는 일을 한다면 프로젝트에 맞지 않는 형식을 고르는 실수를 피할 수 있을 것입니다.

HEX: 웹의 표준HEX란 무엇인가

HEX(16진수)는 해시 기호 뒤에 오는 여섯 글자 코드입니다: #E8635A. 두 글자씩 짝을 이루어 빨강, 초록, 파랑 채널을 16진수 표기(00부터 FF까지)로 나타냅니다.

기능적으로는 RGB와 완전히 동일하며 표기 방식만 다릅니다. #E8635A는 rgb(232, 99, 90)과 같은 색입니다. HEX는 단지 RGB 값을 더 간결하게 쓰는 방법일 뿐입니다.

HEX를 써야 할 때

CSS와 웹 개발 — HEX는 CSS의 기본 색상 표기법입니다. 모든 브라우저가 이해합니다. color: #E8635A;는 웹에서 색을 지정하는 가장 일반적인 방법입니다.

디자인 도구 — Figma, Sketch, Adobe XD, Canva 모두 HEX를 기본 입력 형식으로 사용합니다. 디자이너가 "이 파란색은 #3B82F6이야"라고 말하면 누구나 알아듣습니다.

브랜드 가이드라인 — 디지털 브랜드 가이드는 거의 항상 HEX 값을 포함합니다. 짧고, 모호하지 않으며, 복사·붙여넣기가 쉽기 때문입니다.

빠른 의사소통 — 슬랙 메시지에서는 "rgb(51, 51, 51) 써줘"보다 "#333 써줘"가 훨씬 빠릅니다.

HEX를 쓰지 말아야 할 때

투명도가 필요할 때 — 표준 6자리 HEX는 알파(불투명도)를 지원하지 않습니다. 8자리 HEX(#E8635A80)를 써야 하는데 가독성이 떨어지므로 RGBA로 바꾸는 편이 낫습니다.

색을 프로그래밍으로 조정할 때 — "이걸 20% 더 밝게"를 HEX 상태로 머릿속에서 계산하는 것은 사실상 불가능합니다. 이런 작업에는 HSL이 훨씬 낫습니다.

인쇄 제작 — 인쇄소는 HEX를 쓰지 않습니다. 절대로요.

실제 예시

랜딩 페이지의 CSS를 작성하고 있다고 해봅시다. 디자이너가 브랜드 컬러가 담긴 스타일 가이드를 전달했고, 여러분은 이렇게 씁니다:

:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }

여기서는 HEX가 완벽합니다. 간결하고, 읽기 쉬우며, 어디서나 지원됩니다.

RGB: 화면의 색 모델RGB란 무엇인가

RGB는 Red, Green, Blue의 약자로, 화면이 섞어서 모든 색을 만들어내는 세 가지 빛의 색을 뜻합니다. 각 채널은 0부터 255까지의 값을 가집니다. rgb(232, 99, 90)은 빨강 232, 초록 99, 파랑 90이라는 의미입니다.

RGB는 모든 디지털 색의 토대입니다. HEX는 RGB를 다른 표기로 쓴 것이고, HSL은 RGB를 사람이 이해하기 쉽게 변환한 것입니다. 화면 위의 모든 것은 결국 픽셀로 전달되는 RGB 값이 됩니다.

RGB를 써야 할 때

투명도가 필요할 때 — RGBA는 알파 채널을 더합니다: 불투명도 50%라면 rgba(232, 99, 90, 0.5). 8자리 HEX보다 깔끔하며 CSS, 디자인 도구, 프로그래밍 언어에서 폭넓게 지원됩니다.

프로그래밍과 앱 개발 — Swift, Kotlin, Flutter, React Native 같은 앱 프레임워크는 내부적으로 RGB/RGBA 값을 다루는 것이 일반적입니다.

LED와 조명 — 스마트 조명(Philips Hue, LED 스트립)은 RGB 값을 사용합니다. 실제 조명 설치물을 설계한다면 RGB가 기본 형식입니다.

색 연산 — 색을 섞거나, 그러데이션을 보간하거나, 프로그램으로 색을 생성하는 작업은 RGB에서 간단합니다.

RGB를 쓰지 말아야 할 때

인쇄 — 화면은 빛을 내보내고(가산 혼합), 종이는 빛을 반사합니다(감산 혼합). RGB로는 인쇄물의 결과를 정확히 표현할 수 없습니다.

명도나 채도 조정 — "이 색의 채도를 30% 낮춰줘"는 RGB에서 직관적이지 않습니다. 먼저 HSL로 변환해야 합니다.

실제 예시

React Native 앱을 만들면서 반투명 오버레이가 필요하다고 해봅시다:

backgroundColor: 'rgba(0, 0, 0, 0.6)'

알파가 포함된 RGB가 자연스러운 선택입니다. 직관적이고, 읽기 쉬우며, 렌더링 엔진의 기본 형식이기 때문입니다.

HSL: 디자이너를 위한 형식HSL이란 무엇인가

HSL은 Hue(색상), Saturation(채도), Lightness(명도)의 약자입니다:

색상(0°–360°) — 색 그 자체, 색상환 위의 위치입니다. 0°는 빨강, 120°는 초록, 240°는 파랑입니다.

채도(0%–100%) — 색이 얼마나 선명한지를 뜻합니다. 0%는 회색, 100%는 해당 색상의 가장 순수한 상태입니다.

명도(0%–100%) — 얼마나 밝거나 어두운지입니다. 0%는 검정, 100%는 흰색, 50%가 그 색의 "본래" 모습입니다.

hsl(4, 75%, 63%)은 붉은 계열의 색상(4°), 매우 선명함(채도 75%), 약간 밝음(63%)을 의미합니다.

HSL을 써야 할 때

디자인 시스템과 테마 — 일관된 색상 스케일을 만들기에 HSL이 최고입니다. 주요 색상의 열 가지 음영이 필요한가요? 색상은 그대로 두고 명도를 10%에서 95%까지 바꾸면 됩니다. 차분한 버전이 필요하면 채도를 낮추세요. HEX나 RGB에서는 직관적으로 하기가 거의 불가능합니다.

다크 모드 / 라이트 모드 — 테마 전환은 명도와 채도를 조정하는 일이며, 이는 HSL 매개변수와 정확히 대응됩니다. Tailwind CSS, Radix Colors를 비롯한 많은 현대적 디자인 시스템이 HSL 위에 세워져 있습니다.

프로그래밍 방식의 색 생성 — 하나의 기본 색에서 호버 상태, 비활성 상태, 배경, 테두리를 만들어내는 일이 HSL에서는 매우 간단합니다: 더 밝은 변형은 hsl(4, 75%, 73%), 더 어두운 변형은 hsl(4, 75%, 43%).

접근성 — 명도를 직접 보고 조정할 수 있어 명암비 검사가 훨씬 직관적이 됩니다.

HSL을 쓰지 말아야 할 때

팀 간 소통 — 대부분의 사람은 각도와 백분율로 색을 생각하지 않습니다. 디자인 전달 과정에서 "버튼은 hsl(4, 75%, 63%)"보다 "버튼은 #E8635A"가 훨씬 명확합니다.

인쇄 — RGB와 마찬가지로 HSL도 화면용 색 모델입니다.

실제 예시

Tailwind CSS로 디자인 시스템을 만들면서 일관된 색상 스케일이 필요하다고 해봅시다:

--brand-50: hsl(4, 75%, 95%); --brand-100: hsl(4, 75%, 90%); --brand-200: hsl(4, 75%, 80%); --brand-500: hsl(4, 75%, 63%); --brand-700: hsl(4, 75%, 43%); --brand-900: hsl(4, 75%, 25%);

같은 색상, 같은 채도, 다른 명도. 30초 만에 완벽한 스케일이 완성됩니다. HEX로 한번 해보세요.

CMYK: 인쇄를 위한 형식CMYK란 무엇인가

CMYK는 Cyan(청록), Magenta(자홍), Yellow(노랑), Key(검정)의 약자입니다. 흰 종이에 얹는 잉크의 혼합으로 색을 설명합니다. 각 값의 범위는 0%부터 100%까지입니다: 0, 57, 61, 9는 청록 0%, 자홍 57%, 노랑 61%, 검정 9%를 뜻합니다.

빛을 더해 색을 만드는 RGB와 달리, CMYK는 흰 종이에서 빼나갑니다. 잉크가 많아질수록 색은 어두워집니다. 이것이 감산 색 모델이라 불리는 이유입니다.

CMYK를 써야 할 때

인쇄물 디자인 — 명함, 브로슈어, 패키지, 포스터, 잡지. 상업 인쇄소로 보내는 모든 파일은 CMYK 색 모드여야 합니다.

InDesign, Illustrator에서 인쇄 파일 준비 — 이 도구들은 CMYK 모드로 작업하며 종이 위에서 색이 어떻게 보일지(화면보다 항상 덜 선명합니다) 미리 확인할 수 있게 해줍니다.

색 교정 — 디자인의 색이 CMYK로 재현 가능한지 확인하는 일입니다. 일부 선명한 RGB 색(특히 네온 그린과 일렉트릭 블루)은 CMYK에서 물리적으로 인쇄가 불가능하며, "색 영역 밖"으로 벗어납니다.

CMYK를 쓰지 말아야 할 때

화면에 표시되는 모든 것 — 웹사이트, 앱, 소셜 미디어, 프레젠테이션, 이메일. 화면은 RGB를 씁니다. 웹사이트에 CMYK를 지정하는 것은 길 안내를 해리 단위로 하는 것과 같습니다. 기술적으로는 거리이지만 여정에는 쓸모가 없습니다.

사진 보정 — 보정은 RGB로 하고, 인쇄용 최종 내보내기 단계에서만 CMYK로 변환하세요.

실제 예시

Illustrator로 포스터를 디자인했습니다. 인쇄소에 보내기 전에 문서를 CMYK 색 모드로 변환하고(File → Document Color Mode → CMYK Color), 색 영역 초과 경고를 확인한 뒤, 탁한 청록으로 변해버린 일렉트릭 블루를 조정합니다. 최종 PDF는 인쇄소의 ICC 프로파일과 함께 CMYK로 저장합니다.

한눈에 보는 비교표

형식	가장 적합한 용도	범위	투명도 지원	사람이 읽기 쉬움	인쇄 적합
HEX	웹, CSS, 브랜드 가이드	#000000 – #FFFFFF	8자리만 (#RRGGBBAA)	보통	아니오
RGB	화면, 앱, 그러데이션	채널당 0–255	예 (RGBA)	보통	아니오
HSL	디자인 시스템, 테마	0°–360°, 0%–100%, 0%–100%	예 (HSLA)	높음	아니오
CMYK	인쇄, 패키지	채널당 0%–100%	아니오	낮음	예

정리표: 어떤 작업에 어떤 형식을

여러분의 프로젝트	사용할 형식	이유
웹사이트 CSS	HEX 또는 HSL	간단함은 HEX, 테마가 있는 디자인 시스템은 HSL
모바일 앱 (iOS/Android)	RGB/RGBA	네이티브 프레임워크가 내부적으로 RGB를 사용
Figma / Sketch 디자인 파일	HEX	디자인 도구의 표준 입력 형식
디자인 시스템 / 토큰	HSL	HSL에서는 스케일과 변형 생성이 간단함
소셜 미디어 그래픽	HEX 또는 RGB	디지털 전용. Canva와 Photoshop 모두 지원
명함 / 브로슈어	CMYK	실제 인쇄기로 넘어가기 때문
제품 패키지	CMYK + Pantone	인쇄와 브랜드 색 일관성을 함께 확보
이메일 템플릿	HEX	이메일 클라이언트가 HEX를 안정적으로 지원
스마트 조명 / LED	RGB	LED 하드웨어가 기본적으로 RGB를 사용
브랜드 가이드라인 문서	네 가지 모두	팀마다 필요한 형식이 다르기 때문

서로 변환할 수 있을까?

가능합니다 — 다만 주의할 점이 있습니다.

HEX ↔ RGB — 손실이 없습니다. 같은 데이터를 다른 표기로 쓴 것뿐입니다.

RGB ↔ HSL — 손실이 없습니다. 수학적 변환에 불과합니다.

RGB → CMYK — 손실이 있습니다. 선명한 파랑, 네온, 밝은 초록 같은 일부 RGB 색은 CMYK로 재현할 수 없습니다. 변환하면 인쇄 가능한 가장 가까운 색으로 옮겨지며, 대개 더 칙칙해 보입니다.

CMYK → RGB — 기술적으로는 가능하지만 결과는 사용하는 ICC 프로파일에 따라 달라집니다. 같은 CMYK 입력이라도 변환 도구가 다르면 조금씩 다른 RGB 값이 나올 수 있습니다.

이동 중에 빠르게 변환하려면, 네 가지 형식을 동시에 보여주는 휴대폰 컬러 피커가 가장 빠른 방법입니다. Color Picker Camera: HEX RGB가 바로 그 일을 합니다. 카메라를 아무 색에나 겨누면 HEX, RGB, HSL, CMYK가 나란히 표시됩니다. 어떤 값이든 한 번의 탭으로 복사됩니다. iPhone과 Android에서 사용할 수 있습니다.

흔한 실수1. 인쇄물을 RGB로 디자인하기

초보자가 겪는 대표적인 실수입니다. Photoshop의 RGB 모드에서 선명한 포스터를 만들어 인쇄소에 보냈더니 결과물이 바래 보입니다 — 특히 초록과 파랑이 그렇습니다. 인쇄용으로 내보내기 전에는 반드시 CMYK로 변환하고 색 영역 경고를 확인하세요.

2. 투명도가 필요한데 HEX 쓰기

디자인에 반투명 오버레이, 그림자, 글래스모피즘 효과가 필요하다면 RGBA나 HSLA로 바꾸세요. 표준 6자리 HEX는 불투명도 정보를 담지 못하고, 8자리 HEX는 읽기 어려워 거의 쓰이지 않습니다.

3. 디자인 시스템을 HEX로 구축하기

"#3B82F6인데 20% 더 밝게"는 변환, 계산, 재변환을 요구합니다. HSL에서는 명도를 20% 올리면 끝입니다. 디자인 토큰, 테마 생성기, 현대적인 CSS 커스텀 속성은 HSL에서 훨씬 잘 작동합니다.

4. CMYK를 HEX로 변환하고 같은 색을 기대하기

인쇄용으로 CMYK에서 정의된 브랜드 색은 웹용으로 단순 변환하면 다르게 보입니다. 올바른 접근법은 화면에서 인쇄본과 시각적으로 맞춘 뒤, 디지털용 HEX 값을 따로 정의하는 것입니다. 브랜드 가이드라인에는 둘 다 담겨야 합니다.

자주 묻는 질문HEX와 RGB의 차이는 무엇인가요?

색에는 차이가 없고 표기법만 다릅니다. HEX는 같은 빨강/초록/파랑 값을 16진수로 씁니다. #FF0000은 rgb(255, 0, 0)과 동일합니다. HEX는 입력이 짧고, RGB는 프로그래밍으로 수정하기 쉬우며 알파 채널(RGBA)을 지원합니다.

RGB 대신 CMYK를 써야 할 때는 언제인가요?

최종 결과물이 종이, 판지, 천, 플라스틱 같은 물리적 재료에 인쇄될 때입니다. 화면에만 머문다면 RGB(또는 HEX/HSL)를 쓰고, 인쇄된다면 내보내기 단계에서 CMYK로 전환하세요.

HSL이 HEX보다 나은가요?

디자인 시스템, 테마, 색 조작에는 그렇습니다. 빠른 소통과 도구에 복사·붙여넣기에는 HEX가 더 실용적입니다. 둘은 같은 색을 표현하지만, HSL은 사람이 색을 생각하는 방식(색상 → 선명도 → 밝기)에 맞게 정보를 정리했을 뿐입니다.

휴대폰으로 네 가지 형식을 한 번에 볼 수 있나요?

네. Color Picker Camera: HEX RGB는 카메라나 사진에서 색을 포착해 HEX, RGB, HSL, CMYK를 동시에 보여줍니다. 값을 탭하면 복사됩니다. 실제 세계의 색을 다루는 색 형식 계산기로서, 한 번의 촬영으로 네 가지 형식을 얻을 수 있습니다.

결론

웹과 빠른 소통에는 HEX. 앱 개발과 투명도에는 RGB. 디자인 시스템과 색 조작에는 HSL. 인쇄에는 CMYK.

하나를 고를 필요는 없습니다. 필요한 것은 각 상황에 맞는 형식을 쓰는 일입니다. 그리고 형식을 변환하거나 실제 세계의 색을 네 가지 형식으로 한 번에 담아내야 할 때는, 휴대폰 컬러 피커가 가장 빠른 도구입니다.

iPhone용 Color Picker Camera 다운로드 | Android용 다운로드