색상 선택기
모든 형식으로 정확한 색상 코드를 찾으세요.
대비 검사
- AA
- AA (큰 텍스트)
- AAA
- AA
- AA (큰 텍스트)
- AAA
브라우저에서 실행됩니다. 입력한 내용은 어디로도 전송되지 않습니다.
- 5가지 색상 형식
- WCAG 대비 검사
- 불투명도 지원
색상 선택 방법
- 사각형 안을 드래그해 채도와 명도를 정하고 색상 슬라이더를 움직이세요.
- 또는 HEX, RGB, HSL, HSV, CMYK 중 원하는 형식으로 코드를 직접 입력하세요.
- 필요한 코드를 복사하고 아래에서 대비를 확인하세요.
색상 형식 비교
아래 각 행은 모두 같은 주황색을 나타냅니다. 표기 방식만 다릅니다.
| 형식 | 예시 | 사용처 |
|---|---|---|
| HEX | #f08a3c | CSS, HTML, 디자인 도구 |
| RGB | rgb(240, 138, 60) | CSS, 이미지 편집 프로그램 |
| HSL | hsl(24, 84%, 59%) | CSS, 눈으로 조정하기 가장 쉬움 |
| HSV/HSB | hsv(24, 75%, 94%) | 페인트·디자인 앱의 선택기 |
| CMYK | cmyk(0%, 43%, 75%, 6%) | 인쇄 디자인과 잉크 배합 |
웹에는 HEX나 RGB를, 색상은 그대로 두고 명도나 채도만 조정하고 싶을 때는 HSL을, 인쇄의 출발점으로는 CMYK를 사용하세요.
WCAG 대비 등급
아래 대비 검사는 선택한 색을 순백색, 순검은색과 각각 비교해 WCAG 2 등급으로 평가합니다.
| 등급 | 일반 텍스트 | 큰 텍스트 |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
큰 텍스트는 약 24px, 굵게는 19px 정도를 뜻합니다. 대부분의 사이트는 AA만 통과하면 충분합니다. AAA는 더 엄격한 기준으로 주로 정부 기관이나 접근성을 중시하는 사이트에서 씁니다.
접근성 있는 색상을 고르는 팁
- HSL에서 색상은 고정하고 명도만 낮추면 호버나 활성 상태에 쓸 같은 계열의 더 어두운 색을 만들 수 있습니다.
- 흰색 배경에서 AA를 통과한 색도 색이 있는 배경에서는 실패할 수 있으므로, 흰색이나 검은색뿐 아니라 실제 페이지 배경에서도 대비를 확인하세요.
- 스포이트 기능은 컴퓨터용 Chrome과 Edge에서만 작동합니다. Firefox와 Safari는 아직 EyeDropper API를 지원하지 않습니다.
- 대량 인쇄 전에는 반드시 인쇄소의 색상 교정본을 확인하세요. 같은 수치라도 코팅 용지와 비코팅 용지에서 다르게 보입니다.
색상 선택기 자주 묻는 질문
화면에 있는 색의 코드를 가져오려면?
컴퓨터용 Chrome이나 Edge에서는 '화면에서 선택'을 클릭한 뒤 화면의 아무 곳이나 클릭하세요. 다른 브라우저는 아직 이 기능을 지원하지 않으므로 스크린샷을 찍어 이미지용 색상 선택기에서 열어보세요.
HEX, RGB, HSL의 차이는 무엇인가요?
같은 색을 다른 방식으로 나타낸 것입니다. HEX와 RGB는 빨강, 초록, 파랑의 양을 나타내고(HEX는 16진수로 표기), HSL은 색상, 채도, 명도로 나타내 손으로 조정하기가 더 쉽습니다.
읽기 편한 텍스트에 필요한 대비 비율은 얼마인가요?
WCAG AA 등급은 일반 텍스트 4.5:1 이상, 큰 텍스트(약 24px 또는 굵게 19px) 3:1 이상을 요구합니다. AAA 등급은 일반 텍스트 기준이 7:1로 올라갑니다.
CMYK 값은 정확한가요?
RGB에서 수학적으로 바로 변환한 값입니다. 실제 인쇄 색상은 잉크, 용지, 프린터 프로필에 따라 달라지므로 어디까지나 참고용으로 쓰고 인쇄 교정본으로 반드시 확인하세요.
불투명도 슬라이더는 무엇을 바꾸나요?
투명도를 0(투명)부터 100(불투명)까지 설정합니다. 100 미만이 되면 HEX 코드에 두 자리가 추가되고 RGB는 rgba()가 됩니다. 대비는 각 배경 위에서 보이는 모습대로 검사됩니다.
RGB에는 없는 HSV의 장점은 무엇인가요?
HSV는 색상과 얼마나 밝고 선명하게 보이는지를 따로 다룹니다. 그래서 페인트 도구나 사진 편집 프로그램은 빨강, 초록, 파랑을 눈대중으로 섞는 대신 색상용과 명도용 슬라이더를 따로 둡니다.
여기서 팬톤(Pantone) 색상을 얻을 수 있나요?
아니요. 팬톤은 특정 잉크에 묶인 라이선스 스팟 컬러 시스템으로, RGB나 CMYK에서 단순 수식으로 변환되지 않습니다. CMYK 값을 참고용으로 쓰고 정확한 색은 인쇄소에서 확인하세요.