색상 코드 — HEX·RGB·HSL은 어떻게 다른가?
웹·앱 디자인에서 색을 표현하는 방식은 여러 가지입니다.HEX(16진수)는 #RRGGBB 형태의 6자리 코드로 가장 짧고 CSS·Figma·일러스트레이터에서 표준,RGB(0~255)는 빛의 3원색을 0~255 정수로 표현해 디지털 디스플레이의 자연스러운 표현,HSL(색상·채도·명도)은 색을 사람의 직관(빨강·파랑이 아니라 색상 각도, 진하기, 밝기)에 맞게 표현해색상 미세 조정·테마 변형·접근성 검증에 가장 적합합니다. 본 도구는 세 가지 표현을 양방향으로 변환하고, 색상 팔레트(보색·유사색·삼각배색·정사각배색) 자동 생성과WCAG 2.1 명도 대비 검증(AA·AAA 기준)까지 지원해 디자이너·개발자가 한 화면에서 모든 작업을 끝낼 수 있습니다. 모든 변환은 브라우저에서 처리되어 외부로 전송되지 않습니다.
3가지 색상 모델 비교
| 모델 | 예시 (빨강) | 사용처 |
|---|---|---|
| HEX | #FF0000 | CSS, HTML, Figma 표준 |
| RGB | rgb(255, 0, 0) | 디지털 화면, JS 색상 조작 |
| HSL | hsl(0, 100%, 50%) | 테마 변형, 어두운/밝은 모드 |
| RGBA | rgba(255, 0, 0, 0.5) | 투명도(알파 채널) 추가 |
| HSLA | hsla(0, 100%, 50%, 0.5) | HSL + 투명도 |
WCAG 명도 대비 — 접근성 필수 기준
WCAG 2.1(웹 콘텐츠 접근성 지침)은 텍스트와 배경 사이의 명도 대비(contrast ratio)를 규정합니다. 정상 시력에는 무관해 보여도 색약·노안·저조도 환경의 사용자에게는 큰 차이를 만듭니다. 본 도구는 두 색상을 입력하면 명도 대비 비율과 AA·AAA 등급 통과 여부를 자동 표시합니다.
| 등급 | 일반 텍스트 | 큰 텍스트(18pt+) |
|---|---|---|
| AA (최소 권장) | 4.5:1 | 3:1 |
| AAA (강화) | 7:1 | 4.5:1 |
※ 한국 공공기관 웹사이트는 WCAG AA 준수가 의무입니다.
자주 묻는 질문 (FAQ)
Q. HEX 3자리(#F00)와 6자리(#FF0000)의 차이는?
A. HEX 3자리는 6자리의 단축 표기법으로, 각 자리를 두 번 반복합니다. #F00 = #FF0000. CSS에서 둘 다 동일하게 빨강으로 표현됩니다.
Q. 다크 모드 색상은 어떻게 만드나요?
A. HSL을 활용하면 쉽습니다. 라이트 색상의 H(색상)와 S(채도)는 유지하고 L(명도)을 반전시키면 됩니다. 예: hsl(220, 80%, 90%) → hsl(220, 80%, 20%).
Q. CMYK도 변환되나요?
A. 본 도구는 디지털 색상(RGB·HSL·HEX)만 지원합니다. CMYK는 인쇄용이라 디지털 ↔ CMYK 변환은 색공간 차이로 정확하지 않습니다. 인쇄용 색은 어도비 일러스트레이터·인디자인을 사용하세요.
Q. 색맹/색약자에게는 어떤 색이 좋나요?
A. 적록색약(가장 흔함)은 빨강·초록 구분이 어려우니 같은 정보 전달에 색 외에도 모양·텍스트 라벨을 함께 사용하세요. 파랑·노랑 조합은 모든 색맹 유형이 잘 구분합니다.
Q. 입력값이 외부로 전송되나요?
A. 아니요. 모든 변환·검증은 브라우저에서 수행되며 외부 서버로 전송되지 않습니다.