달달툴

색상 변환기

HEX, RGB, HSL 표기를 서로 바꿉니다. 배경과 글자색의 명암 대비가 접근성 기준에 맞는지도 확인합니다.

HEX
#3366cc
RGB
rgb(51, 102, 204)
HSL
hsl(220, 60%, 50%)

명암 대비 검사

이 조합으로 표시한 본문 예시입니다.

대비 5.37 대 1 — 본문 기준 통과, 큰 글자 기준 통과

사용 방법

색상값을 입력하면 나머지 표기가 자동으로 계산됩니다. HEX는 샵을 붙이지 않아도 되고 세 자리 축약형도 인식합니다.

색상 견본을 함께 보여주므로 값만 보고 어떤 색인지 짐작하지 않아도 됩니다. 디자인 시안의 값을 코드로 옮길 때 쓰기 좋습니다.

대비 검사에서는 배경색과 글자색을 넣어 명암 대비를 계산합니다. 일반 본문은 4.5대 1, 큰 글자는 3대 1이 접근성 기준입니다. 기준에 못 미치면 저시력 사용자가 글을 읽기 어렵습니다.

입력한 값은 서버로 전송되지 않습니다. 브라우저 안에서만 계산됩니다.