Overview
Color Palette & Picker helps you turn images or hex inputs into production-ready palettes. It extracts dominant colors (k-means / MMCQ style quantization), builds harmonious schemes, verifies WCAG contrast for normal and large text, and exports to CSS variables or Adobe Swatch Exchange (ASE) — all locally in your browser (no uploads).
Key Features
- Dominant colors — fast k-means/MMCQ quantization (3–16 colors).
- Harmony generators — complementary, analogous, triadic, monochrome.
- WCAG contrast checker — AA/AAA for normal & large text.
- Direct picking — click image preview to sample any pixel.
- Exports — copy CSS
:root
variables, download CSS/JSON/ASE. - Privacy-first — fully client-side; files never leave your device.
How to Use
- Add a source: upload an image, paste a URL, or choose a sample.
- Extract: select how many colors (e.g., 8) and click Extract Palette.
- Refine: set a base color and generate harmonies; click any swatch to copy HEX or apply as text/background in the contrast tester.
- Check contrast: test foreground/background pairs and see AA/AAA results and ratio.
- Export: copy CSS vars, download CSS/JSON, or export ASE for Adobe apps.
WCAG Contrast Cheatsheet
- AA (normal text): ≥ 4.5:1
- AAA (normal text): ≥ 7:1
- AA (large text): ≥ 3:1
- AAA (large text): ≥ 4.5:1
CSS Export Example
:root {
--color-1: #0f172a;
--color-2: #1e293b;
--color-3: #3b82f6;
--color-4: #06b6d4;
--color-5: #f59e0b;
}
/* Usage */
.button-primary {
background: var(--color-3);
color: #fff;
}
.text-accent {
color: var(--color-4);
}
Tips
- Start with 8 colors; increase only if needed for complex images.
- Use dithering/grain in your design if low-contrast areas feel flat.
- Pick accents from Triadic; choose backgrounds from Monochrome.
Privacy
All processing is performed locally in your browser. No images or color data are uploaded to any server.