색상 선택기 & 변환기
NewHEX, RGB, HSL 색상 코드 변환 및 웹 접근성 WCAG 명암비 계산기.
r
g
b
H
°
S
%
L
%
명도 대비 비율 (WCAG)
흰색 텍스트 기준3.68:1✗ AA
검은색 텍스트 기준5.71:1✓ AA
이 배경색에서의 샘플 텍스트 — #3B82F6 / rgb(59, 130, 246) / hsl(217, 91%, 60%)
도구 소개
색상 선택기 & 변환기(Color Picker)는 HEX(#rrggbb), RGB(0–255), HSL(Hue/Saturation/Lightness) 형식 간의 상호 변환을 지원하며, 흰색/검은색 배경 대비 WCAG 명암비(Contrast ratio)를 자동 계산하여 접근성을 검증해 줍니다.
심층 엔지니어링 기술 가이드
디지털 색상 체계(HEX, RGB, HSL, OKLCH)와 WCAG 웹 접근성 대비율
24비트 트루컬러 RGB와 16진수 HEX 표기법, HSL의 직관적 색상 모델, 지각적 균일성을 갖춘 차세대 CSS OKLCH, 그리고 WCAG 2.1 텍스트 명도 대비 공식을 해설합니다.
사용 방법
- 1HEX, RGB, HSL 필드 중 하나에 색상값을 입력하면 다른 형식들도 자동으로 변환됩니다.
- 2색상 팔레트나 휠을 사용하여 시각적으로 색상을 선택합니다.
- 3WCAG 대비율을 확인하여 웹 접근성 기준을 충족하는지 검증합니다.
- 4원하는 색상 코드 형식(HEX/RGB/HSL)을 클릭하여 복사합니다.
자주 묻는 질문 (FAQ)
- HSL 색상 체계의 장점은 무엇인가요?
- HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)를 직관적으로 조절할 수 있어 디자이너가 같은 색조에서 더 밝거나 어두운 톤을 만들기에 매우 편리합니다.
- WCAG 명암 대비율(Contrast ratio)이란 무엇인가요?
- 웹 접근성 지침(WCAG)에 따른 본문 텍스트 최소 대비율은 4.5:1 이상(AA 등급)을 권장하며, 저시력 사용자도 텍스트를 명확히 읽을 수 있도록 지원하기 위함입니다.