홈 · 이미지 · 컬러 픽커

컬러 픽커·색상 변환·팔레트 추출

Hex·RGB·HSL·CMYK 4종 동시 변환 + 이미지에서 주요 색상 8개 자동 추출 + WCAG AA·AAA 가독성 검사.

이미지가 외부 서버로 전송되지 않습니다. 색상 분석은 브라우저 안에서만 처리되며, 네트워크 요청·서버 저장 없음.

컬러 픽커 · 4종 코드 동시 변환

[ AdSense 광고 자리 ]

WCAG 가독성 대비 (Contrast)

vs 흰색 배경
-
vs 검정 배경
-

WCAG 2.1 기준 · 본문 텍스트 AA 4.5+, AAA 7+ · 큰 글씨 (18pt+ 또는 14pt+ 굵게) AA Large 3+, AAA 4.5+

이미지에서 팔레트 추출

업로드된 이미지 미리보기

사용 방법 — 3가지 흐름

1

색상 변환

  1. 컬러 픽커 클릭 또는 Hex 직접 입력
  2. 4종 코드(Hex·RGB·HSL·CMYK) 즉시 표시
  3. 코드 박스 클릭 → 클립보드 자동 복사
2

이미지 팔레트 추출

  1. 이미지 드래그·드롭 또는 업로드
  2. 주요 색상 8개 자동 추출
  3. swatch 클릭 → 컬러 픽커 로딩
3

WCAG 가독성 검증

  1. 색 선택 후 자동 대비 계산
  2. 흰색·검정 배경 vs 글자 등급 표시
  3. 본문 텍스트는 AA 이상 권장

이런 상황에 씁니다

🎨
디자이너 — 빠른 변환

Figma·Photoshop 외부에서 Hex ↔ RGB ↔ HSL 즉시 변환. 작업 흐름 단절 X.

📸
블로거·크리에이터

좋아하는 영화 포스터·사진에서 톤 8색 추출 → SNS·블로그 헤더 컬러 통일.

💻
웹 개발자

디자인 시안 → Tailwind config·CSS 변수 (--brand) 매핑.

♿
접근성·UI/UX

본문 글씨 대비 AAA 등급 → 시각장애·고령 사용자 친화. AdSense RPM 영향.

📈
마케터

경쟁사 광고에서 핵심 색 추출 → 우리 광고 컬러 분석·트렌드 추적.

🏠
인테리어·패션

옷·인테리어 사진 → 메인 색 8개 추출 → 매칭 컬러 코드 찾기.

📚
학생·디자인 학습

Hex 16진수·RGB 혼합·HSL 색조·WCAG 접근성 기준 — 도구로 자연 학습.

색상 코드 4종 — 언제 어떤 거?

Hex 기본
#3F6F54

16진수 6자리 (R·G·B 각 2자리). CSS·HTML 표준, 가장 짧음.

RGB JS
rgb(63, 111, 84)

10진수 0-255. JS·SVG·캔버스, 알파 (RGBA) 추가 가능.

HSL 조정
hsl(146, 28%, 34%)

색조 0-360°·채도·명도. lighter/darker 조정 직관적.

CMYK 인쇄
38, 0, 24, 56

Cyan·Magenta·Yellow·Black. 인쇄 시안 (정확값은 ICC 적용).

WCAG 대비 등급

WCAG 2.1 기준 — 글자와 배경의 luminance 비율로 가독성 측정.

AAA 7.0+
강화 접근성 — 의료·정부·공공 사이트
AA 4.5+
본문 표준 — 일반 사이트·블로그 목표
AA Large 3.0+
큰 글씨 (18pt+, 14pt+ 굵게)
Fail < 3.0
가독성 부족 — 사용 자제

참고: AdSense 도 가독성을 평가 지표로 사용. 대비 낮으면 RPM·CTR 손해.

팔레트 추출 알고리즘

16단계 RGB 양자화 + 빈도 정렬

k-means 같은 무거운 ML 대신, 가볍고 일관된 알고리즘 사용.

STEP 1이미지를 canvas 에 100×100 px 로 축소
STEP 2각 픽셀 RGB 채널을 4비트(16단계) 양자화
STEP 3같은 bin 의 픽셀 빈도 카운트
STEP 4상위 8개 bin 평균 RGB 반환
✓ 장점
50ms 이하 빠름 · 확률적 X 일관 결과 · 외부 라이브러리 0
△ 한계
k-means 보다 색조 클러스터 정확도 약간 낮음 (일반 사용엔 충분)

자주 쓰는 컬러 시스템

Tailwind CSS
slate-500: #64748B
blue-600: #2563EB

10단계 명도 스케일. 개발자 친화.

Material Design
Indigo 500: #3F51B5

Google 가이드라인. 안드로이드 친화.

iOS Human Interface
System Blue: #007AFF

Apple 시스템 컬러. iOS·macOS 권장.

Pantone
Living Coral 16-1546

인쇄·패션 표준 (라이선스 필요).

관련 도구

이미지 압축JPG·PNG·WebP — 용량 줄이기 EXIF 메타데이터 제거GPS·날짜·기종 박힌 사진 정리 이미지 리사이즈px·% 단위 크기 조정 이미지 포맷 변환PNG ↔ JPG ↔ WebP ↔ AVIF

자주 묻는 질문

Hex 와 RGB 의 차이는?

같은 색을 다른 표기로 나타낸 것. Hex 는 16진수 (#3F6F54), RGB 는 10진수 (rgb(63,111,84)). CSS·HTML 에서는 Hex 가 짧아 자주 쓰이고, JS·캔버스에서 색을 다룰 때는 RGB 가 편리함. 둘 다 같은 색을 표현.

WCAG AA·AAA 등급 기준?

WCAG 2.1 기준 본문 텍스트 AA 4.5+, AAA 7+. 큰 글씨 (18pt 이상 또는 14pt 굵게) 는 AA Large 3+, AAA 4.5+. 본 도구는 선택한 색 vs 흰색·검정 대비를 자동 계산해 등급 라벨 표시. AA 가 일반적 목표, AAA 는 강화 접근성.

이미지에서 색상 추출 방식?

canvas API 로 이미지를 100×100 으로 축소 → 모든 픽셀 RGB 를 16단계로 양자화 (각 채널 4비트) → 같은 bin 픽셀 빈도 → 상위 8개 평균 색 반환. k-means 보다 빠르고 결과가 시각적으로 일관됨.

이미지가 외부로 전송되나요?

전송 안 됨. FileReader 로 브라우저 메모리에 로드 → canvas 픽셀 분석 → 결과 표시. 네트워크 요청 0, 서버 저장 0. 브라우저 DevTools Network 탭에서 직접 확인 가능.

모바일에서도 동작?

iOS Safari · Android Chrome 모두 지원. 카메라 롤에서 사진 직접 선택 가능. 컬러 픽커는 OS 네이티브 picker 사용 (iOS 14+, Android 8+ 권장).

CMYK 변환이 정확한가요?

RGB → CMYK 는 단순 수학 변환이라 실제 인쇄 색역 (ICC profile) 과 다를 수 있음. 인쇄 발주용은 Adobe·Affinity 같은 전문 도구에서 ICC 적용 필요. 본 도구의 CMYK 는 근사 참고값.

HSL 은 언제 쓰면 좋아요?

같은 색조의 밝기·채도만 미세 조정할 때 유리. 예: hsl(146, 28%, 34%) 를 hsl(146, 28%, 50%) 로 바꾸면 같은 녹색 계열의 lighter shade. CSS 변수 디자인 시스템 만들 때 HSL 이 RGB·Hex 보다 직관적.

알파 채널 (투명도) 지원하나요?

현재 도구는 불투명 색상 4종 (Hex·RGB·HSL·CMYK) 만 지원. 알파 채널은 rgba(63,111,84,0.5) 또는 #3F6F5480 형식으로 직접 추가 필요. 향후 슬라이더 추가 검토 중.

왜 이미지의 모든 색이 다 안 나오나요?

8색 제한 + 16단계 양자화 때문. 비슷한 색들 (예: #3F6F54 와 #406F55) 은 같은 bin 으로 묶여서 1개로 표시됨. 주요 색감 추출 이 목적이라 이 동작이 의도된 것. 모든 픽셀 색은 100×100=10,000 개의 미세 색조를 다 보여줘도 가치 X.

Pantone 색상도 변환되나요?

Pantone 은 인쇄 산업 전용 라이선스 색 시스템 (PMS). 표준 RGB/CMYK 와 1:1 매핑이 없어 본 도구로 변환 불가. Pantone Connect 또는 Adobe 도구 필요.

접근성 — 색맹 사용자도 사용 가능한가요?

네. 컬러 픽커 자체는 시각 기능 필요하지만, WCAG 대비 결과는 숫자·등급 라벨로 표시되어 색맹 사용자도 검증 가능. 키보드 (Tab·Enter·Space) 로 전체 조작 가능, aria-label 모두 박혀있음.

참고

복사됨