컬러 변환기
어떤 색이든 HEX, RGB, HSL, HSV 사이로 변환. 피커를 쓰거나 아무 필드에 입력 — 나머지가 라이브로 업데이트. 접근성 있는 색 조합을 위한 WCAG 명도 대비 체커 포함.
디자인 시스템 색 이식, 접근성 있는 전경/배경 페어 선택, 도구 간 값 정렬에 유용합니다.
WCAG 명도 대비 체커
Pick a foreground and background color to check whether they meet the accessibility minimums from WCAG 2.1.
Normal text at 16 px — the quick brown fox jumps over the lazy dog.
Large text at 24 px — quick brown fox.
WCAG 임계값
- AA — normal text: contrast ratio ≥
4.5:1. - AA — large text (18 pt or 14 pt bold): ≥
3:1. - AAA — normal text: ≥
7:1. - AAA — large text: ≥
4.5:1. - UI components and graphical objects: ≥
3:1against adjacent colors.
비율은 WCAG 2.1의 상대 휘도에서 계산되며, 선형화된 sRGB 채널과 가중치 0.2126·R + 0.7152·G + 0.0722·B를 사용합니다.
포맷 노트
- HEX accepts
#rgb,#rgba,#rrggbband#rrggbbaaforms. The leading#is optional in the input. - RGB input accepts
rgb(r, g, b),rgba(r, g, b, a)and bare comma- or space-separated triplets like59, 130, 246. - HSL: hue is 0–360°, saturation and lightness are percentages.
hsl(217 91% 60%)(CSS Color 4) is accepted alongside the legacy comma form. - HSV (also called HSB) is not in CSS — it's shown here because it's useful in design tools. The display form is
hsv(h, s%, v%).
자주 묻는 질문
HSL과 HSV가 Photoshop / Figma 값과 정확히 같지 않은 이유는?
반올림 때문입니다. 색상 (hue), 채도 (saturation), 명도 (lightness) 는 연속값이며 도구마다 다르게 반올림합니다. hue 1° 또는 saturation 1% 차이는 예상 가능하며 시각적으로 동일합니다.
명도 대비 체커가 알파 (투명도) 를 고려하나요?
아니요. WCAG 비율은 완전히 불투명한 색을 전제로 합니다. 전경이 반투명이라면 먼저 배경과 합성하여 결과로 나온 불투명한 색을 확인하세요.
새로운 명도 대비 알고리즘 APCA는 어떤가요?
APCA는 WCAG 3.0 (아직 초안) 에서 WCAG 2.x 비율을 대체할 후보입니다. 오늘 운영 환경에서는 감사관과 Lighthouse가 확인하는 것은 WCAG 2.1 비율입니다.
서버로 무언가 전송되나요?
아니요. 모든 변환과 명도 대비 계산은 브라우저에서 실행됩니다.