아무 색이나 하나 골라보세요 — 예를 들어 따뜻한 코럴색이라고 합시다. 이제 그 색을 네 가지 방식으로 표현해 보겠습니다.
네 가지 모두 정확히 같은 색을 가리킵니다. 서로 경쟁하는 표준이 아니라, 서로 다른 맥락에 맞게 최적화된 색의 표현 방식일 뿐입니다. 혼란은 어떤 상황에서 어떤 형식이 필요한지 모르는 데서 생깁니다.
이 가이드는 각 형식을 쉬운 말로 정리합니다. 무엇인지, 어떻게 작동하는지, 언제 써야 하는지, 그리고 언제 잘못된 선택이 되는지. 디자인, 개발, 인쇄, 마케팅 등 색을 다루는 일을 한다면 프로젝트에 맞지 않는 형식을 고르는 실수를 피할 수 있을 것입니다.
HEX(16진수)는 해시 기호 뒤에 오는 여섯 글자 코드입니다: #E8635A. 두 글자씩 짝을 이루어 빨강, 초록, 파랑 채널을 16진수 표기(00부터 FF까지)로 나타냅니다.
기능적으로는 RGB와 완전히 동일하며 표기 방식만 다릅니다. #E8635A는 rgb(232, 99, 90)과 같은 색입니다. HEX는 단지 RGB 값을 더 간결하게 쓰는 방법일 뿐입니다.
color: #E8635A;는 웹에서 색을 지정하는 가장 일반적인 방법입니다.#E8635A80)를 써야 하는데 가독성이 떨어지므로 RGBA로 바꾸는 편이 낫습니다.랜딩 페이지의 CSS를 작성하고 있다고 해봅시다. 디자이너가 브랜드 컬러가 담긴 스타일 가이드를 전달했고, 여러분은 이렇게 씁니다:
:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }
여기서는 HEX가 완벽합니다. 간결하고, 읽기 쉬우며, 어디서나 지원됩니다.
RGB는 Red, Green, Blue의 약자로, 화면이 섞어서 모든 색을 만들어내는 세 가지 빛의 색을 뜻합니다. 각 채널은 0부터 255까지의 값을 가집니다. rgb(232, 99, 90)은 빨강 232, 초록 99, 파랑 90이라는 의미입니다.
RGB는 모든 디지털 색의 토대입니다. HEX는 RGB를 다른 표기로 쓴 것이고, HSL은 RGB를 사람이 이해하기 쉽게 변환한 것입니다. 화면 위의 모든 것은 결국 픽셀로 전달되는 RGB 값이 됩니다.
rgba(232, 99, 90, 0.5). 8자리 HEX보다 깔끔하며 CSS, 디자인 도구, 프로그래밍 언어에서 폭넓게 지원됩니다.React Native 앱을 만들면서 반투명 오버레이가 필요하다고 해봅시다:
backgroundColor: 'rgba(0, 0, 0, 0.6)'
알파가 포함된 RGB가 자연스러운 선택입니다. 직관적이고, 읽기 쉬우며, 렌더링 엔진의 기본 형식이기 때문입니다.
HSL은 Hue(색상), Saturation(채도), Lightness(명도)의 약자입니다:
hsl(4, 75%, 63%)은 붉은 계열의 색상(4°), 매우 선명함(채도 75%), 약간 밝음(63%)을 의미합니다.
hsl(4, 75%, 73%), 더 어두운 변형은 hsl(4, 75%, 43%).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는 Cyan(청록), Magenta(자홍), Yellow(노랑), Key(검정)의 약자입니다. 흰 종이에 얹는 잉크의 혼합으로 색을 설명합니다. 각 값의 범위는 0%부터 100%까지입니다: 0, 57, 61, 9는 청록 0%, 자홍 57%, 노랑 61%, 검정 9%를 뜻합니다.
빛을 더해 색을 만드는 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를 사용 |
| 브랜드 가이드라인 문서 | 네 가지 모두 | 팀마다 필요한 형식이 다르기 때문 |
가능합니다 — 다만 주의할 점이 있습니다.
이동 중에 빠르게 변환하려면, 네 가지 형식을 동시에 보여주는 휴대폰 컬러 피커가 가장 빠른 방법입니다. Color Picker Camera: HEX RGB가 바로 그 일을 합니다. 카메라를 아무 색에나 겨누면 HEX, RGB, HSL, CMYK가 나란히 표시됩니다. 어떤 값이든 한 번의 탭으로 복사됩니다. iPhone과 Android에서 사용할 수 있습니다.
초보자가 겪는 대표적인 실수입니다. Photoshop의 RGB 모드에서 선명한 포스터를 만들어 인쇄소에 보냈더니 결과물이 바래 보입니다 — 특히 초록과 파랑이 그렇습니다. 인쇄용으로 내보내기 전에는 반드시 CMYK로 변환하고 색 영역 경고를 확인하세요.
디자인에 반투명 오버레이, 그림자, 글래스모피즘 효과가 필요하다면 RGBA나 HSLA로 바꾸세요. 표준 6자리 HEX는 불투명도 정보를 담지 못하고, 8자리 HEX는 읽기 어려워 거의 쓰이지 않습니다.
\"#3B82F6인데 20% 더 밝게\"는 변환, 계산, 재변환을 요구합니다. HSL에서는 명도를 20% 올리면 끝입니다. 디자인 토큰, 테마 생성기, 현대적인 CSS 커스텀 속성은 HSL에서 훨씬 잘 작동합니다.
인쇄용으로 CMYK에서 정의된 브랜드 색은 웹용으로 단순 변환하면 다르게 보입니다. 올바른 접근법은 화면에서 인쇄본과 시각적으로 맞춘 뒤, 디지털용 HEX 값을 따로 정의하는 것입니다. 브랜드 가이드라인에는 둘 다 담겨야 합니다.
색에는 차이가 없고 표기법만 다릅니다. HEX는 같은 빨강/초록/파랑 값을 16진수로 씁니다. #FF0000은 rgb(255, 0, 0)과 동일합니다. HEX는 입력이 짧고, RGB는 프로그래밍으로 수정하기 쉬우며 알파 채널(RGBA)을 지원합니다.
최종 결과물이 종이, 판지, 천, 플라스틱 같은 물리적 재료에 인쇄될 때입니다. 화면에만 머문다면 RGB(또는 HEX/HSL)를 쓰고, 인쇄된다면 내보내기 단계에서 CMYK로 전환하세요.
디자인 시스템, 테마, 색 조작에는 그렇습니다. 빠른 소통과 도구에 복사·붙여넣기에는 HEX가 더 실용적입니다. 둘은 같은 색을 표현하지만, HSL은 사람이 색을 생각하는 방식(색상 → 선명도 → 밝기)에 맞게 정보를 정리했을 뿐입니다.
네. Color Picker Camera: HEX RGB는 카메라나 사진에서 색을 포착해 HEX, RGB, HSL, CMYK를 동시에 보여줍니다. 값을 탭하면 복사됩니다. 실제 세계의 색을 다루는 색 형식 계산기로서, 한 번의 촬영으로 네 가지 형식을 얻을 수 있습니다.
웹과 빠른 소통에는 HEX. 앱 개발과 투명도에는 RGB. 디자인 시스템과 색 조작에는 HSL. 인쇄에는 CMYK.
하나를 고를 필요는 없습니다. 필요한 것은 각 상황에 맞는 형식을 쓰는 일입니다. 그리고 형식을 변환하거나 실제 세계의 색을 네 가지 형식으로 한 번에 담아내야 할 때는, 휴대폰 컬러 피커가 가장 빠른 도구입니다.
" }