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

  1. Add a source: upload an image, paste a URL, or choose a sample.
  2. Extract: select how many colors (e.g., 8) and click Extract Palette.
  3. Refine: set a base color and generate harmonies; click any swatch to copy HEX or apply as text/background in the contrast tester.
  4. Check contrast: test foreground/background pairs and see AA/AAA results and ratio.
  5. 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.