Guide

색상 변환과 대비 검토

HEX, RGB, HSL 값을 같은 색상 기준으로 맞추고 흰색·검은색 배경 대비를 확인해 UI 색상 결정을 빠르게 검산합니다.

디자인 툴에서 받은 HEX 값을 CSS, JavaScript, 문서에 맞게 RGB와 HSL 값으로 바로 변환합니다.

선택한 색상이 밝은 배경과 어두운 배경에서 읽히는지 대비 비율을 함께 확인합니다.

각 형식 값을 바로 복사할 수 있어 테마 변수, 컴포넌트 스타일, 문서 표기 작업을 줄입니다.

Workflow

사용 순서

Examples

입력

#2DD4BF

결과

HEX  #2DD4BF
RGB  rgb(45, 212, 191)
HSL  hsl(173, 66%, 50%)

입력

전경 #64748B / 배경 #FFFFFF

결과

대비비 4.76:1
본문 AA 통과 · AAA 미달

WCAG 기준은 본문 AA 4.5:1, AAA 7:1이고 큰 텍스트는 AA 3:1입니다.

Troubleshooting

밝은 배경의 연회색 텍스트가 가장 흔한 탈락 사례입니다. 4.5:1을 못 넘기면 명도를 낮추거나 글자 크기를 키워 큰 텍스트 기준(3:1)으로 맞추세요.

대비비는 최종적으로 눈에 보이는 색으로 계산해야 합니다. 반투명 색은 배경과 합성된 뒤의 실제 색을 넣어야 정확합니다.

Review

계산된 대비 비율은 빠른 기준점입니다. 실제 접근성 판단은 글자 크기, 굵기, 상태 색상, 주변 배경을 같이 봐야 합니다.

HSL은 색조를 유지한 채 명도와 채도를 조절하기 좋아 hover, disabled, border 색상을 만들 때 유용합니다.