Skip to content

Colour Palette Extractor

Pull a ready-to-use colour scheme out of any image, with HEX, RGB and CSS variables for every colour.

Drop your image here

or click to browse

Processed locally — never uploaded

How to use colour palette extractor

1
Add your image
A photo, a logo or a screenshot will all produce a usable palette.
2
Choose how many colours
Five to eight is the useful range for a real design.
3
Copy the values
Click any colour to copy its HEX, RGB or HSL value, or copy the whole CSS variable block.

About colour palette extractor

Colour palette extractor builds a usable colour scheme from a photograph. Rather than listing the most common colours, which tends to return five very similar shades, it groups similar colours together and picks the most representative one from each group, so every colour in the palette is distinct and actually useful.

That distinction is the whole point. A photograph of a forest is mostly greens, and a naive frequency count returns five greens that are impossible to tell apart in a design. A palette for a design needs a range: a dark neutral, a light neutral, one or two accents, and enough contrast between them. Grouping produces that, which is why this result is usable rather than merely accurate.

Once you have the palette, the fastest route to a design is to assign the darkest colour to text, the lightest to the background, and the rest to accents and borders. Because every colour came from the same image, the result is harmonious with no colour theory at all, which is the practical advantage over picking colours by eye.

Frequently asked questions

Why are the colours so different from the image?

They are not different, they are deduplicated. Similar colours are grouped and one representative is chosen, so you get a range of distinct colours rather than several near-identical ones.

How do I turn a palette into a design?

Use the darkest colour for text and the lightest for the background, then the rest for accents, borders and buttons. Because they all came from one image, the combination is guaranteed to work.

Can I copy the palette as CSS variables?

Yes, the CSS variable option outputs a ready block of custom properties you can paste straight into a stylesheet.

How many colours should a palette have?

Five to eight for most interfaces. More than that and some will be too similar to be useful, fewer and you run out of room for backgrounds, text and accents.

Does this work with a logo?

Yes, and it is a quick way to get brand colours from a logo without a designer, though a logo built from few flat colours will give you a short palette.

Are the images uploaded?

No, the palette is computed in your browser.

Related tools

Image Colour Picker Pick any colour from an image and get HEX, RGB, HSL and CMYK values, with a dominant palette. Image Converter Convert between JPG, PNG, WebP, AVIF and BMP, optionally resizing in the same pass. Image to Base64 Encode an image as a Base64 data URI, CSS background or HTML img tag, entirely offline. Resize Image Change image dimensions in pixels with the aspect ratio locked, so proportions stay correct. Favicon Generator Turn any image into a complete favicon set, with ICO, PNG sizes and a ready HTML snippet. Crop Image Crop a picture by dragging a selection, with aspect ratio presets for squares, 16:9 and 4:3. Compress Image Reduce JPG, PNG and WebP file size in your browser. No upload, no watermark, no signup. Image Metadata Viewer Inspect the hidden data in a photo: camera, lens, date, GPS coordinates and editing software.

Private by design. Your files are processed on this device and are never uploaded to the 1xmobcas.com server. Use colour palette extractor offline with total confidence.