More
More
Colour Palette Generator
Harmonious palettes from one colour.
Free. Runs in your browser: nothing you enter or open is uploaded.
Lock the colours you like, then generate again to replace the rest. Press the space bar to generate when this tab is open.
Export
Harmonies turn the hue around the HSL colour wheel. The 50 to 950 scale keeps the hue and steps lightness in OKLCH, so each step looks evenly lighter or darker. Random colours come from your browser's cryptographic random generator.
How to use it
- Enter a base colour to see its complementary, analogous, triadic and tetradic partners, plus tints, shades and a full 50 to 950 scale.
- Or open Random palette, lock the colours you want to keep and generate again until the rest fit.
- Choose a palette and a format under Export, then copy or download it as CSS variables, JSON or a Tailwind-style object.
Questions
What is a complementary colour?
The colour opposite yours on the colour wheel, 180 degrees away. Complementary pairs give strong contrast, so they work well for a call to action against a main brand colour.
Which harmony should I use for a website?
Analogous and monochrome palettes are calm and easy to use for backgrounds and text. Complementary, triadic and tetradic palettes are livelier and work best with one main colour and the others as small accents.
How do I use the Tailwind-style export?
Paste the object into the colours section of your Tailwind configuration, or use it as a plain JavaScript object of colour tokens. The 50 to 950 scale uses the same step names as Tailwind's own colours.
Will these colours be accessible?
Not automatically. Check every text and background pair with a contrast checker before you use it; lighter tints usually need dark text and darker shades need white text.