- Prooflive.ai
- Free tools
- Colour palette generator
Free colour palette generator
Pull the main colours out of a photo, a logo or a mood board, or build a whole palette from one brand colour: tints and shades from 50 to 950, complementary, analogous and triadic colours, and which pairs are readable as text.
How to make a palette
- Start from a colour or an imageType or pick your brand colour, or drop in a photo, logo or mood board.
- Read the paletteFrom a colour: tints and shades and four harmonies. From an image: its main colours, most used first.
- Check readable pairsThe pairs that pass WCAG AA for body text are listed, so you know which to use for text and backgrounds.
- Copy itClick any colour to copy its hex code, or copy the whole palette as CSS variables.
Good to know
Tints and shades that look even
The 50 to 950 scale is made in OKLCH, a colour space where equal steps look equal to the eye, so 400 to 500 feels like the same jump as 700 to 800, and the hue doesn't drift towards grey or purple as it gets darker. Use the light end for backgrounds, the middle for buttons and the dark end for text.
Colour harmonies
- Complementary: opposite on the colour wheel, for one strong accent.
- Analogous: neighbours, calm and natural.
- Triadic: three evenly spaced, lively, best with one leading.
- Split complementary: softer than complementary, still with contrast.
A palette for a website
Most sites need far fewer colours than you'd think: a background, a text colour, one brand colour for buttons and links, and a light and a dark version of it. Check every text and background pair with the contrast checker.
Questions
Is the colour palette generator free?
Yes, with no sign-up. Copy as many palettes as you like.
Can I get a colour palette from an image?
Yes. Choose An image and drop in a photo, logo or screenshot: it finds the colours that cover most of it, from 3 to 10.
Is my image uploaded?
No. The colours are worked out in your browser and the image never leaves your device.
What are tints and shades?
Tints are your colour mixed towards white, shades towards black. A 50 to 950 scale gives you light backgrounds, mid-tones for buttons and dark tones for text, all in the same hue.
How do I use the palette in CSS?
Copy CSS gives you custom properties like --brand-500 to paste into your stylesheet's :root and use anywhere as var(--brand-500).
Is it colour or color?
Both: this is a colour palette generator in British English and a color palette generator in American English. The hex codes are the same either way.
More free tools
Contrast checker
WCAG AA and AAA for any two colours, and the nearest colour that passes.
Font pairing
Google Fonts pairs on your own words, with the CSS to copy.
Favicon generator
Every favicon size, the .ico, the web manifest and the HTML, from an image or a letter.
Background remover
Cut out a person, product or logo with AI, right in your browser. Transparent PNG.
Need the website too?
Design it your way and your AI builds it on Prooflive.ai, exactly to the design, with hosting, email and SEO done. Free to build; from £19 a month when it goes live. Designers earn 10 to 20% of every client payment.