PICKERCONVERTERCONVERSION
컬러 피커 & 변환기
HEX, RGB, HSL, OKLCH 색상 형식 간의 실시간 변환 및 명도비 검사, 인접 Tailwind 색상 추출을 수행합니다.
슬라이더 세밀 조절
RED59
GREEN130
BLUE246
ALPHA100%
색상 변환 결과
HEX#3b82f6
RGB / RGBArgb(59, 130, 246)
HSL / HSLAhsl(217, 91%, 60%)
OKLCHoklch(0.623 0.188 259.8)
WCAG 명도 대비 검사
흰색 배경 대비 (#FFFFFF)
3.68:1
AA FailAAA Fail
가독성 예시 텍스트입니다.
검은색 배경 대비 (#000000)
5.71:1
AA PassAAA Fail
가독성 예시 텍스트입니다.
가장 가까운 Tailwind CSS 색상
작성하신 색상값과 가장 유사도가 높은 Tailwind 기본 팔레트 색상을 알려드립니다. 클릭하여 클래스명을 즉시 복사하세요.
blue-500
도구 설명 및 사용 방법
웹 프론트엔드 실무에 필수적인 다양한 색상 포맷(HEX, RGB, HSL, OKLCH)을 상호 변환하고, 화면 색상 스포이트 기능 및 대비 검사(WCAG) 등을 한 번에 제공하는 유틸리티입니다. 접근성(A11y) 검증에 최적입니다.
사용 단계
1
원하는 색상값(예: #3b82f6 또는 rgb(59, 130, 246))을 입력하거나 네이티브 색상 선택창을 엽니다.
2
지원되는 브라우저에서는 "스포이트" 버튼을 눌러 화면에 뜬 아무 색상이나 클릭해 픽업합니다.
3
변환 결과창에서 HEX, RGB, HSL, OKLCH 복사 버튼을 눌러 활용합니다.
4
하단의 명도 대비 검사와 Tailwind 색상 매칭 결과를 보고 UI 가독성과 어울리는 코드를 손쉽게 선택합니다.
작동 원리 및 상세 설명
Color Picker & Converter는 브라우저의 색상 파싱(Color.parse)과 최신 CSS Color Module Level 4 / 5 스펙(OKLCH, color-mix 등)을 활용합니다. HEX/RGB/HSL 간 변환은 비교적 간단한 수학식이지만, OKLCH는 Oklab 색 공간을 기반으로 지각적 균일성을 제공하여 디자이너가 더 직관적으로 채도/명도를 조정할 수 있게 합니다.
WCAG 대비 검사와 Tailwind 매칭은 실무에서 가장 많이 쓰이는 두 가지 실용 기능입니다. EyeDropper API는 Chromium 기반 브라우저에서 시스템 전역 색상 피커를 제공합니다.
모든 연산이 클라이언트 로컬에서 수행되므로, 비공개 디자인 가이드나 고객 브랜드 컬러도 안전하게 분석하고 변환할 수 있습니다.
자주 묻는 질문 (FAQ)
WCAG 명도 대비 비율은 어떻게 계산되나요?
WCAG 2.1/2.2는 L1/L2 상대 휘도(relative luminance)를 사용해 (L1 + 0.05) / (L2 + 0.05) 비율을 계산합니다. 4.5:1 이상이 AA 일반 텍스트 기준, 3:1은 큰 텍스트 기준입니다. 본 도구는 최신 WCAG 수식을 적용해 실시간으로 통과/실패를 알려줍니다.
OKLCH가 기존 HSL보다 나은 점은 무엇인가요?
OKLCH는 지각적으로 균일한(perceptually uniform) 색 공간으로, 채도나 명도를 조정할 때 색상 왜곡이 적습니다. 현대 CSS (color-mix, relative color syntax)와 Tailwind v4에서 점점 더 많이 사용되고 있습니다.
선택한 색상 값이 외부로 전송되나요?
전송되지 않습니다. 모든 변환, EyeDropper, 대비 계산, Tailwind 매칭은 브라우저에서 로컬로 수행됩니다.
코드 사용 예시
Tailwind + CSS 변수로 색상 시스템 구축 시 사용
css
// 디자인 토큰에서 추출한 색상을 Tailwind 설정에 반영
const primary = '#3b82f6'; // 도구에서 복사한 값
// tailwind.config.js 또는 CSS 변수
:root {
--color-primary: #3b82f6;
}
/* 또는 OKLCH로 변환해서 사용 (더 나은 그라디언트) */
--color-primary: oklch(0.62 0.18 250);도구로 색상을 검증(대비 + Tailwind 매치)한 후, 실제 디자인 토큰/CSS 변수로 저장하여 Tailwind나 CSS-in-JS에서 일관되게 사용하는 패턴.