Color Picker · Palette Extractor · Contrast Checker
Convert Hex · RGB · HSL · CMYK at once. Extract 8 dominant colors from any image. WCAG AA/AAA contrast checker.
Color Picker · 4-Format Live Conversion
WCAG Contrast Check
WCAG 2.1 · Body text: AA 4.5+, AAA 7+ · Large text (18pt+ or 14pt+ bold): AA Large 3+, AAA 4.5+
Extract Palette from Image
How to use — 3 flows
Color conversion
- Click the color picker or type a Hex code directly
- 4 codes (Hex·RGB·HSL·CMYK) shown instantly
- Click any code box → copies to clipboard
Image palette extraction
- Drag-drop or click to upload an image
- Top 8 dominant colors auto-extracted
- Click any swatch → loads into the picker
WCAG contrast check
- Pick a color → contrast auto-computed
- Shows grade vs white & black backgrounds
- Body text should be AA 4.5+
Common use cases
Convert Hex ↔ RGB ↔ HSL outside Figma/Photoshop. No workflow break.
Extract 8 colors from movie posters or photos → unified SNS/blog header palette.
Map design palettes → Tailwind config · CSS variables (--brand).
Hit AAA contrast → friendly to visually impaired & elderly users. Affects AdSense RPM.
Pull core colors from competitor ads → trend tracking, palette analysis.
Extract main colors from clothing or interior photos → find matching color codes.
Learn Hex hex notation · RGB mixing · HSL hue · WCAG accessibility while using the tool.
Color code formats — when to use which?
6-digit hex (R·G·B 2 each). CSS·HTML standard, shortest.
Decimal 0-255. JS·SVG·canvas, supports alpha (RGBA).
Hue 0-360°·saturation·lightness. Easier lighter/darker tweaks.
Cyan·Magenta·Yellow·Black. Print mockup (apply ICC for press).
WCAG contrast grades
WCAG 2.1 — measures readability by luminance ratio between text & background.
Note: AdSense also uses readability as a quality signal. Low contrast → lower RPM/CTR.
Palette extraction algorithm
16-step RGB quantization + frequency sort
Lightweight and consistent — no heavy ML like k-means.
Sub-50ms speed · deterministic results · zero external libraries
Slightly lower hue-cluster accuracy than k-means (sufficient for typical use)
Common color systems
10-step lightness scale. Developer-friendly.
Google guidelines. Android-friendly.
Apple system colors. iOS/macOS recommended.
Print/fashion industry standard (license required).
Related tools
FAQ
Hex vs RGB?
Same color, different notation. Hex is hexadecimal (#3F6F54), RGB is decimal (rgb(63,111,84)). Hex is shorter for CSS/HTML; RGB is easier when manipulating colors in JavaScript or canvas. Both interchangeable.
WCAG AA / AAA grade thresholds?
WCAG 2.1 body text: AA 4.5+, AAA 7+. Large text (18pt+ or 14pt+ bold): AA Large 3+, AAA 4.5+. This tool computes contrast against white and black; AA is the common target, AAA is enhanced accessibility.
How does image palette extraction work?
Canvas resizes the image to 100×100, then quantizes each pixel's RGB to 16 levels per channel (4 bits each). Top 8 most populated bins are averaged and returned. Faster than k-means and produces visually consistent results for small palettes.
Is my image uploaded?
No. FileReader loads the image into memory, canvas analyzes pixels, results display in browser. Zero network requests, zero server storage. Verify in DevTools Network tab.
Does it work on mobile?
Yes. iOS Safari and Android Chrome both supported. Pick directly from camera roll. Color picker uses OS native picker (iOS 14+, Android 8+ recommended).
Is the CMYK conversion accurate?
RGB → CMYK is a basic math conversion and won't match actual print color spaces (ICC profiles). For print press, use professional tools (Adobe, Affinity) with proper ICC application. The CMYK shown here is an approximate reference.
References
- WCAG 2.1 — Contrast (Minimum) · grading basis
- MDN — input type=color · native picker API
- MDN — Canvas API · pixel analysis foundation