색상 변환기·명암비 검사기

이 도구에 대하여

같은 sRGB 색상을 나타내는 네 가지 표기법

HEX, RGB, HSL, HWB는 웹의 기본 색 공간인 sRGB에서 색상을 표기하는 네 가지 방법입니다. HEX와 RGB는 빨강, 초록, 파랑 채널을 각각 0에서 255 사이의 값으로 직접 나타냅니다. HSL은 색조 각도, 채도, 명도로 나타내고, HWB는 같은 색조 각도에 섞을 흰색과 검은색의 양으로 나타냅니다. 이들 사이의 변환은 표기만 바꿀 뿐 색상은 그대로입니다.

#5a3ff080 같은 8자리 hex 코드나, rgb(90 63 240 / 0.5)처럼 슬래시 뒤에 오는 네 번째 값은 알파 채널을 더합니다. 공백으로 구분하는 형식은 CSS Color Level 4 문법으로 현재의 모든 브라우저에서 작동하며, 쉼표 형식인 rgba(90, 63, 240, 0.5)는 오래된 도구를 위해 제공됩니다.

OKLCH와 OKLab의 장점

OKLab은 Björn Ottosson이 2020년에 설계한 색 공간으로, 수치상 같은 간격이 눈에도 같은 간격으로 보이도록 만들어졌습니다. OKLCH는 같은 공간을 극좌표로 나타낸 것으로, 0에서 1 사이의 명도, 크로마(색의 선명한 정도), 색조 각도로 구성됩니다. 명도가 같은 두 OKLCH 색상은 거의 같은 밝기로 보입니다. HSL은 그렇지 않아서, 명도 50%인 노랑과 파랑은 밝기가 크게 다릅니다.

OKLCH는 sRGB 화면이 표시할 수 없는 색상도 나타낼 수 있습니다. 그런 색상을 입력하면 이 도구는 명도와 색조를 유지한 채 색상이 sRGB 안에 들어올 때까지 크로마를 낮추고, 그렇게 했다는 사실을 알려 줍니다.

명암비 계산 방법

WCAG 2는 명암비를 (L1 + 0.05) / (L2 + 0.05)로 정의합니다. 여기서 L1과 L2는 각각 더 밝은 색과 더 어두운 색의 상대 휘도입니다. 결과는 두 색이 같을 때의 1:1부터 흰색 바탕의 검은색일 때의 21:1까지입니다.

AA 등급은 일반 텍스트에 최소 4.5:1, 큰 텍스트에 3:1을 요구하고, AAA 등급은 각각 7:1과 4.5:1을 요구합니다. 큰 텍스트란 24 CSS 픽셀 이상, 굵은 글꼴이면 약 18.7픽셀 이상인 텍스트를 말합니다. 여기 표시되는 명암비는 내림한 값입니다. 4.499:1인 조합은 4.5:1을 충족하지 않기 때문입니다.

이 도구가 값을 계산하는 방법

변환은 브라우저에서 JavaScript로 실행되며, sRGB 전달 함수와 OKLab 색 공간과 함께 공개된 행렬을 사용합니다. 각 출력 값은 이 공식으로 같은 8비트 색상으로 다시 변환되도록 고른 몇 자리의 소수로 반올림됩니다. 브라우저는 OKLCH와 OKLab을 약간 다른 상수로 계산할 수 있으므로, 붙여 넣은 OKLCH나 OKLab 값이 한 채널에서 255단계 중 한두 단계 어긋날 수 있으며, 채도가 높은 초록색에서 가장 자주 그렇습니다. 가장 가까운 색상 이름은 OKLab에서 거리가 가장 가까운 색상입니다.