색상 선택기 가이드 - HEX RGB HSL 색상 코드 변환 총정리 2026

#FF5733이 무슨 색인지 바로 아는 사람? 거의 없을 거예요. 근데 개발하다 보면 이런 코드를 매일 만지게 되죠. HEX, RGB, HSL — 다 같은 색인데 표현 방식만 다른 건데, 처음엔 진짜 헷갈려요. 색상 코드 읽는 법부터 조화로운 팔레트 조합까지, 디자이너 아니어도 알아두면 쓸모있는 것들만 모았어요.

색상 코드 형식 이해하기

디자인과 개발에서 사용되는 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색 팔레트가 무지개보다 효과적입니다.