Color Palette Generator
Build harmonious palettes from one base colour.
How to use
- 1 Choose a base colour with the swatch or by typing a hex code.
- 2 Select a harmony rule such as complementary, analogous or triadic.
- 3 Review the generated swatches and their hex codes.
- 4 Copy individual colours or the whole palette for your project.
About Color Palette Generator
The Color Palette Generator turns a single starting colour into a coordinated set of swatches using classic colour-theory relationships.
Pick a base colour with the swatch or by typing a hex code, choose a harmony rule, and the tool calculates the matching colours by rotating the hue and adjusting lightness on the colour wheel — exactly the maths designers use to keep a palette feeling intentional rather than random.
Six schemes are included.
Complementary pairs your colour with its opposite for high contrast; analogous gathers neighbours for a calm, cohesive feel; triadic and tetradic spread evenly around the wheel for balanced, vibrant sets; monochromatic keeps the hue fixed and varies brightness for subtle, layered shades; and shades steps the lightness from dark to light to build a ramp ideal for UI states, charts or type scales.
Each swatch shows its hex code and can be copied individually, or you can copy the whole palette at once to drop into CSS variables, a Tailwind config or a design file.
It all runs locally in your browser, so nothing is uploaded or stored, and it keeps working offline once the page has loaded.
Experiment freely — nudge the base colour or switch schemes and the palette updates instantly, making it a fast way to explore directions before committing to a brand or interface theme.
FAQ
What harmony rule should I start with?
Analogous palettes are the safest and most cohesive for backgrounds and UI. Use complementary or triadic when you need a strong accent or call-to-action colour that stands out.
What is the difference between monochromatic and shades?
Both keep the hue fixed and vary lightness. Monochromatic centres on your base colour and steps lighter and darker around it; shades produces an even dark-to-light ramp, handy for design tokens.