사용 방법
- 색상 코드를 붙여 넣습니다.
#F05A14,rgb(240, 90, 20),hsl(19, 88%, 51%)어느 형식이든 됩니다. - 오른쪽에 HEX, RGB, HSL, HSV, CMYK 값이 한 번에 나옵니다. 필요한 값 옆의 복사를 누르세요.
- 아래 밝기 단계에서 같은 계열의 더 밝은 색, 더 어두운 색을 골라 쓸 수 있습니다.
- 명도 대비 검사에 글자색과 배경색을 넣으면 웹 접근성 기준(AA, AAA)을 통과하는지 바로 알려줍니다.
계산 기준과 공식
- HEX는 빨강·초록·파랑을 각각 00~FF(0~255)의 16진수 두 자리로 적은 것입니다. RGB는 같은 값을 10진수로 적습니다.
- HSL은 색상(0~360°), 채도(%), 밝기(%)로, HSV는 색상, 채도, 명도로 나타냅니다. 디자인 툴의 색 고르개가 주로 HSV를 씁니다.
- CMYK는 RGB를 단순 공식으로 바꾼 근삿값입니다. 실제 인쇄 색은 인쇄소의 색 프로필에 따라 달라집니다.
명도 대비는 WCAG 공식대로 두 색의 상대 휘도(L)를 구해 계산합니다.
대비 = (밝은 색 L + 0.05) ÷ (어두운 색 L + 0.05)
L = 0.2126 R + 0.7152 G + 0.0722 B (감마 보정한 값)| 기준 | 본문 | 큰 글씨 |
|---|---|---|
| AA (일반 권장) | 4.5 : 1 | 3 : 1 |
| AAA (강화) | 7 : 1 | 4.5 : 1 |
예시
브랜드 색 #F05A14를 인쇄소에 넘길 때
HSL로는 hsl(19, 88%, 51%), CMYK 근삿값은 cmyk(0%, 62%, 92%, 6%)입니다. 흰 글자를 올리면 대비가 3.40:1이라 큰 글씨용으로만 기준을 통과합니다. 본문 버튼이라면 밝기 단계에서 한두 칸 어두운 색을 고르세요.
회색 글씨가 너무 흐린지 확인
흰 바탕에 #767676 글자는 대비 4.54:1로, 본문 AA 기준(4.5:1)을 겨우 넘는 가장 밝은 회색으로 알려져 있습니다. 이보다 밝은 회색은 본문에 쓰지 않는 것이 좋습니다.
결과를 읽는 법
대비 숫자는 1:1(같은 색)부터 21:1(흰색과 검은색)까지입니다. 통과·미달 표시는 글자 크기에 따라 다르게 판단하니, 버튼이나 본문처럼 작은 글자는 ‘본문’ 기준을 보세요. 색만으로 정보를 구분하지 말고 글자나 아이콘을 함께 쓰는 것도 접근성 기준에 들어갑니다.
자주 묻는 질문
HEX 코드 세 자리(#F60)는 무엇인가요?
각 자리를 두 번 반복한 줄임 표기입니다. #F60은 #FF6600과 같습니다. 이 도구는 세 자리, 여섯 자리, 투명도가 붙은 여덟 자리 모두 읽습니다(투명도는 무시).
CMYK 값을 그대로 인쇄에 써도 되나요?
화면 색(RGB)을 인쇄 잉크(CMYK)로 정확히 바꾸려면 인쇄소의 색 프로필이 필요합니다. 여기 값은 출발점으로 쓰고, 중요한 인쇄물은 교정쇄로 확인하세요.
명도 대비 기준은 꼭 지켜야 하나요?
공공기관 웹사이트는 한국형 웹 콘텐츠 접근성 지침(KWCAG)에 따라 본문 4.5:1 이상을 지켜야 합니다. 일반 사이트도 저시력 사용자와 햇빛 아래 휴대폰 사용자를 위해 지키는 것이 좋습니다.
사진에서 색을 뽑을 수도 있나요?
이미지 색상 추출 도구에 사진을 넣으면 대표 색을 뽑거나 스포이드로 원하는 지점의 색을 집을 수 있습니다. 뽑은 HEX를 여기에 붙여 넣어 변환하세요.
결과가 이상하거나 있었으면 하는 기능이 있나요? 오류 제보 · 의견 보내기