Cubestack

Color Palette Generator

Free colour palette generator — build harmonious palettes from one colour: analogous, complementary, triadic, monochrome, tints and shades. Copy HEX codes or CSS variables.

CSS variables

:root {
  --color-1: #ff1f59;
  --color-2: #ff2f1f;
  --color-3: #ff7a1f;
  --color-4: #ffc51f;
  --color-5: #efff1f;
}

Check text colours on these backgrounds with the Contrast Checker.

What is the Color Palette Generator?

A colour palette is a set of colours that work together. This generator uses colour theory — positions on the colour wheel — to build palettes from any base colour.

How to use it

  1. 1

    Pick a base colour

    Or press Random.

  2. 2

    Choose a harmony

    See the palette update.

  3. 3

    Copy colours

    One by one or as CSS.

Features

  • 7 harmonies

    Analogous, complementary, triadic, split, tetradic, monochrome, tints & shades.

  • Click to copy

    Any HEX code.

  • CSS variables

    The whole palette ready for your stylesheet.

Popular uses

  • Branding

    Pick colours for a logo and site.

  • Presentations

    Consistent slide colours.

  • UI design

    Shades for buttons and states.

Frequently asked questions

Which harmony should I use?

Analogous is calm, complementary is bold, monochrome is clean.

Are the colours accessible?

Check text on them with the Contrast Checker.

Related tools