HEX, RGB, HSL, HSV, CMYK 상호 변환 및 WCAG 웹 접근성 대비비 산출.
도구 개요 & 핵심 목적
HEX, RGB, HSL, CMYK, HSV 색상 코드 간 실시간 변환, 색상 스포이트(Eyedropper), 보색/유사색 팔레트 추천 및 WCAG 대비율 검사를 제공합니다.
단계별 올바른 사용 순서 및 절차
1STEP 1
컬러 피커 휠에서 색상을 클릭하거나 HEX/RGB 수치를 직접 입력합니다.
2STEP 2
화면 상의 특정 색상을 추출하려면 [스포이트(Eyedropper)] 아이콘을 누릅니다.
3STEP 3
HEX, RGB, HSL, CMYK 수치가 동시 변환되는 결과표에서 클릭하여 바로 복사합니다.
4STEP 4
텍스트 대비율(Contrast Ratio)을 체크하여 접근성(WCAG AA/AAA) 적합 여부를 평가합니다.
실무 및 일상에서의 상세 활용 사례
3 가지 대표 시나리오시나리오 #1
웹 디자이너 UI 컬러 팔레트 구축
메인 브랜드 컬러 `#3B82F6` 입력 시 연관된 보색, 유사색, 단색(Monochromatic) 팔레트 5종을 자동으로 얻어 디자인 시스템에 적용합니다.
Tailwind CSS 색상 팔레트와 호환됩니다.시나리오 #2
인쇄물 CMYK ↔ 웹용 RGB 상호 변환
웹용 HEX `#FF5733` 코드를 인쇄용 CMYK `0%, 66%, 80%, 0%`로 변환하여 오프라인 리플렛 출력을 준비합니다.
인쇄 시 색상 왜곡을 방지할 수 있습니다.시나리오 #3
웹 접근성(WCAG) 시각 장애인 가독성 검사
배경색(흰색) 대비 글자색(회색)의 색상 대비율이 4.5:1 이상을 만족하는지 검사하여 웹 접근성 인증을 통과합니다.
텍스트 독음 편의성을 보장합니다.색공간과 변환 기준
CIE Color Space Mathematical Transformation Matrix전문가 활용 팁 및 주의사항
HSL 모델은 Hue(색상 0~360°), Saturation(채도 %), Lightness(명도 %)로 이루어져 테마 어둡기/밝기 조절에 가장 직관적입니다.웹 브라우저의 EyeDropper API는 화면 어디든 원클릭으로 픽셀 색상을 스캔해 줍니다.
자주 묻는 질문 (FAQ)
출처 및 참고자료
W3C - CSS Color Module Level 4 표준MDN Web Docs - CSS <color> 값 레퍼런스적용 기준: sRGB(IEC 61966-2-1) 및 WCAG 2.1 명도 대비 계산식 · 2026-08-28 확인