Design & Colour
Colour Palette Generator
Enter a base hex to build a complementary + analogous five-colour set.
Generate a quick colour palette
Need a five-colour starter set from one brand swatch? This generator takes a base HEX, adds analogous neighbours at ±30° hue, places the complementary colour at +180°, and adds a related accent near the complement so mockups have both cohesion and contrast. The result is a quick palette for slides, landing pages or chart series — refine saturation by eye before shipping to production tokens. Complements create punchy accents; analogous stops keep the family feeling related. Soften individuals with colour shade and test text on fills with accessible colour pair.
Worked example
Base #2A6F97 yields −30°, base, +30°, complement at +180°, and a nearby accent hex — five swatches total.
Limits and assumptions
HSL wheel geometry only. Brand guidelines and print profiles may need manual tuning.
Frequently asked questions
What is a complementary colour?
The colour opposite on the wheel (hue + 180° in this simple model) — strong contrast with the base.
What does RGB have to do with it?
HEX encodes RGB channels; conversion to HSL happens so hue can be rotated cleanly.
Can I use these in CSS?
Yes — paste the hex values into CSS (Cascading Style Sheets) as #RRGGBB or convert as needed.
Why five colours?
Enough for base, two neighbours, a contrast accent and a supporting accent without overwhelming a mockup.