Palette from image
Drop a logo or photo and get its main colours, with their codes and how readable text is on each one.
Runs in your browser. What you type is not sent anywhere.
Colours are picked from a scaled-down copy of the image, so they are close to, not exactly, the colours in the file. A screen and its colour profile can also change how a colour looks. Contrast is worked out with the WCAG 2 formula for white and black text only.
How to use it
- 01Drop an image on the page, or choose one from your device.
- 02Choose how many colours you want. The swatches update at once.
- 03Click a colour to copy its code, check the contrast, and copy the whole palette as CSS.
Questions
Is my image uploaded?
No. Your browser reads it and works out the colours on your device. Nothing is sent to a server.
How are the colours chosen?
The picture is scaled down and its pixels are split into groups of similar colour. Each group becomes one swatch, shown with the share of the picture it covers.
What does the contrast ratio mean?
It compares the brightness of two colours, from 1 (the same) to 21 (black on white). WCAG asks for at least 4.5 for body text and 3 for large text so that people with low vision can read it.
Why are my brand colours slightly different?
The tool averages groups of pixels from a reduced copy, and an image can contain compression and anti-aliasing. For an exact brand colour, use the code from your brand guide.
Can I use the colours commercially?
Colours themselves are just numbers, but a logo or photo may belong to someone else. Check you have the right to use the image the colours come from.
A palette is the start of an identity
We turn colours into a full design system for your site and app, with the contrast, the dark mode and the components that go with it.
See digital solutionsMore free tools
- QR Code Generator
- WhatsApp Link Generator
- UTM Link Builder
- Google Result Preview
- Hijri Date Converter
- Structured Data Generator
- Project Brief Writer
- VAT Calculator
- Ad Budget Calculator
- Image Compressor
- Email Signature Generator
- Social Share Preview