색상 코드 변환란?
디자인 도구는 HEX, CSS는 RGB나 HSL, 인쇄소는 CMYK처럼 상황마다 쓰는 색상 코드가 다릅니다. 이 도구에서는 어느 칸에 입력하든 나머지 형식이 바로 맞춰지고, 투명도(알파)까지 포함한 CSS 코드를 복사할 수 있습니다.
또한 글자색과 배경색의 명도 대비율을 계산해 웹 콘텐츠 접근성 지침(WCAG 2.1)과 한국형 웹 콘텐츠 접근성 지침(KWCAG 2.2)의 기준을 통과하는지 AA·AAA 배지로 보여 줍니다.
사용 방법
- 왼쪽 위 큰 색상 상자를 눌러 색을 고르거나, HEX·RGB·HSL·HSV·CMYK 중 아무 칸에나 코드를 입력하세요.
- 투명도 막대를 움직이면 알파 값이 포함된 HEX(8자리)와 rgba, hsla 코드가 만들어집니다.
- 명도 대비에서 흰 배경·검은 배경·직접 고른 색과의 대비율과 통과 여부를 확인하세요.
- 밝게·어둡게 팔레트의 색을 누르면 HEX 코드가 복사되고, 맨 아래에서 CSS 코드를 한 번에 복사할 수 있습니다.
색상 코드 형식 정리
| 형식 | 예 | 설명 |
|---|---|---|
| HEX | #4f46e5 | 빨강·초록·파랑을 16진수 2자리씩, 8자리면 끝 2자리가 투명도 |
| RGB | rgb(79, 70, 229) | 각 채널 0~255 |
| HSL | hsl(243, 75%, 59%) | 색상(0~360°)·채도·밝기, 색 조절이 직관적 |
| HSV(HSB) | hsv(243, 69%, 90%) | 포토샵·피그마 색상 선택기 방식 |
| CMYK | cmyk(66%, 69%, 0%, 10%) | 인쇄용 잉크 비율 |
명도 대비 기준 (WCAG 2.1 / KWCAG 2.2)
| 등급 | 일반 글자 | 큰 글자 |
|---|---|---|
| AA (최소 기준) | 4.5 : 1 이상 | 3 : 1 이상 |
| AAA (강화 기준) | 7 : 1 이상 | 4.5 : 1 이상 |
큰 글자는 18pt(약 24px) 이상이거나 굵은 14pt(약 18.66px) 이상인 글자입니다. 공공기관 웹사이트 등 접근성 인증을 받으려면 본문 글자가 최소 4.5:1을 만족해야 합니다. 대비율은 1:1(같은 색)부터 21:1(흰색과 검은색)까지입니다.
자주 묻는 질문
화면 색과 인쇄 색이 달라요.
모니터는 빛의 3원색(RGB), 인쇄는 잉크(CMYK)로 색을 만들어 표현할 수 있는 범위가 다릅니다. 이 도구의 CMYK는 단순 변환 공식 값이라 인쇄소의 색상 프로파일(예: Japan Color, FOGRA)을 적용한 값과 다를 수 있으니 중요한 인쇄물은 교정 인쇄로 확인하세요.
HEX 코드 8자리는 무엇인가요?
#RRGGBBAA 형식으로, 마지막 2자리가 투명도입니다. 80은 약 50%, CC는 80%, FF는 100%(불투명)입니다. 모든 최신 브라우저가 지원합니다.
투명한 색의 명도 대비는 어떻게 계산하나요?
투명도가 있으면 실제 보이는 색이 배경에 따라 달라지므로, 이 도구는 투명도를 빼고 불투명한 색 기준으로 대비율을 계산합니다.
색 이름으로 입력할 수 있나요?
HEX 칸에 red, navy, skyblue, tomato 같은 CSS 표준 색 이름 148가지를 입력하면 해당 색으로 바뀝니다.