이 도구가 하는 일
CSS 색상 값을 붙여넣거나 색상 선택기로 고르면 HEX·RGB·HSL·HWB·LAB·LCH·OKLCH로 바뀌어 보이고, 각 형식마다 복사 버튼이 있습니다. 색상 견본과 알파(투명도) 슬라이더로 반투명 상태의 색도 확인할 수 있습니다. 변환기 아래의 명도 대비 검사기는 두 색을 WCAG 2 기준과 비교하고 예시 문장으로 미리 보여 줍니다.
색상 모델 간단 정리
- HEX·RGB는 색을 빨강·초록·파랑의 양(0 ~ 255 또는 0 ~ 100%)으로 나타냅니다.
- HSL은 여기에 색상(hue)·채도(saturation)·명도(lightness)를 더해, RGB 숫자만 볼 때보다 이해하기 쉽습니다.
- HWB(색상·흰색량·검정량)는 색상에 흰색과 검정을 섞는 방식이라 밝은 색조나 어두운 색조를 만들기 편합니다.
- LAB·LCH는 사람이 색을 인지하는 방식에 가깝게 명도(L)와, 초록-빨강·파랑-노랑 축(LAB) 또는 채도·색상(LCH)으로 색을 나타냅니다.
- OKLCH는 LCH를 더 정교하게 다듬어 지각적으로 균일하게 만든, 최신 웹 환경을 위한 색공간입니다.
OKLCH가 쓸모 있는 이유
HSL에서는 “명도” 숫자를 그대로 두고 색상만 바꿔도 실제로는 훨씬 밝거나 어둡게 보일 수 있습니다. 예를 들어 명도 50%인 순수한 노란색은 같은 명도의 파란색보다 훨씬 밝게 보입니다. OKLCH의 명도 값은 실제로 눈에 보이는 밝기를 따라가도록 설계되어 있어서, 명도 값만 맞추면 색상이 달라져도 비슷한 밝기로 보이는 색상 팔레트를 만들 수 있고, 채도를 바꿀 때도 밝기가 의도치 않게 변하는 일이 줄어듭니다.
WCAG 명도 대비 계산 방법
명도 대비 검사기는 WCAG 2 공식을 그대로 따릅니다. 먼저 각 색의 상대 명도(선형 빨강·초록·파랑 값에 가중치를 곱해 더한 값)를 구하고, 더 밝은 색의 명도를 L1로 두어 (L1 + 0.05) / (L2 + 0.05)를 계산합니다. 결과는 4.5:1 같은 비율로 나옵니다.
- AA, 일반 텍스트: 4.5:1
- AA, 큰 텍스트: 3:1
- AAA, 일반 텍스트: 7:1
- AAA, 큰 텍스트: 4.5:1
“큰 텍스트”는 일반 굵기로 18pt(약 24px) 이상이거나, 굵게(bold)로 14pt(약 19px) 이상인 텍스트를 말합니다.
색역을 벗어난 색
LAB·LCH·OKLCH는 sRGB보다 넓은 범위를 다루기 때문에, 보통 화면으로는 표시할 수 없는 색까지 나타낼 수 있습니다. 이런 색을 입력하면 이 도구가 이를 알려 주고, HEX·RGB 값으로는 사용 중인 sRGB 화면이 표현할 수 있는 가장 가까운 색을 보여 줍니다.