색상 변환기 및 대비 검사기

이 도구는 HEX, RGB, HSL, CMYK 네 가지 색상 형식을 실시간으로 상호 변환합니다. 색상 선택기로 색을 고르거나 아무 칸에나 값을 입력하면 나머지 세 칸이 즉시 바뀌고, 칸마다 복사 버튼이 있습니다. 예를 들어 앰버 색상 #F59E0B는 rgb(245, 158, 11), hsl(38, 92%, 50%), cmyk(0%, 36%, 96%, 4%)로 변환됩니다. HEX 칸은 #F90 같은 3자리 축약형도 받아 #FF9900으로 펼쳐 줍니다.

형식마다 쓰임새가 다릅니다. HEX는 웹 코드와 디자인 툴에서 가장 흔한 표기이고, RGB는 화면의 빨강·초록·파랑 빛에 대응합니다. HSL은 색상·채도·명도로 색을 표현해 같은 계열에서 조금 밝은 색을 만들 때 L 값만 바꾸면 되므로 CSS 작성에 특히 편리합니다. CMYK는 인쇄에 쓰는 4색 잉크를 나타냅니다. RGB·HSL·CMYK를 입력할 때는 rgb(255, 153, 0), hsl(36, 100%, 50%), cmyk(0%, 40%, 100%, 0%)처럼 쉼표로 구분한 정수로 입력하세요. 투명도(알파)는 지원하지 않습니다.

여기서 CMYK는 RGB에서 간단한 공식으로 계산한 값이며 ICC 색상 프로파일을 적용하지 않습니다. 실제 인쇄 결과는 용지, 잉크, 인쇄기에 따라 달라지므로 인쇄 전에는 인쇄소의 컬러 칩이나 설정을 기준으로 삼으세요. 또한 HSL은 정수로 반올림하기 때문에 HSL에서 HEX로 되돌릴 때 가끔 한 단계 차이가 날 수 있는데, 이는 정상적인 반올림 결과입니다.

‘명도 대비 검사’ 탭에서 글자색과 배경색을 고르면 WCAG 2.1 공식으로 명도 대비를 계산하고, 일반 텍스트(AA 4.5:1, AAA 7:1), 큰 텍스트(AA 3:1, AAA 4.5:1), UI 구성 요소(3:1) 기준 통과 여부와 실시간 미리보기를 보여 줍니다. 예를 들어 흰 배경 위 #767676 회색 글자는 4.54:1로 AA를 간신히 통과하지만 #777777은 4.47:1로 불합격입니다. 색상 제안까지 포함한 자세한 분석은 이 사이트의 색상 대비 분석기를 이용하세요.