Generators
Color Palette Generator
Create a five-colour palette from one starting colour, with evenly spaced hues for balanced, cohesive colour schemes.
About the Color Palette Generator
The Color Palette Generator builds a five-colour palette from any starting colour using seven colour-theory harmonies: analogous, complementary, triadic, split-complementary, tetradic, evenly spaced and monochrome. Pick the seed with a colour picker or type a code, see nine shades of it, and export the palette as CSS variables, a HEX list or JSON.
What you can do with the Color Palette Generator
- Seven harmonies: Analogous, complementary, triadic and more.
- Pick a seed: Colour picker or type any code.
- Nine shades: Light to dark versions of your colour.
- Export: CSS variables, HEX list or JSON.
Choosing a harmony
Analogous colours sit next to each other on the colour wheel and feel calm. Complementary colours sit opposite and give strong contrast. Triadic uses three evenly spaced hues for a lively but balanced look, split-complementary softens a complementary pair, tetradic uses two complementary pairs, and monochrome uses one hue at different lightness.
Using a palette well
A popular rule from interior design, the 60-30-10 rule, works for screens too: use one colour for about 60% of the space, a second for 30% and an accent for the remaining 10%. You rarely need all five colours equally.
Shades and contrast
The shades row runs the seed colour from very light (95) to very dark (15). Lighter shades suit backgrounds and darker ones text, which helps you reach a readable contrast of at least 4.5:1.
Related tools
Frequently Asked Questions
What colour format do I enter?
Pick a colour with the picker, or type a HEX code, rgb(…) or hsl(…) value.
How do I use the palette in my CSS?
Choose "CSS variables" under Export and copy the :root block into your stylesheet, then use var(--color-1) and so on.
Can I get a darker version of a colour?
Yes, tap any square in the shades row to copy that shade.
What is a complementary colour?
A complementary colour sits directly opposite on the colour wheel, 180 degrees away, like blue and orange. Choose Complementary and the palette gives your seed, its opposite, and a darker and lighter version of them, which works well for a main colour plus a contrasting button or highlight.
What is the difference between triadic and tetradic colours?
Triadic uses three hues spaced 120 degrees apart on the colour wheel, while tetradic uses four hues spaced 90 degrees apart. Tetradic gives more variety but is harder to balance, so it usually works best with one colour leading and the others used in small amounts.
What does split-complementary mean?
Instead of the exact opposite colour, split-complementary takes the two hues on either side of it, at 150 and 210 degrees from your seed. You still get strong contrast, but it is softer and easier to use than a straight complementary pair.
What does the Evenly spaced option do?
Evenly spaced divides the colour wheel into five equal parts, so each colour is 72 degrees from the next (360 divided by 5). The result is a bright, varied set of hues, useful for charts or categories where every colour needs to look clearly different.
How are the nine shades of my colour made?
The shades keep your seed colour's hue and saturation and change only the lightness, from 95% at the lightest to 15% at the darkest in steps of 10. Tap any shade to copy its HEX code for backgrounds, borders or hover states.
When should I use a monochrome palette?
Monochrome keeps one hue and changes only lightness, so everything matches automatically. It suits clean, minimal designs, dashboards and brand pages built around one colour. Add a neutral grey or a single contrasting accent if buttons and links need to stand out.
Can I generate a random palette?
Yes. Tap the Random button and a new seed colour with medium to strong saturation is picked, and the palette rebuilds using whichever harmony is selected. Keep tapping until you like the base, then switch harmonies to see other combinations from the same seed.
How many colours should a website use?
A common guideline is the 60-30-10 rule: about 60% a main or neutral colour, 30% a secondary colour and 10% an accent for buttons and highlights. A five-colour palette gives you enough to pick those three roles plus a darker and lighter option.
Related tools
- Dice Roller, Roll up to 50 virtual dice: d4, d6, d8, d10, d12, d20 or d100, and see each roll and the total.
- Coin Flip & Yes/No Decider, Flip a fair virtual coin or get a random Yes / No answer, with a running tally of every result.
- Random Name Picker, Pick one or several random winners from a list of names or entries, fair, quick and ideal for giveaways, raffles and classrooms.
- Random Color Generator, Generate a random colour with its HEX code and a live preview, useful for design ideas and placeholder colours.
- Color Format Converter, Convert colours between HEX, RGB and HSL formats in either direction, with a live colour preview.
- CSS Gradient Generator, Build a CSS linear gradient from two colours and an angle, preview it live and copy ready-to-use CSS.
Quick Work Studio