Pick a base colour to generate a matching palette — everything is computed locally in your browser and never leaves your device.
How it works
- Analogous colors sit near each other on the wheel (calm, cohesive). Complementary uses opposite hues (high contrast). Split complementary softens that contrast. Triadic and tetradic space hues evenly for vibrant, balanced palettes.
- Shades & tints generates a light-to-dark ramp from your base color — exactly what you need for a design system's color scale.
- The contrast check shows the WCAG contrast ratio of each color against white and black text. Aim for at least 4.5:1 for normal body text (AA) and 3:1 for large text — this is what determines whether text on that color is actually readable.
- Export as HEX list, ready-to-paste CSS custom properties, or a PNG image of the palette.
- Click any swatch to copy its hex code.
About the colour palette generator
This tool builds a set of colours that work together — a palette — from a starting colour or at random. It shows each colour's hex code so you can copy it straight into your CSS, design file or brand guide.
Choosing colours that harmonise is hard to do by eye. Generating a palette from colour-theory relationships (complementary, analogous, and so on) gives you a coherent starting point you can then adjust.
Common uses
- Picking a colour scheme for a website, app or slide deck.
- Building a brand palette with a primary colour and supporting shades.
- Finding accents that complement a colour you already have to use.
- Exploring options quickly before committing in a design tool.
Use it carefully
A palette that looks good isn't automatically accessible. Always check that text has enough contrast against its background — aim for a WCAG AA ratio of at least 4.5:1 for body text — because colours that please the eye can still be unreadable for people with low vision or colour blindness.
Understanding your results
Each colour in the palette is shown as a swatch with its hex code beneath it. The hex code is the exact value to copy into your CSS or design tool.
The palette is generated from colour-theory relationships, so the colours are designed to sit together comfortably. Treat it as a coherent starting point and adjust individual shades to taste.
What do the hex codes mean?
A hex code like #3366cc is how CSS and design tools name a colour. Copy it directly into your stylesheet.
How do I keep my palette accessible?
Check contrast between any text colour and its background with a contrast checker, and don't rely on colour alone to convey meaning.
Can I reproduce the same palette later?
Copy the hex codes somewhere safe — they're the exact recipe for your palette.
From paint mixing to screen light
Traditional painting often discusses pigments that absorb light, while screens create colors by adding red, green and blue light. Digital palette work therefore uses a different physical model from mixing paint.
Why contrast matters beyond appearance
A palette is not only decorative. Text and background combinations need enough visual contrast to remain readable, especially for people with reduced vision or color-vision differences.