색상 변환기 & 피커
HEX, RGB, HSL, HSV, CMYK 색상 코드를 실시간으로 변환하고 팔레트 및 대비율을 확인합니다.
색상 변환기 및 인터랙티브 팔레트 생성기 소개
도구 개요 & 개인정보 보호
웹 디자이너, UI/UX 전문가 및 프론트엔드 개발자를 위한 고정밀 색상 변환 도구입니다. HEX, RGB, HSL, HSV, 인쇄용 CMYK 색상 코드를 실시간으로 상호 변환하고, WCAG 웹 접근성 명암비(AA/AAA 기준) 검사 및 명암 틴트/셰이드 팔레트, 보색 및 유사색 조화 팔레트를 100% 브라우저 로컬에서 안전하게 생성합니다.
색상 변환기 및 피커 사용 방법
- HEX 코드 입력란에 원하는 색상을 입력하거나 컬러 스와치 또는 스포이트(EyeDropper)로 화면 색상을 추출합니다.
- 실시간 색상 변환기를 통해 HEX, RGB, HSL, HSV, CMYK 코드가 즉시 동기화되는 것을 확인합니다.
- 우측 패널에서 각 색상 포맷 옆의 'Copy' 버튼을 눌러 CSS/디자인 코드에 적용할 코드를 복사합니다.
- 좌측 하단에서 흰색 및 검은색 배경에 대한 WCAG 명암비(4.5:1 AA 통과 여부)를 점검합니다.
- 하단의 틴트/셰이드 9단계 팔레트 및 보색/유사색 하모니 팔레트를 클릭하여 세부 색조를 탐색합니다.
핵심 기능 및 특징
HEX / RGB / HSL / HSV / CMYK 5단 변환
웹 표준 CSS 컬러 포맷부터 출판 인쇄용 CMYK 잉크 비율까지 1초 만에 상호 변환합니다.
WCAG 2.1 접근성 명암비 실시간 판정
텍스트 가독성을 보장하기 위해 흰색/검은색 배경 대비 비율을 계산하고 AA 적합 여부를 안내합니다.
9단계 틴트 & 셰이드(Tints & Shades) 추출
기본 색상의 명도를 10%부터 90%까지 세분화한 디자이너용 명암 팔레트를 자동 렌더링합니다.
보색(Complementary) & 유사색(Analogous) 하모니
색상환(Color Wheel) 180° 보색 및 ±30° 유사색 배색 조합을 클릭 한 번으로 제공합니다.
실무 활용 분야
웹 UI 디자인 시스템 색상 토큰 정의
Primary, Secondary 브랜드 색상의 100~900단계 명암 팔레트 및 CSS 변수 코드 구성
웹 접근성(A11y) 텍스트 명암비 검수
버튼 텍스트나 배경색의 명암비가 4.5:1 이상을 충족하는지 사전 검증
인쇄물 제작 시 웹 컬러(RGB) ➔ CMYK 변환
웹사이트 로고 및 그래픽 에셋의 CMYK 인쇄 잉크 배합 비율 확인
화면 색상 즉시 추출 (EyeDropper)
참고 웹사이트나 디자인 시안의 특정 픽셀 색상을 클릭 한 번으로 스포이트 추출
색상 배색 및 접근성 전문가 실무 팁
- 일반 본문 텍스트는 WCAG AA 기준인 4.5:1 이상의 명암비를 충족해야 저시력 사용자도 편안하게 읽을 수 있습니다.
- RGB는 빛의 삼원색(가산 혼합)이며, CMYK는 잉크의 사원색(감산 혼합)이므로 모니터와 실제 인쇄물의 채도 차이가 발생할 수 있습니다.
- HSL의 H(Hue: 0~360)에 180을 더하면 언제나 완벽한 대비를 이루는 보색(Complementary Color)을 얻을 수 있습니다.
- 눈의 피로를 줄이려면 순수한 검정(#000000) 대신 짙은 네이비나 다크 그레이 계열 색상을 본문에 사용하는 것이 좋습니다.
자주 묻는 질문 (FAQ)
Chrome, Edge, Opera 등 최신 Chromium 기반 브라우저에서 화면 전체 픽셀 추출을 완벽 지원합니다.
RGB는 화면 발광 색 공간이고 CMYK는 인쇄 잉크 색 공간이므로 물리적인 표현 영역(Color Gamut)의 차이가 존재하기 때문입니다.
웹 콘텐츠 접근성 지침으로 일반 텍스트는 최소 4.5:1, 대형 텍스트(18pt 이상)는 3:1 이상의 명암비를 권장합니다.
네! 포맷별 우측 'Copy' 버튼을 누르면 클립보드에 즉시 복사됩니다.
전혀 전송되지 않습니다. 모든 계산과 팔레트 생성이 브라우저 내부에서 100% 로컬로 처리됩니다.
네, 아무런 제한 없이 영구적으로 완전 무료로 제공됩니다.