Colour Palette from Image

1. Drop a photo, logo or screenshot on the upload box, or click it to choose one (JPG, PNG, WebP or GIF).
2. Move the Number of colours slider to get anywhere from 5 to 10 main colours. The palette updates straight away.
3. Pick an Order: Most used, Hue (round the colour wheel) or Dark to light. The preview strip shows how much of the picture each colour covers.
4. Under Colours, click the copy button next to any HEX, RGB or HSL value.
5. To take the whole palette, click Copy as CSS variables, Copy as JSON or Copy hex list.

Get a colour palette from any image

This colour palette extractor finds the main colours in a picture and gives you their codes. Designers use it to pull brand colours from a logo, match a website theme to a product photo, or build a wedding card around the colours of a lehenga. Students use it for presentations that need to match a picture. The image never leaves your phone or computer: the colours are worked out in the browser.

How the colours are picked

First the image is shrunk so its long side is about 100 pixels. A 12-megapixel phone photo becomes at most 10,000 pixels, which is plenty to judge the main colours and keeps things quick even on a basic phone. Fully or mostly transparent pixels, such as the empty area around a PNG logo, are ignored.

Then the tool runs median cut, a method published by Paul Heckbert in 1982 for showing photos on screens with few colours:

1. Put every pixel in one box, measured by its red, green and blue values.
2. Find the colour channel with the widest spread in the box and split the box at the middle pixel of that channel.
3. Keep splitting boxes until there are as many boxes as colours you asked for. The busiest boxes are split first, then boxes that are both busy and spread out, so a small but very different accent colour still gets a place.
4. Each box's colour is the average of the pixels in it, and its share is the number of pixels it holds.

The same image always gives the same palette, because nothing in the method is random. If the picture has fewer distinct colours than you asked for (a flat logo with two colours, say), you get only those.

HEX, RGB and HSL

Each colour is shown three ways. They describe the same colour, so use whichever your app or code wants:

HEX is the RGB values written in base 16: FF is 255, 99 is 153 and 33 is 51. HSL describes the same colour as a hue on the colour wheel (30° is orange), how strong it is (saturation) and how light it is. To make a lighter tint for a background, keep the hue and saturation and raise the lightness, for example to hsl(30, 100%, 90%).

Using the palette in code

Copy as CSS variables gives you a block like this, ready to paste into a stylesheet:

Then use color: var(--color-1); anywhere. Copy as JSON gives each colour's hex, RGB, HSL and its share of the image as a percentage, which is useful in scripts and design tokens. Both follow the order you picked.

Tips for better palettes

• Crop the image to the part you care about first. A product shot on a big white background will put white at the top of the list.
• Each colour is an average, so it can be a few points off any single pixel. For an exact brand colour, check the brand's own guidelines.
• Sort by Dark to light when you need a text colour and a background colour that contrast well.
• Colours can look slightly different on another screen or in print. For printing, ask your printer to match the hex code to their CMYK or Pantone guide.