Color palette generator

A consistent palette is the backbone of a recognisable interface. Starting from a single brand colour, this generator builds the related colours you typically need: lighter tints for backgrounds, darker shades for hover states and text, and complementary and analogous hues for accents.

How to use it

1. Enter a base colour as a hex code, for example #3B82F6.
2. Browse the generated tints, shades and harmony colours.
3. Click a swatch to copy its hex value.

What each group means

• Tints: the base mixed with white. Use them for backgrounds, selected rows and subtle badges.
• Shades: the base mixed with black. Use them for hover and pressed states, borders and text on light backgrounds.
• Complementary: the hue opposite on the colour wheel (180°). Strong contrast for calls to action, used sparingly.
• Analogous: hues 30° either side. They sit comfortably next to the base for illustrations and charts.

Example

From #3B82F6 (blue, hue about 217°), the complementary colour is an orange around hue 37°, and the analogous colours are a cyan-blue around 187° and an indigo-violet around 247°. Tints step up towards #EFF6FF, and shades step down towards a deep navy.

Building a design system scale

Most systems, like Tailwind, use a 50 to 900 scale for each colour. Map your lightest tint to 50, the base to around 500 or 600 and the darkest shade to 900. Then check text and background combinations with a contrast checker; a 500-level colour on white often fails WCAG AA for small text.