--- title: "Colour Palette from an Image – Hex Codes from a Photo" description: "Upload a photo and get its main colours as hex and RGB codes, with how much of the picture each one covers. Copy one colour or the whole palette as CSS. Free." url: "https://imagecompressor.si/color-palette-from-image" lang: "en" --- # Get a colour palette from an image See the main colours of a photo with their hex codes, and copy them for your design, website or slides. ## How it works 1. **Add your images** Drag and drop, paste, or pick files. They upload over an encrypted connection. 2. **Pick a quality or a target size** Use the quality slider, or tell it exactly how many KB or MB you need. 3. **Download** Save each file, or grab them all at once as a ZIP. A good photo often holds a ready-made colour scheme: the blues of a seaside shot, the warm browns of a café interior, the brand colours already in a product picture. This page finds the main colours of any picture and shows them as swatches, each with its hex code, its RGB values and the share of the picture it covers, from the most common to the least. Choose four, six, eight or ten colours. Fewer gives the broad mood of the picture; more brings out accents such as a red door or a yellow flower. Each swatch has its own copy button, and the whole palette can be copied as CSS custom properties, ready to paste into a stylesheet. The colours are worked out on our server from a small copy of your picture, which is then deleted. The same picture always gives the same palette. ## How the colours are found The picture is shrunk to a few thousand pixels, and those pixels are grouped by how similar their colours look to the eye, using a colour space built for that rather than raw RGB. Each group's average becomes one colour of the palette, and its size becomes the share. That is why two shades that look alike are merged while a small, bright accent can still get its own swatch. ## Using a palette in a design A common rule is to use the most common colour for large areas, a second for headings or panels, and a small, strong one for buttons and links. Check contrast before using a pair for text: light colours from a photo often look fine as fills but are too pale to read on white. ## Matching a brand To pick up a logo's colours, use a clean picture of the logo on a plain background, and choose a count of four. The background will usually be the first swatch; the logo's own colours follow. ## Palettes for slides, rooms and gifts Beyond web design, a photo's palette helps match slide colours to a cover picture, choose paint and textiles that suit a favourite landscape, or pick ribbon and card for a present. Photograph the thing you want to match in daylight, crop away everything else, and take the first two or three swatches. Screens and printers show colour differently, so a hex code is a starting point for paint or fabric: hold a sample against the real thing before buying. ## Frequently asked questions ### Can I pick a colour by clicking on the photo? Not on this page: it finds the main colours for you. For an exact pixel, an image editor's eyedropper is the tool. ### Why does a colour I see not appear? It may cover only a tiny part of the picture. Choose more colours, or crop the picture to that area first. ### Which formats can I use? Any picture we read, including HEIC, PNG with transparency (treated as white behind) and camera RAW on Pro. ### Is my photo stored? No. A small copy is analysed on our server and everything is deleted once the colours are sent back. ### Can I use the API? Yes. POST /api/v1/palette returns the colours as JSON. ### Why are the shares not round numbers? They are measured on the pixels of the picture, so they add up to a hundred percent with decimals in between. ### Does the order of colours mean anything? Yes: the first colour covers the most of the picture, the last the least. ## Related tools - [Convert an image to Base64](https://imagecompressor.si/image-to-base64): Get a data URI, an HTML tag and a CSS line for your image, ready to paste into code or an email template. - [Remove the background from an image](https://imagecompressor.si/remove-background): Cut out the subject and drop in a transparent, white, black, or custom-coloured background, free and with no sign-up. - [Photo collage maker](https://imagecompressor.si/photo-collage-maker): Combine two to nine photos into one picture, laid out the way you choose.