Skip to content
HTMLSuite
Menu

Color Palette Generator

Build a five-color palette from one color, or generate a random one.

  • Analogous −40°

    #1EFFD8

    rgb(30, 255, 216)

  • Analogous −20°

    #1EDBFF

    rgb(30, 219, 255)

  • Base

    #1E90FF

    rgb(30, 144, 255)

  • Analogous +20°

    #1E45FF

    rgb(30, 69, 255)

  • Analogous +40°

    #421EFF

    rgb(66, 30, 255)

HEX list

#1EFFD8, #1EDBFF, #1E90FF, #1E45FF, #421EFF

CSS variables

:root {
  --color-1: #1EFFD8;
  --color-2: #1EDBFF;
  --color-3: #1E90FF;
  --color-4: #1E45FF;
  --color-5: #421EFF;
}

Shades of the starting color

Click a swatch to use it as the starting color.

Tints of the starting color

How to generate a color palette

  1. Enter a starting color — your brand color, for example — or pick one with the swatch.
  2. Choose a scheme: analogous, complementary, triadic, split-complementary, tetradic or monochromatic.
  3. Click Use on any color to rebuild the palette around it, or Random palette for inspiration.
  4. Copy single values, the whole HEX list, or the palette as CSS variables.

Which scheme should I use?

  • Analogous — neighbouring hues. Calm and cohesive; good for backgrounds and illustrations.
  • Complementary — the opposite hue plus lighter and darker versions. Strong accents for buttons and calls to action.
  • Triadic — three hues 120° apart. Lively and balanced; use one as the main color and the others sparingly.
  • Split-complementary — the two neighbours of the complement. Contrast with less tension than a direct complement.
  • Tetradic — four hues 90° apart. Rich, but needs one dominant color to stay calm.
  • Monochromatic — shades and tints of one hue. Safe, elegant and easy to keep accessible.

Export as CSS variables

The CSS export defines one custom property per color, ready to paste into a stylesheet. This is the analogous palette for #1E90FF:

Example export
:root {
  --color-1: #1EFFD8;
  --color-2: #1EDBFF;
  --color-3: #1E90FF;
  --color-4: #1E45FF;
  --color-5: #421EFF;
}

.button {
  background: var(--color-3);
}

Rename the variables to their role in your design (for example --color-primary) and check text colors with the contrast checker.

Related color tools

See the harmonies on the color wheel, fine-tune a single color in the color picker, or start from a photo with the image color picker, which also extracts an image's main colors.

Frequently asked questions

How are the palettes built?
Harmony colors are rotations of your starting color's hue on the color wheel — 180° for the complement, ±20° and ±40° for analogous, 120° steps for triadic. Lighter and darker supporting colors are mixes with white or black.
How do I use the palette in CSS?
Copy the CSS variables block and paste it into your stylesheet. Then use the colors with var(--color-1) and so on, for example background: var(--color-3);.
Are the generated palettes accessible?
Not automatically — a harmony says nothing about readability. Check any text and background pair with the contrast checker before using it for text.

Related tools