화면에서 본 블루가 인쇄하면 탁해지는 이유 — 색상 코드 완벽 가이드
HEX, RGB, HSL, CMYK를 쉬운 언어로 정리. 팔레트 만드는 법, WCAG 대비 체크, 그리고 '화면이랑 인쇄가 왜 다른지' 문제까지 풀어드려요.
회사 로고 파란색으로 펜 500개를 주문했어요. 화면에선 깔끔한 모던 블루였는데, 배송된 펜의 블루는 탁하고 살짝 보랏빛이더라고요. 인쇄소가 잘못한 줄 알았는데 전문 교정 출력물을 보니 제가 지정한 색 그대로였어요. 문제는 제 파일이 RGB였고 인쇄는 CMYK를 쓴다는 거였어요. 제 선명한 화면 블루는 잉크로 재현이 불가능한 색이었던 거죠. 그게 색상 모델에 대한 비싼 첫 수업이었어요.
색은 단순해 보이는데 화면, 인쇄, 브랜드 가이드 사이를 오가면 복잡해져요. 같은 파란색 하나가 #3B82F6, rgb(59, 130, 246), hsl(217, 91%, 60%), cmyk(76, 47, 0, 4)로 네 가지 코드로 표기돼요. 네 개 다 필요한 이유가 각각 있거든요. 어떤 걸 언제 써야 하는지, 팔레트를 어떻게 짜야 하는지, 브랜드 컬러가 왜 실패하는지 정리했어요.
이 글에서 알 수 있는 것
- ✅HEX, RGB, HSL, CMYK 언제 써야 하는지 (그리고 왜 4개가 필요한지)
- ✅색상환과 60-30-10 법칙으로 조화로운 팔레트 만드는 법
- ✅WCAG 대비율과 '흰 배경에 옅은 회색 텍스트'가 접근성 탈락인 이유
색상 코드 형식 이해하기
디자인과 개발에서 사용되는 4가지 주요 색상 형식이 있으며, 각각 다른 용도에 적합합니다. 언제 어떤 형식을 사용해야 하는지 알면 작업 효율이 크게 향상됩니다.
HEX 색상 코드
HEX(16진수)는 웹에서 가장 널리 사용되는 색상 형식입니다. # 접두사와 6자리 코드로 색상을 표현합니다. 각 2자리 쌍이 빨강, 초록, 파랑 값을 16진수로 나타냅니다. 예를 들어 #FF5733은 Red=FF(255), Green=57(87), Blue=33(51)입니다. HEX 코드는 간결하고 복사-붙여넣기가 쉬우며 CSS, HTML, 디자인 도구에서 보편적으로 지원됩니다.
- 형식: #RRGGBB (예: #3B82F6)
- 범위: 채널당 00-FF (10진수 0-255)
- 적합한 용도: 웹 개발, CSS 스타일링, 디자인 명세
- 축약형: 반복 숫자는 #RGB로 표기 가능 (예: #FFF = #FFFFFF)
RGB 색상 모델
RGB는 빨강(Red), 초록(Green), 파랑(Blue) 빛의 조합으로 색상을 정의합니다. 각 값은 0~255 범위입니다. RGB는 화면과 모니터의 기본 색상 모델이므로 디지털 디자인에 이상적입니다. CSS에서는 rgb()와 rgba() (알파 투명도) 함수를 지원합니다.
- 형식: rgb(R, G, B) — 예: rgb(59, 130, 246)
- 범위: 채널당 0-255
- 적합한 용도: JavaScript에서 동적 색상 조작, CSS 애니메이션
- 투명도 포함: rgba(59, 130, 246, 0.5) — 50% 투명
HSL 색상 모델
HSL은 색상(Hue), 채도(Saturation), 밝기(Lightness)의 약자입니다. RGB가 빛을 혼합하는 방식과 달리, HSL은 인간이 색상을 인식하는 방식에 기반합니다. 색상은 색상환의 각도(0-360°), 채도는 강도(0-100%), 밝기는 명도(0-100%)입니다. 밝기를 조절하면 음영을, 채도를 조절하면 선명도를 변경할 수 있어 직관적입니다.
- 형식: hsl(H, S%, L%) — 예: hsl(217, 91%, 60%)
- 색상: 0°=빨강, 120°=초록, 240°=파랑
- 적합한 용도: 일관된 색상 테마, 호버 상태, 다크 모드 변형
- 프로 팁: 색상 값을 고정하고 채도/밝기만 변경하면 통일감 있는 팔레트 완성
CMYK — 인쇄용 색상
CMYK는 청록(Cyan), 자홍(Magenta), 노랑(Yellow), 검정(Key/Black)의 약자입니다. 빛을 더하는 RGB와 달리, CMYK는 잉크를 섞는 감산 혼합 모델로 인쇄에 사용됩니다. 명함, 브로셔, 패키지 등 인쇄물을 디자인할 때는 반드시 CMYK로 변환해야 합니다. 화면의 선명한 색상 중 일부는 인쇄로 재현이 불가능하므로 중요한 작업은 테스트 인쇄를 권장합니다.
- 형식: cmyk(C%, M%, Y%, K%) — 예: cmyk(76%, 47%, 0%, 4%)
- 범위: 채널당 0-100%
- 적합한 용도: 인쇄 디자인, 패키지, 실물 제작물
- 참고: RGB 색상 영역이 CMYK보다 넓어 변환 시 일부 색상 차이 발생
지금 이 도구를 사용해 보세요:
색상 선택기 도구 사용하기 →효과적인 색상 팔레트 만드는 법
잘 디자인된 색상 팔레트는 시각적 조화를 만들고 사용자의 시선을 유도합니다. 색상환에 기반한 3가지 대표적인 색상 조화 방법이 있습니다.
- 보색(Complementary): 색상환에서 반대편 색상 (예: 파랑과 주황). 높은 대비, CTA와 강조에 적합.
- 유사색(Analogous): 색상환에서 인접한 색상 (예: 파랑, 청록, 초록). 조화롭고 안정적, 배경에 이상적.
- 삼원색(Triadic): 색상환에서 균등한 3색 (예: 빨강, 노랑, 파랑). 생동감 있고 균형적, 활발한 디자인에 적합.
대부분의 전문 디자인은 60-30-10 법칙을 따릅니다: 60% 주색, 30% 보조색, 10% 강조색. 이렇게 하면 시각적 계층 구조가 만들어져 보는 사람을 압도하지 않습니다.
접근성과 대비율
색상 접근성은 선택이 아니라 필수입니다. 남성의 약 8%, 여성의 약 0.5%가 색각 이상을 가지고 있습니다. WCAG(웹 콘텐츠 접근성 지침)는 가독성을 보장하기 위한 최소 대비율을 정의합니다.
- WCAG AA: 일반 텍스트 4.5:1, 큰 텍스트 3:1 (18px+ 볼드 또는 24px+ 일반)
- WCAG AAA: 일반 텍스트 7:1, 큰 텍스트 4.5:1 — 최고 수준
- 디자인 확정 전 반드시 대비 체커로 색상 조합을 테스트하세요
- 색상만으로 정보를 전달하지 마세요 — 아이콘, 레이블, 패턴도 함께 사용
색상 도구 비교: Coolors vs Adobe Color vs QuickFigure
- Coolors: 랜덤 팔레트를 빠르게 생성. 저장하려면 회원가입 필요. 대비 체크 기능 제한적.
- Adobe Color: 강력한 색상환과 접근성 도구. Adobe 생태계의 일부. 초보자에게 복잡할 수 있음.
- QuickFigure 색상 선택기: 무료, 회원가입 없음. 실시간 HEX/RGB/HSL/CMYK 변환, 팔레트 생성, WCAG 대비 체커, 색상 히스토리까지 올인원 도구.
디자이너·개발자를 위한 실무 팁
- CSS 커스텀 프로퍼티(변수)로 색상을 관리하세요 — 테마와 다크 모드 전환이 간단해집니다
- 브랜드 색상을 여러 형식으로 저장하세요 (CSS용 HEX, JS용 RGB, 인쇄용 CMYK)
- 밝은 배경과 어두운 배경 모두에서 색상을 테스트하세요 — 인지 밝기가 크게 변합니다
- 색상 히스토리를 활용하세요 — 이미 시도한 색상을 다시 찾는 시간을 절약
- 고민될 때는 색상을 줄이세요. 좋은 대비의 2색 팔레트가 무지개보다 효과적입니다.
브랜드 컬러는 네 가지 형식으로 한꺼번에 저장하세요
브랜드 컬러를 확정하는 순간 HEX, RGB, HSL, CMYK 네 가지를 모두 저장해두세요. CSS엔 HEX, 피그마/스케치엔 RGB, 호버·다크모드 변형엔 HSL, 인쇄물엔 CMYK가 필요해요. 브랜드 가이드 문서에 네 개 다 첫날 적어두세요. 나중에 HEX만 가지고 CMYK 역산하려다 보면 브랜드 컬러가 미묘하게 달라지는 '컬러 드리프트'가 시작돼요. 제 회사 '시그니처 블루'도 통합 전까진 팬톤 매칭이 3개 버전으로 갈라져 있었어요.
RGB 화면 색은 인쇄가 안 되는 경우가 많아요
선명한 화면 색상 중 일부는 RGB 영역엔 있지만 CMYK 영역 바깥에 있어요. 잉크 조합으로 재현이 불가능하다는 뜻이에요. 네온 그린, 일렉트릭 시안, 순수 마젠타는 인쇄하면 거의 다 변해요. 명함, 패키지, 포스터 같은 실물 제작할 때는 CMYK 세이프 팔레트에서 색을 고르거나, 디자인 승인 전에 CMYK로 변환해 본 결과를 꼭 확인하세요. 테스트 인쇄 5천원이면 500개 재인쇄를 막아요.
자주 묻는 질문
웹 개발에 가장 좋은 색상 형식은?
정적 색상에는 HEX가 CSS에서 가장 많이 사용됩니다. 프로그래밍으로 색상 변형(호버 상태, 테마)을 만들 때는 HSL이 편리합니다. 투명도가 필요하면 RGB/RGBA를 사용하세요.
HEX를 RGB로 수동 변환하는 방법은?
6자리 HEX를 3쌍(RR, GG, BB)으로 나누고 각각 16진수를 10진수로 변환합니다. 예: #3B82F6 → 3B=59, 82=130, F6=246, 즉 RGB(59, 130, 246). 또는 우리 변환기 도구를 사용하세요!
인쇄 색상이 화면과 다르게 보이는 이유는?
화면은 RGB(가산 혼합), 인쇄는 CMYK(감산 혼합)를 사용합니다. 색상 영역이 달라서 화면의 밝은 색상 중 일부는 잉크로 재현이 불가합니다. 중요한 색상 매칭은 반드시 CMYK 변환 후 교정 인쇄를 하세요.
대비율은 얼마를 목표로 해야 하나요?
최소 WCAG AA(본문 텍스트 4.5:1)를 충족하세요. 더 나은 접근성을 위해 WCAG AAA(7:1)를 목표로 하세요. 대비 체커로 색상 조합을 확인하세요.
웹사이트에 색상을 몇 개나 사용해야 하나요?
성공적인 웹사이트 대부분은 2~4개 색상을 사용합니다: 기본 브랜드 색상, 보조 강조색, 중립 배경, 선택적 하이라이트. 너무 많은 색상은 시각적 혼란을 줍니다. 60-30-10 법칙으로 배분하세요.
▶이 글에서 다룬 도구 바로 사용하기
민재
개발자 겸 테크 라이터. 개발 도구와 파일 변환 기술을 깊이 있게 다룹니다.
이 글이 도움이 되셨나요? 새 가이드 알림 받기
스팸 없이, 새 소식만 보내드립니다. 언제든 취소 가능. · 구독 시 개인정보처리방침에 동의합니다.