WerklyTools
Esc
↑↓ navigate↵ open
EN
Buy me a coffee

Image color palette extractor

Upload a photo, logo or illustration and discover its main colors. Choose how many colors you want, copy each HEX with a click or the whole palette as CSS variables.

Processed 100% in your browser

How can I verify this?

Your files are never uploaded: they are processed on your device. Check it yourself: load the page, turn off your WiFi and the tool keeps working. Or open your browser’s developer tools (F12), go to the Network tab, and see that no file leaves your device.

Ctrl + Enter runCtrl + C copy result

How to use

  1. 1Drop, paste or select an image.
  2. 2Choose how many colors to extract.
  3. 3Click a color to copy its HEX code.
  4. 4Copy the full palette as CSS variables.

Use cases

  • Build a brand palette from a logo or photograph.
  • Take inspiration from an image to design a website.
  • Match a product’s colors with its packaging.
  • Check the dominant colors of an illustration.

Frequently asked questions

How are dominant colors calculated?

It downsizes the image and groups pixels by similarity with the median-cut algorithm; each color is the average of its group.

Is my image uploaded to a server?

No. Everything is processed in your browser.

What does the percentage mean?

The share of the image’s pixels that each color represents.

Are transparent backgrounds considered?

No, transparent pixels are ignored.

Related tools

CSS border-radius generatorAdjust the rounding of each corner with sliders and see the result live. Use one radius, one per corner or elliptical radii for organic shapes, in px, % or rem. Copy the CSS when you like it.
CSS box-shadow generatorDesign realistic shadows by stacking several layers, the way the best design systems do. Tune each layer’s offset, blur, spread, color and opacity and copy the result as CSS or as a Tailwind class.
WCAG color contrast checkerChoose your text and background colors and instantly get the contrast ratio and whether it meets the AA and AAA levels of the WCAG accessibility guidelines. If it fails, the tool suggests a similar color that passes. It all happens in your browser.
Color converter (HEX, RGB, HSL, CMYK, OKLCH)Type a color in any format — #hex, rgb(), hsl(), hwb(), oklch() or a name like “tomato” — and instantly get every equivalent, its WCAG contrast against white and black, and a scale of tints and shades.
Color palette generatorStart from your brand color and get a full, perceptually uniform 50 to 950 scale ready for your design system, along with harmonious combinations. Your original color is kept exactly at its matching step.
CSS gradient generatorDesign gradient backgrounds by dragging color stops along a bar, choose the type (linear, radial or conic) and copy production-ready CSS with a fallback color and a modern OKLCH version without grey dead zones.