색상 도구
색상을 고르고 형식 간에 변환하는 도구 모음입니다. 모든 처리가 브라우저에서 이루어집니다.
색상 선택, 변환 및 검사
HEX, RGB, HSL, HSV 또는 OKLCH 값을 입력하면 같은 색상을 지원되는 모든 형식으로 확인할 수 있습니다. 색조, 채도, 밝기와 알파를 시각적으로 조절한 뒤 CSS, 디자인 소프트웨어 또는 스타일 가이드에 필요한 정확한 표기를 복사하세요.
명암비 패널은 흰색과 검은색 배경에 대한 WCAG 비율을 계산하고 일반 글자와 큰 글자의 통과 여부를 보여 줍니다. 생성된 밝기 단계는 하나의 색상을 일관된 인터페이스 팔레트로 확장할 때 유용합니다.
같은 색을 적는 여러 방법
Hex와 rgb()는 디스플레이가 직접 구동하는 채널 값입니다. hsl()과 hsv()는 그것을 색상, 채도, 명도(또는 밝기)로 재배열한 것으로, 색을 하나 고르기보다 어떤 색의 변형을 만들 때 생각하기 쉽습니다. oklch()는 지각에 맞도록 만들어진 색 공간에서 같은 색을 나타냅니다.
sRGB 색역 안에서는 이들 사이를 오가도 잃는 것이 없으므로, 쓸 형식은 목적지가 요구하는 것입니다. 대부분의 디자인 도구에서는 hex, CSS 사용자 정의 속성에서는 hsl이나 oklch, cmyk는 대략적인 참고용으로만 쓰세요. 실제 인쇄 변환은 잉크, 용지, 프로파일에 달려 있기 때문입니다.
HSL로 만든 팔레트가 고르지 않아 보이는 이유
HSL의 명도는 색이 얼마나 밝아 보이는지를 재는 값이 아니라 채널들의 기하학적 평균입니다. 노랑과 파랑이 모두 50%에 있는데 눈에는 하나가 거의 흰색으로 보입니다. 그 숫자를 고정해 만든 단계는 모두 한쪽으로 기울고, 결국 색마다 손으로 고치게 됩니다.
OKLCH는 이를 구조적으로 해결합니다. 명도에서 같은 간격이 보기에도 같은 간격이 되는 것이죠. 색상이 달라도 명도를 고정하면 그 줄은 정말로 한 가족처럼 읽힙니다. 틴트와 셰이드를 만들고, RGB로 섞을 때 중간에 나타나는 탁한 회색 없이 색을 보간하기에 알맞은 공간인 이유입니다.
명암비는 먼저 요건이고, 그다음이 판단이다
흰색과 검은색에 대해 보여 주는 비율은 WCAG 2 공식을 따르며 기준도 일반적인 값입니다. 본문 텍스트 4.5:1, 큰 텍스트와 인터페이스 요소 3:1, AAA 등급 7:1입니다. 소프트웨어를 조달하는 대부분의 현장에서 이는 선택이 아니며, 접근성 작업 중 비용이 가장 적게 드는 축에 속합니다.
다만 숫자가 전부는 아닙니다. 이 공식은 어두운 배경의 밝은 글자에서 명암을 과대평가하고 글꼴 굵기는 전혀 고려하지 않으므로, 기준을 통과한 아주 가는 글꼴도 읽기 어려울 수 있습니다. 비율을 맞춘 다음, 실제로 사용할 크기와 굵기로 결과를 눈으로 확인하세요.