Generate a colour palette and export it as code
Roll a five-colour palette, lock the colours you like and roll again until the rest fit. You can also build palettes from colour theory, pull them from a photo, and export the result as CSS variables, Tailwind, SCSS or JSON. Everything happens in your browser.
Working with the generator
- Press Generate, or the space bar, for a new palette.
- Lock any colour you want to keep. Locked colours stay put while the others change.
- Click a swatch to copy its hex value, or export the whole palette.
The palette is saved in the page address as you work, so you can bookmark it or send the link to someone and they see exactly the same colours.
The harmony schemes, precisely
Pick a base colour and each scheme rotates its hue around the colour wheel by fixed angles, keeping saturation and lightness the same:
- Complementary adds the opposite hue, 180 degrees away. Maximum contrast; use the second colour sparingly, for buttons and highlights.
- Analogous uses neighbours 30 and 60 degrees away. Calm and cohesive.
- Split complementary uses the two hues either side of the opposite (150 and 210 degrees). Nearly as much contrast as complementary, easier to balance.
- Triadic spaces three hues 120 degrees apart. Lively; usually works best with one dominant colour.
- Tetradic uses four hues 90 degrees apart. Rich but hard to balance; mute some of them.
- Monochromatic keeps one hue and varies only lightness. Safe, elegant and easy to use for interfaces.
Turning five colours into a design
Interior designers use a 60-30-10 rule of thumb that works on screens too: about 60% of the area in a neutral or dominant colour, 30% in a secondary colour, and 10% in an accent for the things you want people to notice, such as buttons. A palette where every colour shouts at once is hard to use however good it looks as five swatches.
Before you commit, test the colours you will put text on. Light colours that look great as swatches often fail as text backgrounds. The contrast checker tells you whether a text and background pair meets accessibility guidelines.
Palettes from a photo
From image shrinks the picture, groups similar colours together and picks the five most common ones that are clearly different from each other. A photo dominated by sky or a white background will give you mostly sky or white, so crop to the part you care about first. The image is read in your browser and not uploaded.
Export formats
CSS gives custom properties from --color-1 to --color-5 for a :root block. Tailwind gives a colors object you can paste into your config. SCSS gives $color variables, and JSON gives a plain array of hex values for design tokens or scripts.