First CHToolsFree web tools

FIRST CH TOOLS / Design / 45 PALETTE EXTRACTOR

Image Colour Palette Extractor

Pull the main colours out of a reference screenshot or a logo you were handed — up to eight of them. Copy each colour as HEX, RGB or OKLCH, and read the contrast ratio against white and black text right beside it. The image stays on your device.

Drag & drop an image here or click to choose a file (PNG / JPEG / WebP / GIF / AVIF / SVG — pasting works too)

How to Use

  1. Add an imageDrag & drop a screenshot or photo, click to pick a file, or paste one with ⌘/Ctrl+V.
  2. Choose how many coloursPick 2 to 8 and the palette is rebuilt straight away. Leave the checkbox on when a white background or heavy shadow gets in the way.
  3. CopyCopy HEX, RGB or OKLCH per colour, or take the whole palette as CSS custom properties or JSON.

About This Tool

The image is scaled down to about 25,600 pixels, drawn on a canvas, and sorted with median cut quantisation: the RGB box holding the pixels is split in half again and again, always taking the box with the largest "pixel count × widest component", and the average colour of each remaining box becomes one palette entry. The same procedure handles a continuous-tone photograph and a flat logo with four colours in it. Entries are ordered by how much of the image they cover, and the band at the top is sized by the same proportion.

"Ignore near-white and near-black pixels" drops pixels that are close to neutral and either very light or very dark — paper white, the white background of a screenshot, the shadow that fills half a photo — so that the brand colours come through. If it filters out everything, turn it off.

OKLCH states lightness, chroma and hue the way the eye reads them, which makes it the easy notation for shifting brightness while keeping the hue. Single-colour conversion and tone palettes live in the Color Converter, and the CSS Gradient Generator takes the colours you pulled here and blends them. The contrast ratios shown against white and black text use the WCAG 2.1 formula; body text usually wants 4.5:1 or better (the full check is in the Contrast Checker).

Decoding and quantisation both run in your browser and nothing is uploaded. The settings can be passed in the URL (you still choose the image locally), e.g. /en/palette/?n=8&skip=0.

Other Tools