A good colour palette usually starts from a single base colour, then derives the rest: lighter tints, darker shades, and a few harmonious colours from the colour wheel. To make one, pick a base colour in a palette generator and it produces the full set. Here is what each part is and how to use it.
Use the picker or type a hex value.
Lighter and darker versions for backgrounds, borders and hover states.
Complementary, analogous and triadic colours for accents.
Click any swatch to copy it into your CSS or design tool.
Tints, shades and harmonies explained
Tints add white (higher lightness); shades add black (lower lightness) — together they give you a usable scale from one colour. Complementary is the opposite hue (strong contrast), analogous are the neighbours (calm, cohesive), and triadic are three evenly spaced hues (vibrant balance). The palette generator builds them all.
Using a palette in your UI
Use a dark shade for text, the base for primary actions, and light tints for backgrounds and hover states; reserve a complementary or triadic colour for a single accent. Need to convert a colour to RGB or HSL? Use the colour converter, and turn two colours into a gradient.
Tip: Limit a UI to one base hue plus neutrals and a single accent — too many competing hues is the most common reason a palette looks amateur.
Make a colour palette now
Pick a base colour and get tints, shades and harmonies — free, in your browser.
Open the Color Palette Generator →Frequently Asked Questions
How do I make a colour palette?
Start from one base colour and derive tints, shades and a few colour-wheel harmonies. A generator does this automatically.
What is a complementary colour?
The hue opposite your base on the colour wheel (hue + 180°), giving the strongest contrast.
Is anything uploaded?
No — the palette is generated in your browser.