Skip to developer tool
DEVELOPER TOOLKIT CSS & COLOR

Color Palette from Image

Turn a local picture into a reusable set of colors. Compare dominant and vibrant sampling, copy individual HEX values and export a palette for code or a design application.

Browser-based · No account required · Copy and export

Open workspace Read the guide
BUILT FOR THE DETAILS
  1. 01Add your input
  2. 02Inspect & adjust
  3. 03Use your result
Browse developer tools

Workspace

Customize your settings below

Images are processed locally using a canvas.

Click an image pixel to copy its HEX color.

Extracted colors

How to use Color Palette from Image

  1. Choose a browser-supported image file up to 50 MB.
  2. Set the maximum palette size, sampling resolution and dominant or vibrant preference.
  3. Click a swatch to copy its HEX value, or choose CSS, JSON or GIMP palette output and download.

When to use this tool

Sample a photo, logo or illustration for a starting color palette. Results depend on sampling resolution and palette size, so review the exported colors in their actual design context.

Sampling produces representative colors

The image is reduced to the chosen resolution, then pixels with alpha below 160 are ignored. Nearby colors are grouped into quantized bins and similar candidates are merged. Vibrant mode favors color spread as well as population. A simple image may yield fewer colors than requested.

Worked example

A solid red image produces #FF0000.
CSS: --palette-1: #FF0000;
JSON: ["#FF0000"]

Limits and output checks

Results are approximate, not a count of every original color or a color-profile proof. Resizing and browser decoding can change sampled values. Animated formats use the frame decoded by the browser. Entirely transparent images have no eligible colors.

Reference: Canvas pixel data.

Frequently asked questions

Is the image uploaded?

Pixel processing runs in this browser. Selecting a file does not send its contents to a palette service.

Why are there fewer swatches than requested?

The setting is a maximum. Similar colors are merged and mostly transparent pixels are skipped.

What is GPL output?

It is a GIMP Palette text file listing RGB values and HEX labels, suitable for applications that import that format.

Sample colors for a design starting point

Choose an image, select the requested palette size and inspect the generated swatches. Use the palette export when the next application accepts that format.

Scope of this workflow

Sampling and browser decoding can alter values. The requested count is a maximum; similar colors can merge and transparent pixels can be skipped.

Color Palette Generator — Harmonies & CSS · All developer tools · Privacy policy · Contact PixelOkay