Colour palette generator
Pick one colour and get tints, shades, and complementary, analogous and triadic colours, with HEX codes and CSS variables.
Runs in your browser. Nothing you enter is uploaded.
What it does
Start from one colour, such as a brand colour, and get a set that goes with it: lighter tints and darker shades of the same colour, and colours related to it on the colour wheel. Click any swatch to copy its HEX code.
How to use it
- Pick a colour or type its HEX code.
- Use the tints and shades for backgrounds, borders and text in the same family.
- Use the complementary colour for something that must stand out, and the analogous colours for a calm, related look.
- Copy a code, or download the palette as CSS variables.
Worked example
From deep maroon #7a1f1f, the complementary colour is the teal #1f7a7a, and the triadic colours are #1f7a1f (green) and #1f1f7a (blue).
How it works
The colour is converted to HSL: hue (its angle on the colour wheel), saturation and lightness. Tints and shades keep the hue and change the lightness. The complementary colour is 180° away on the wheel, analogous colours are 30° either side, and triadic colours are 120° either side. This is geometry on the wheel; whether a combination looks right still depends on how much of each colour you use.
Questions
How many colours should a design use?
A common approach is one main colour, one accent, and neutral tones for text and backgrounds. More than that needs care.
Will text be readable on these colours?
Not automatically. Dark text needs a light background and the reverse. Check the contrast of any text colour you choose.
Why do the colours look different in print?
Screens mix light (RGB) and printers mix ink (CMYK). Some bright screen colours cannot be printed exactly.
Related tools
Need an app or website for your shop? See how to hire us →