디자인 도구는 HEX를 주고, CSS 변수는 HSL로 관리하고, 디자인 시스템 문서는 OKLCH를 쓰고, 인쇄 담당자는 CMYK를 묻습니다. 색 하나를 여러 표기법으로 옮기는 일은 잦지만 손으로 계산하기는 번거롭습니다.
이 도구는 HEX·RGB·HSL·HWB·OKLCH·CMYK를 상호 변환하고, 동시에 WCAG 2.2 기준의 명도 대비율을 계산해 본문 텍스트·큰 텍스트·UI 요소가 각각 AA와 AAA를 통과하는지 판정합니다. 선택한 색을 기준으로 50부터 950까지의 명도 단계 팔레트도 자동 생성하므로 디자인 시스템의 색 스케일을 잡을 때 그대로 쓸 수 있습니다.
사용 방법
- 색 입력 — 왼쪽 색상 상자를 클릭해 피커로 고르거나, 입력창에
#FF5733,rgb(255 87 51),hsl(11 100% 60%),oklch(0.67 0.2 35)처럼 어떤 표기법으로든 입력합니다.tomato같은 CSS 색상 이름도 인식합니다. - 변환 결과 복사 — 오른쪽 목록에서 원하는 표기법 줄을 클릭하면 그 값이 클립보드에 복사됩니다. 알파 값이 포함된 색은
#RRGGBBAA와 슬래시 문법(rgb(r g b / a))으로 함께 표시됩니다. - 명도 대비 검사 — 아래 대비 검사 영역에서 글자색과 배경색을 각각 지정하면 대비율과 WCAG 판정이 실시간으로 갱신됩니다. 실제 텍스트 미리보기가 함께 표시되므로 숫자와 눈으로 동시에 확인할 수 있습니다.
- 팔레트 활용 — 명도 단계 팔레트의 색을 클릭하면 그 색이 기준 색으로 설정되어 이어서 검사할 수 있습니다. 'CSS 복사' 버튼을 누르면
--color-500: #...;형태의 CSS 변수 선언 전체가 복사됩니다.
자주 묻는 질문
대비율 4.5:1은 어디서 나온 숫자인가요?
WCAG 2.2의 레벨 AA 기준입니다. 본문 크기 텍스트는 배경과 최소 4.5:1의 명도 대비를 가져야 합니다.
18pt(약 24px) 이상이거나 14pt(약 18.66px) 이상이면서 굵은 글씨인 '큰 텍스트'는 3:1로 완화됩니다. 레벨 AAA를 목표한다면 각각 7:1과 4.5:1이 필요합니다. 버튼 테두리, 아이콘, 폼 입력 필드의 경계선 같은 비텍스트 UI 요소는 별도 기준으로 3:1이 요구됩니다.
대비 검사를 통과했는데도 읽기 힘들어 보입니다.
WCAG 2.x의 대비 공식이 사람의 실제 지각과 완전히 일치하지는 않기 때문입니다.
이 공식은 상대 휘도만 비교하므로 얇은 폰트, 어두운 배경 위의 밝은 글씨, 채도가 높은 색 조합에서 체감과 어긋나는 경우가 알려져 있습니다. WCAG 3에서 도입이 논의 중인 APCA는 이런 한계를 개선하려는 시도입니다. 실무에서는 숫자를 통과 기준으로 삼되, 실제 화면에서 눈으로 확인하고 폰트 두께를 함께 조정하는 편이 좋습니다.
OKLCH는 왜 쓰나요?
사람이 느끼는 밝기와 수치가 훨씬 잘 맞기 때문입니다.
HSL에서 hsl(60 100% 50%)(노랑)과 hsl(240 100% 50%)(파랑)은 명도가 똑같이 50%로 표시되지만 눈에는 노랑이 훨씬 밝게 보입니다. OKLCH는 인간 시각을 모델링한 색 공간이라 L 값이 같으면 실제로 비슷한 밝기로 보입니다.
덕분에 색조만 바꿔 가며 팔레트를 만들어도 밝기가 균일하게 유지되고, 두 색을 섞을 때 중간에 탁한 회색이 끼는 현상도 줄어듭니다. 모든 최신 브라우저가 지원하므로 새 디자인 시스템에서는 기본 표기법으로 쓸 만합니다.
알아두면 좋은 개념
HEX, RGB, HSL — 같은 색의 다른 좌표
HEX와 RGB는 표기만 다를 뿐 동일한 값입니다. #FF5733 은 빨강 255, 초록 87, 파랑 51을 16진수로 적은 것뿐입니다. 화면의 발광 소자와 직접 대응하므로 정확하지만, 값만 보고 색을 상상하기는 어렵습니다.
HSL은 색상(0~360°), 채도(%), 명도(%)로 나눠 사람이 조작하기 쉽게 만든 표기법입니다. '조금 더 밝게'가 L 값만 올리면 되므로 직관적이라 CSS 변수로 색 스케일을 관리할 때 많이 쓰입니다.
상대 휘도와 대비율 공식
대비율은 두 색의 상대 휘도 L1, L2를 구해 (L_밝은 + 0.05) / (L_어두운 + 0.05) 로 계산합니다. 결과는 1:1(같은 색)부터 21:1(검정과 흰색)까지의 값입니다.
상대 휘도를 구할 때 각 채널을 감마 보정한 뒤 0.2126·0.7152·0.0722의 가중치로 더하는데, 초록의 가중치가 압도적으로 큽니다. 사람 눈이 초록에 가장 민감하기 때문입니다. 그래서 같은 밝기의 파랑과 초록이라도 대비 계산 결과는 크게 달라집니다.
명도 스케일과 디자인 시스템
Tailwind CSS가 대중화한 50~950 스케일은 하나의 색조에 대해 11단계의 밝기를 정의합니다. 50이 가장 밝고 950이 가장 어두우며, 500이 보통 기준색입니다.
이렇게 정해 두면 다크 모드 대응이 단순해집니다. 라이트 모드에서 배경 50 · 글자 900을 썼다면 다크 모드에서는 배경 950 · 글자 100으로 뒤집는 식입니다. 다만 단순히 뒤집기만 하면 대비가 깨지는 조합이 생기므로, 이 도구의 대비 검사로 주요 조합을 확인한 뒤 확정하는 것이 좋습니다.