HEX·RGB·HSL·HSV·CMYK를 서로 변환하고 WCAG 명도 대비와 AA/AAA 통과 여부를 확인해요.
어느 칸을 고쳐도 나머지가 바로 바뀝니다. HEX 칸에는 rgb(), hsl(), tomato 같은 CSS 색 이름도 붙여넣을 수 있어요. 숫자 칸은 ↑↓ (Shift는 10씩). HSL·HSV·CMYK는 다시 입력해도 같은 색이 나오도록 필요할 때만 소수 첫째 자리까지 보여줘요. CMYK는 색 프로파일 없는 단순 변환이라 인쇄용 값과는 다를 수 있습니다.
큰 글자 = 24px(18pt) 이상, 또는 굵게 18.66px(14pt) 이상. 아이콘·입력창 테두리 같은 UI 요소는 3:1 이상 (1.4.11).
큰 글자 24px — 다람쥐 헌 쳇바퀴에 타고파
굵은 18.66px — The quick brown fox jumps
본문 16px — 디자인 시스템의 본문 텍스트는 충분한 대비를 가져야 누구나 편하게 읽을 수 있습니다.
캡션 12px — 작은 글자일수록 대비가 더 중요해요.
각 칸은 현재 색에 흰색/검정을 0~90% 섞은 값(sRGB 혼합, Sass mix()와 동일)입니다. 클릭하면 HEX 복사, 더블클릭하면 그 색으로 바뀝니다.
화면에 표시되는 8비트 RGB(0~255)를 기준으로 계산해요. HSL·HSV·CMYK는 정수로 반올림하면 원래 색으로 돌아오지 않는 경우가 있어서, 필요할 때만 소수 첫째 자리까지 보여줘요. 그래서 복사한 값을 다시 입력해도 같은 HEX가 나와요.
WCAG 2.x 웹 접근성 기준이에요. 일반 글자는 AA 4.5:1, AAA 7:1 이상, 큰 글자(24px 이상 또는 굵게 18.66px 이상)는 AA 3:1, AAA 4.5:1 이상이면 통과예요. 예를 들어 흰 배경에 #777777은 4.48:1이라 본문 AA에 미달해요. 반올림 때문에 기준을 넘은 것처럼 보이지 않도록 경계값은 내려서 표시해요.
색 프로파일 없이 RGB를 수식으로 바꾼 단순 변환이라 실제 인쇄 결과와는 다를 수 있어요. 인쇄물은 일러스트레이터·인디자인 같은 툴에서 인쇄소가 안내한 프로파일로 변환해 확인하는 게 안전해요.
#RRGGBBAA, rgba(), hsla()를 붙여넣어도 인식은 되지만 투명도(알파)는 빼고 불투명한 색으로만 변환해요. 명도 대비도 불투명한 색끼리 계산해요.