# Color Palette from Image

> A free, private color palette extractor that runs entirely in the browser. Drop, paste or choose an image (or try one of four built-in examples), pick 2 to 16 colors, and get the palette as hex, RGB, HSL and nearest CSS color name with each color's share of the picture. Check WCAG contrast between every pair and export CSS variables, SCSS, Tailwind (v3 config or v4 @theme), JSON, Adobe Swatch Exchange (.ase), GIMP/Inkscape/Krita palette (.gpl), SVG, a Python list for matplotlib and plotly, or a palette PNG. No sign-in, no uploads, no limits.

Live at https://color-palette-from-image.skillsafe.ai/

## How it works

- The image is drawn on a canvas (long side up to 1,600 px) and sampled on an even grid: 5,000 to 100,000 pixels, user-selectable. Pixels under 50% opacity are ignored.
- Three methods:
  - K-means in CIELAB (D65), the default. Distances match perceived difference, so it separates similar hues the way the eye does.
  - K-means in RGB, the classic method.
  - Median cut: repeatedly splits the busiest color box at its median, which keeps small bright accents.
- K-means is seeded with k-means++ from a fixed pseudo-random seed, so the same image and settings always give the same palette. "Try another variation" changes the seed.
- Each swatch is the mean sRGB of its pixels. Its share is the fraction of sampled pixels in its group. Swatches closer than CIEDE2000 1.0 are merged.
- Each swatch carries its hex, RGB, HSL, CIELAB, nearest CSS named color (by CIEDE2000), WCAG contrast against white and black, and the better text color.
- A marker on the image shows the pixel closest to each swatch. "Palette only" redraws the image using just the palette colors.
- Click the image to pick an exact pixel color and add it to the palette. Each swatch can be fine-tuned with a color picker or removed.

## Contrast

Every pair gets a WCAG 2 contrast ratio and a grade: AAA (7:1 or more), AA (4.5:1), AA Large (3:1), or Fail. The page also shows a full contrast table and a sample chart and UI card drawn in the palette.

## Exports

CSS custom properties (hex plus an -rgb triplet), SCSS variables and map, Tailwind v3 `theme.extend.colors`, Tailwind v4 `@theme` tokens, JSON (hex, rgb, hsl, share, name), GIMP .gpl, Adobe .ase v1.0 (RGB, global), SVG swatches, Python for matplotlib (prop_cycle, ListedColormap) and plotly (colorway), and a 1200x520 palette PNG. Names can be numbered (palette-1...) or the nearest color names, with a custom prefix.

## Privacy

The image never leaves the device. There is no account, no server call and no analytics on the image.