컬러 코드 변환기

HEX / RGB / HSL / HSV 상호 변환을 지원하는 컬러 도구. 색상을 선택하면 모든 형식의 CSS 코드가 동시에 생성되고, 명암비도 자동 계산됩니다.

완전 무료 가입 불필요 브라우저 완결 5 개 언어 다크 모드

HEX

RGB

HSL

HSV

CSS 형식

명암비

흰색 배경 (#FFF)

검정 배경 (#000)

WCAG AA: 일반 텍스트 4.5 이상, 큰 텍스트 3.0 이상 / AAA: 일반 텍스트 7.0 이상

톤 변형

문제가 있거나 표시가 이상하면 다음으로 알려주세요: 문의 양식으로 알려주세요.

📖 자주 걸리는 지점

HEX / RGB / HSL / HSV / CMYK 를 상호 변환하고 WCAG 의 대비율과 톤 배리에이션, 가까운 Tailwind 색도 함께 냅니다. 처리는 브라우저 안에서 끝납니다. 대비율은 WCAG 2.x 의 계산식 그대로의 값이지 읽기 쉬움의 지표가 아닙니다 — 이 식은 색상도 채도도 폰트의 굵기도 보지 않으므로 기준을 충족해도 읽을 수 없는 조합은 얼마든지 만들 수 있습니다.

사례	무슨 일이 일어나는가	어떻게 하면 되는가
대비율을 충족하는데 읽기 어렵다	WCAG 2.x 의 대비율은 상대 휘도만으로 계산합니다. 따라서 가는 선의 폰트도 굵은 폰트도 완전히 같은 숫자가 됩니다. `font-weight: 300` 의 14px 와 `font-weight: 700` 의 14px 는 실제 읽기 쉬움이 크게 다른데 식은 그것을 구별하지 않습니다. 또 하나의 함정이 채도가 높은 색으로 선명한 파랑이나 마젠타 글자는 비율의 숫자가 충분해도 눈의 초점이 맞기 어렵고(색수차) 긴 글에서는 피로합니다. 기준을 충족하는 것과 독자가 실제로 읽어 낼 수 있는 것은 별개의 이야기입니다.	4.5 는 최저선이지 목표가 아닙니다. 본문에는 7 이상(AAA) 을 목표로 하세요 — 특히 회색 본문(`#666` 전후)은 흰 배경에서 5.7 정도밖에 되지 않아 고령의 독자나 야외의 화면에서는 실제로 읽히지 않습니다. 가는 굵기를 쓴다면 비율을 한 단계 올려 보완하세요. 더 지각에 가까운 지표가 필요하다면 APCA(WCAG 3 의 후보)를 보면 어두운 배경과 밝은 배경에서 필요한 대비가 다르다는 점이 수치에 반영됩니다 — WCAG 2.x 는 여기를 대칭으로 다뤄 버리므로 다크 모드 디자인에서 특히 실감과 어긋납니다.
디자인 도구의 색과 실제 표시가 다르다	같은 `#4A90D9` 라도 어느 색 공간에서 해석하느냐에 따라 실제로 빛나는 색이 다릅니다. Figma 나 Photoshop 에서 Display P3 나 Adobe RGB 를 작업 색 공간으로 삼고 있으면 수치는 같아도 브라우저(sRGB)에서 볼 때보다 선명해 보입니다 — 디자이너의 화면에서는 선연한 파랑이 구현하고 나니 조금 탁해 보인다는 어긋남은 거의 이것입니다. 나아가 최근 단말은 P3 대응 디스플레이를 싣고 있으므로 같은 브라우저 · 같은 CSS 라도 단말에 따라 보이는 방식이 다르다는 단계에 들어와 있습니다.	웹 대상 제작은 sRGB 를 작업 색 공간으로 삼으세요 — 디자인 도구 쪽에서 명시적으로 설정할 수 있습니다. 브랜드 색을 정할 때는 반드시 실제 브라우저에서 실기를 나란히 놓고 확인하세요. 더 선명한 색을 의도적으로 쓰고 싶다면 `color(display-p3 0.2 0.6 0.9)` 라는 표기가 있어 대응 단말에서만 선명하게, 비대응에서는 자동으로 가까운 sRGB 로 떨어집니다 — 다만 `@supports` 로 나누거나 먼저 sRGB 판을 쓰고 덮어쓰는 형태로 하세요. 인쇄가 얽히는 경우의 CMYK 는 기준값입니다 — 실제 색은 용지와 잉크로 달라지므로 인쇄물의 색은 반드시 색견본으로 정하세요.
HSL 로 명도를 맞췄는데 밝기가 제각각	HSL 의 L 은 지각적인 밝기가 아닙니다. 단순히 RGB 의 최댓값과 최솟값의 평균이며 사람의 눈이 초록에 민감하고 파랑에 둔하다는 점을 전혀 고려하지 않습니다. 실례로 `hsl(60 100% 50%)`(노랑)과 `hsl(240 100% 50%)`(파랑)은 L 이 둘 다 50% 이지만 상대 휘도는 대략 9 배 다릅니다 — 나란히 놓으면 노랑만 떠올라 보입니다. 디자인 시스템의 컬러 팔레트를 HSL 로 기계적으로 만들면 색상마다 무게가 들쭉날쭉해지는 것은 이 때문입니다.	팔레트를 체계적으로 만들 거라면 OKLCH 를 쓰세요 — `oklch(70% 0.15 250)` 처럼 쓰고 색상(마지막 값)만 바꿔도 밝기가 맞습니다. 이것이 OKLCH 의 설계 목적 그 자체입니다. CSS 에서는 2023 년 이후의 주요 브라우저에서 쓸 수 있습니다. 기존 HSL 팔레트를 고칠 때는 색상마다 L 을 손으로 조정할 수밖에 없습니다 — 노랑이나 하늘색은 L 을 낮추고 파랑이나 보라는 올리는 방향입니다. 조정이 되었는지는 팔레트를 그레이스케일로 만들어 확인하는 것이 가장 확실합니다 — 밝기가 맞았다면 회색으로 했을 때 같은 농도로 보입니다.

색만으로 정보를 전달하지 마세요(WCAG 1.4.1). 에러를 빨강 · 성공을 초록으로만 하는 UI 는 일본인 남성의 약 5%(20 명 중 1 명)에게는 구별이 되지 않습니다 — 세계에서는 남성의 약 8% 입니다. 아이콘 · 기호 · 문구 중 하나를 반드시 함께 쓰세요(에러에는 가위표, 완료에는 체크처럼). 그래프의 범례를 색만으로 구별하는 것도 같은 이유로 피하고 선 종류나 라벨의 직접 배치를 씁니다. 한 가지 더, 다크 모드에서 색을 반전할 때 채도를 그대로 두면 눈부십니다 — 어두운 배경 위에서는 같은 채도라도 대비가 강하게 나오므로 액센트 색은 채도를 10~20% 낮추고 명도를 올리는 것이 정석입니다. 순백(#FFF)의 글자를 순흑(#000)의 배경에 두는 것도 눈이 피로하므로 피하세요 — #E8E8E8 과 #121212 정도로 맞추면 읽기 쉬워집니다.

📖 사용법

1

색상 선택

컬러 피커나 HEX / RGB / HSL을 직접 입력하세요.
2

모든 형식 확인

HEX / RGB / RGBA / HSL / HSV / CMYK가 즉시 계산됩니다.
3

명암비 확인

배경과의 WCAG 명암비가 표시됩니다.

❓ 자주 묻는 질문

WCAG 명암비 기준은?

일반 텍스트: AA 4.5:1, AAA 7:1.

HEX와 RGB 차이는?

HEX는 16진수, RGB는 10진수 표기입니다.

HSL과 HSV 사용 구분은?

HSL은 디자인 시스템에, HSV는 피커 UI에 적합합니다.

Tailwind 팔레트도 지원하나요?

선택한 색상에 가장 가까운 Tailwind 색상을 제안합니다.

🐛 이 도구에서 문제가 발생했나요?

무료 · 가입 불필요. 재현 절차만이라도 도움이 됩니다. 보고는 운영자에게 직접 전달되어 개선에 사용됩니다.