What is it?
The Colour Palette Generator builds a matching palette from one Base colour, using colour-wheel rules.
Who is it for?
Website and Blogger owners choosing a theme, small businesses picking brand colours, designers making posters and invitations, and students designing projects.
How to use it
- Pick the Base colour, or tap Random palette.
- Choose the Harmony.
- Copy HEX list, Copy CSS as CSS variables, or copy one colour.
Which harmony?
- Analogous (calm, side by side): neighbouring colours; relaxed and natural.
- Complementary (strong contrast): opposite colours; great for a call-to-action button.
- Triadic (lively, balanced), Split complementary and Tetradic (four colours): more variety; use one as the main colour and others as accents.
- Monochrome (one colour, light to dark): one hue in several shades; always looks tidy.
Using a palette well
- Follow the 60-30-10 rule: 60% main (often a neutral), 30% secondary, 10% accent.
- Check text contrast with the Color Converter & Contrast Checker; light colours need dark text.
- Keep brand colours the same across your website, WhatsApp DP and printed cards.
Worked example
Base colour #1A7F37 (green) with Complementary gives a strong red-pink accent: use green for the header and buttons, the pink only for a “Buy now” badge. With Monochrome, you get light and dark greens for backgrounds, borders and text.
Using CSS variables
Copy CSS gives lines like --color-1: #1a7f37;. Paste them inside :root { }, then use color: var(--color-1) across your site. Changing one variable later updates every place.
Common mistakes
- Using all five colours equally makes a page look busy. Pick one main colour and one accent.
- Bright saturated colours for large backgrounds tire the eyes; use pale tints for backgrounds.
- About 1 in 12 men has red-green colour blindness: don’t rely on red vs green alone to show meaning.
Open the tool: Colour Palette Generator
Still stuck?
Contact support. Tell us which tool or page you were using, what you tapped, what you saw, and your phone or computer and browser (for example: Android phone, Chrome). We reply by email.
Questions, or an error not listed here?
Tell us in the comments: what you were doing, the exact message you saw, and your device and browser. We read every comment and add new fixes to this article.