Extract a palette

Extract a clean color palette from any image.

Turn logos, screenshots, and visual references into ranked colors, accessible text guidance, and files ready for design or code.

Open ColorQuarrySee example output

Free to use today. No account required.

01Dominant#7DD3FC
02Supporting#22C55E
03Accent#475569
04Accent#FDE047

Example output / actual engine values

From image to a working color system

A governed synthetic fixture paired with its real Palette Engine result. This page presents the output; it does not run or duplicate extraction.

EXAMPLE OUTPUT4 visible colors
A simple flat-color landscape with blue sky, green ground, a dark mountain, and a yellow sun
SOURCERepository-created synthetic image
01Dominant#7DD3FCRGB 125, 211, 25250.26%Use #000000
02Supporting#22C55ERGB 34, 197, 9437.59%Use #000000
03Accent#475569RGB 71, 85, 1058.04%Use #FFFFFF
04Accent#FDE047RGB 253, 224, 714.11%Use #000000
DOWNLOAD SETCSSTailwindJSONPNG previewZIPExtract your own palette

One focused workflow

One image. A complete result.

Palette intelligence

See dominant, supporting, and accent roles in ranked order.

  • Up to 16 visible colors
  • Exact percentage shares
  • Stable role labels

Color values

Move from visual reference to precise implementation values.

  • HEX
  • RGB
  • HSL

Readable text

Compare black and white text against every extracted swatch.

  • Contrast ratios
  • Stronger text option
  • Per-color guidance

Ready to deliver

Take the result into design review, code, or documentation.

  • CSS and Tailwind
  • JSON and PNG
  • Complete ZIP bundle
Explore every feature

Go deeper

Follow the part of the workflow you need.

Go deeper on the parts of the result that matter for your image, design, or code.

FeaturesUnderstand the complete image-to-palette result.Logo palettesRecover useful colors from visible logo artwork.Developer exportsMove palette values into CSS, Tailwind, or JSON.Text contrastChoose black or white text for each extracted color.

Contrast made visible

Choose text that stays readable.

ColorQuarry compares black and white text against every extracted color and recommends the stronger contrast option. It is practical guidance, not full accessibility certification.

How text recommendations work
#4755697.58:1Use white
#22C55E9.22:1Use black
BLACKCOMPAREWHITE

Developer output

Move the palette into code.

Download CSS custom properties, Tailwind-compatible tokens, canonical JSON, a PNG preview, and the complete ZIP bundle.

Explore developer exports
palette.cssGenerated export
:root {
  --palette-dominant: #7DD3FC;
  --palette-supporting-1: #22C55E;
  --palette-accent-1: #475569;
  --palette-accent-2: #FDE047;
}
CSSTailwindJSON

Simple and honest

Free today. Pro is planned.

Use the complete extraction workflow today. Paid plans are not available yet.

Available today

Free $0

Extract palettes from PNG, JPEG, JPG, and WebP images with color values, accessibility guidance, and downloadable exports.

Open ColorQuarry

Planned

Pro $5/month planned

Future capabilities may include saved palettes, larger palettes, expanded accessibility analysis, and premium exports.

Not available for purchase yet.

Turn your next image into a working palette.

Free to use. No account required.

Open ColorQuarry