Colour Palette Generator

What is a colour palette generator?

A colour palette generator suggests a set of colours that work well together. Picking colours one by one often leads to combinations that clash or feel flat. Colour harmony rules, based on positions around the colour wheel, give you a reliable starting point. This tool applies those rules to any base colour you choose, and it can also roll random palettes while keeping the colours you like locked in place.

How to create a palette

1. Choose a base colour with the picker, or type a HEX code or colour name.
2. Select a palette type, for example Analogous or Triadic.
3. Click a HEX code on any swatch to copy it, or press Use as base to build a new palette around that swatch.
4. For random palettes, choose Random palette, set how many colours you want, press Generate and lock the swatches you want to keep.
5. Copy the HEX list or the CSS variables, or download them as a .css file.

Palette types

• Complementary: the base and the colour opposite it on the wheel, with lighter and darker versions. High contrast and energetic.
• Split complementary: the base plus the two colours either side of its opposite. Lively but easier to balance.
• Analogous: neighbouring hues 30 degrees apart. Calm and natural.
• Triadic: three hues evenly spaced at 120 degrees. Bold and balanced.
• Tetradic: four hues at 90 degrees, forming a square on the wheel. Rich, best with one dominant colour.
• Monochromatic: one hue at six lightness levels. Clean and consistent.
• Shades and tints: the base mixed step by step with black or with white, ideal for button states and backgrounds.

Using palettes on a website

A common approach is the 60, 30, 10 rule: one main colour for most surfaces, a second colour for supporting areas and an accent for buttons and links. The exported CSS variables, such as –color-1, can be pasted into your stylesheet or into the custom CSS of your theme and renamed to fit your project, for example –brand or –accent.

Tips

Harmony rules work best when you keep saturation in check. If a triadic palette feels loud, use the base colour widely and the other two in small amounts. Always test text colours from your palette with a contrast checker, because a beautiful palette is only useful if people can read the content.

Works on any device

The generator runs entirely in your browser on phones, tablets and computers. Swatches wrap neatly on small screens, so you can explore colour ideas on the go and copy codes straight into a design app or a message to your team. Nothing you create is stored or sent anywhere, so start as many palettes as you like.