MotionShine01 / Analogous
Calm
Neighbouring hues from light to dark. Easy on the eye, good for brands and backgrounds.
Free tool
Color palette generator, press Space.
Each press of the space bar makes a new palette. Lock the colours you like and the others change around them. Pick a harmony such as analogous, complementary or pastel, change any colour by hand, and see at a glance whether white or black text is readable on it. Copy the palette as CSS variables, Tailwind colours or a list, save a PNG, or share the link.
Export
Each colour shows its contrast with white and black text. 4.5 or more passes the WCAG AA level for normal text.
Colours are made in your browser. The palette lives in the page address, nothing is stored.
Harmonies
Which one to pick.
02 / Complementary
Contrast
Opposite hues. One for the main colour, the other for buttons and highlights.
03 / One hue
Shades
One colour from dark to light, for interfaces and charts that need steps.
04 / Pastel
Soft
Light, gentle colours for illustrations, slides and social posts.
Questions
Good to know.
How are the colours chosen?
In OKLCH, a way of describing colour by lightness, strength and hue where equal steps look equally different to the eye. That keeps light and dark steps even and stops yellows and blues from looking much brighter or darker than intended. Colours a screen cannot show are pulled back into range.
Can I start from my brand colour?
Yes. Click the pencil on a colour, choose your brand colour, and it is locked. Press Space and the other colours change around it.
Can I get a palette from a photo?
Yes, with the image color picker, which finds the main colours in a picture.
What does the contrast number mean?
How readable text is on that colour, from 1 (none) to 21 (black on white). The WCAG guidelines ask for at least 4.5 for normal text and 3 for large text.
How do I share or keep a palette?
The colours are in the page address. Copy the link or bookmark the page, and it opens with the same palette, locks included.