Palette from image
Drop an image and pull out three to eight dominant colours, with hex and contrast. The image stays in your browser.
en / tools / palette-generator
Palette generator
From one base colour to five harmonies, with the contrast ratio of black and white on every swatch and export to CSS.
Free, in the browser, no account
Locked swatches stay where they are.
#3a5942Black2.69fails
White7.81AA
#423a59Black1.98fails
White10.60AA
#59423aBlack2.27fails
White9.27AA
#3a5942 #423a59 #59423a
The number is the contrast ratio, from 1 to 21. AA asks for 4.5 on normal text and 3 on large text — from 24px, or 18.66px bold.
The maths uses relative luminance, which is not the lightness in the picker: it weights green ten times as much as blue. Blue and yellow have the same lightness and luminances that stand one to twelve.
Everything happens in your browser. Nothing is sent anywhere.
How it works
- Pick the base colour with the picker or by typing the hex.
- Pick the harmony. The swatches update on their own.
- Lock the ones you want to keep and press "random colour" to change the rest.
What it does
From a base colour it derives a palette using five classic harmonies, and on every swatch it says whether white text and black text pass.
Copy a single hex or the whole palette, as a list or as CSS variables.
About the five harmonies
They are rotations on the colour wheel, and the angles are not a matter of opinion:
- Complementary: the opposite colour, at 180°.
- Triad: three colours 120° apart.
- Analogous: the two neighbours, at ±30°.
- Split complementary: the two either side of the opposite, at 150° and 210°.
- Monochromatic: the same hue at five lightnesses.
The first four keep the base’s saturation and lightness and change only the hue, and they always start from the colour you chose. The monochromatic one is ordered light to dark, because a ramp ordered “base first” is not a ramp.
On a base that is already nearly black the monochromatic steps compress. That is true of the colour, not a defect: below a certain point two lightnesses are indistinguishable, and duplicate swatches are dropped.
About contrast
The number beside each swatch is the contrast ratio, from 1 to 21. AA asks for 4.5 on normal text and 3 on large text — from 24px, or 18.66px bold.
There are three outcomes rather than two, because between 3 and 4.5 a colour passes for large text and not for normal text. With only two outcomes that case would land under “fails”, which is untrue, or under “AA”, which is worse.
The verdict is always a word plus a number. Colour is the third copy of the information, never the first: about one man in twelve does not separate red from green.
About luminance
The maths uses relative luminance, which is not the lightness in the picker.
HSL lightness is an average of the highest and lowest channel. Relative luminance weights the three channels the way the eye does — green ten times as much as blue — after undoing the gamma curve.
The difference is not theoretical: pure blue and pure yellow have the same lightness, 0.5, and luminances that stand one to twelve. On yellow you read black, on blue you read white, and HSL lightness knows nothing about it.
About the locks
The lock holds the colour, not the position. With some swatches locked, “random colour” changes only the rest.
Changing harmony changes how many swatches there are, and locks past the end are dropped: a counter that does not add up would be worse.
About your data
Everything happens in your browser. Nothing is sent anywhere.
From here you also go here
Compress and resize images
Drop the photos in, pick the long side and the quality, see what they weigh before and after. Up to twenty at a time, all in the browser.
Convert image format
PNG to JPG, to WebP and back. The size stays, the quality is yours, and under the transparency you put the colour you want.