qpkit

Extract colors from an image

Palette Extractor builds swatches, tint and shade ramps from an image. It also checks pair contrast and previews several forms of color blindness.

Open Palette Extractor

  1. Open a reference image

    Choose a photo or illustration with a useful color range. Large background areas can dominate the result, even when a small accent is what attracted you to the reference.

  2. Compare extraction methods

    Try median cut and k-means. Compare their swatches with the image and keep the set that suits the project; the most common colors are not the only useful choices.

  3. Assign the colors a role

    Choose a background, a foreground and a limited set of accents. Use the ramps when you need lighter surfaces or darker text. Check the pairs that will actually be placed together.

  4. Export the values

    Download CSS custom properties, SCSS, Tailwind tokens, JSON, a hex list or a PNG reference sheet. Adapt token names to the project rather than creating several names for the same role.

Contrast applies to a pair

A passing color pair does not certify an entire interface. Check text size, focus indicators and non-color distinctions too. Color-blindness previews help identify places where two states need more than a color difference.

Keep a useful accent while exploring

Lock a swatch you want to keep before re-extracting the palette. This is useful when the subject’s small accent matters more than the image’s dominant background. Click a swatch to copy its hex value. Compare a second extraction with the actual reference rather than treating one algorithm’s result as the only correct palette.

Turn swatches into a small set of roles

An export is easier to use when its colors have jobs. Start with a page background, text and an accent, then add surface or border colors only when the design needs them. The names below are an example of roles you can assign to the exported values, not a claim that an extracted palette already passes a contrast check.

:root {
  --page: #f4f0e8;
  --text: #191918;
  --accent: #9b3c26;
}

body { background: var(--page); color: var(--text); }

What to check before exporting ramps

Ramps add lighter and darker variants; they do not make every neighboring swatch suitable for text. Test the foreground/background pairs you will actually use, including selected and disabled controls. Use the color-blindness preview to find states distinguished only by color. Export ramps when the project needs a scale, or keep the export smaller when a few named colors are enough.

Design, color and QR code tools