Colour palette generator
The free colour palette generator creates a harmonious colour scheme from a brand colour in seconds. With HEX codes, contrast values and CSS variables for logo, website and social media.
Neighbouring colours on the colour wheel, calm and harmonious. The address contains your colour, so you can share the palette directly.
- #26D97Don white1.9 : 1on ink10.1 : 1
Easy to read for body text (WCAG AA).
- #26D9D6on white1.8 : 1on ink10.8 : 1
Easy to read for body text (WCAG AA).
- #2682D9on white4.0 : 1on ink4.7 : 1
Easy to read for body text (WCAG AA).
- #2629D9on white8.7 : 1on ink2.2 : 1
Easy to read for body text (WCAG AA).
- #7D26D9on white6.7 : 1on ink2.8 : 1
Easy to read for body text (WCAG AA).
How the palette looks on a website
Fresh ideas for your brand
Colours that work together: for logo, website and social media.
Learn moreBriefly explained, clearly structured and easy to read.
Briefly explained, clearly structured and easy to read.
Briefly explained, clearly structured and easy to read.
:root {
--farbe-1: #26d97d;
--farbe-2: #26d9d6;
--farbe-3: #2682d9;
--farbe-4: #2629d9;
--farbe-5: #7d26d9;
}What you can use Colour palette generator for
- Find brand colours: derive a complete colour scheme for logo, website and social media from a favourite colour.
- Test colour combinations: compare complementary, analogous, triadic or monochrome schemes side by side.
- Check accessible colours: read contrast ratios according to WCAG for text on light and dark backgrounds.
- Take over CSS colour variables: copy the palette as :root variables and paste it straight into web projects.
Frequently asked questions
Is the colour palette generator really free?
+
Yes. The colour palette generator is free to use without sign-up and without a credit card. The palette is calculated in your browser, nothing is stored.
How do I create a colour palette from my brand colour?
+
Enter the HEX code of your brand colour or pick it with the colour picker. Five matching colours appear immediately below. Use one of the four harmonies to change the colour scheme.
What does the contrast ratio mean?
+
It describes the difference in lightness between text and background. From 4.5 : 1, body text is easy to read according to WCAG AA; for large headlines 3 : 1 is enough.
Which colour harmony suits my brand?
+
Analogous looks calm and coherent. Complementary creates strong contrast. Triadic is lively and versatile. Monochrome is clear and reduced and suits minimalist designs.
Can I share my colour palette?
+
Yes. The page address contains the base colour. Anyone who opens the link sees the same palette – nothing has to be stored.
Which HEX codes does the generator output?
+
Every colour is shown as a six-digit HEX code, for example #2682D9. You can copy each one individually or take over all colours as CSS variables.