Color

Palette Generator

Build tints, shades and harmonies from a single base color.

Base color

Hex value

Tints and shades

Harmonies

Complementary

#00c16a

#c20057

Analogous

#00c20a

#00c16a

#00b8c2

Triadic

#00c16a

#6b00c2

#c26b00

Tetradic

#00c16a

#0a00c2

#c20057

#b8c200

Split complementary

#00c16a

#c200b8

#c20a00

CSS custom properties

:root {
  --color-brand-50: #e6f9f0;
  --color-brand-100: #ccf3e1;
  --color-brand-200: #99e6c3;
  --color-brand-300: #66daa6;
  --color-brand-400: #33cd88;
  --color-brand-500: #00c16a;
  --color-brand-600: #00a058;
  --color-brand-700: #007f46;
  --color-brand-800: #005f34;
  --color-brand-900: #003e22;
  --color-brand-950: #002d19;
}

Guides that cover this

HEX, RGB, HSL and the newer colour spacesHow HEX, RGB, HSL, LCH and OKLCH relate to each other, why an HSL palette goes muddy in the mid tones, and what gamut clipping and alpha compositing do to the colour you get.Meeting WCAG colour contrast without guessingWhat a contrast ratio measures, the AA and AAA thresholds for text and interface components, and the grey-on-white mistakes that quietly fail every time.

Related tools

Color Converter

Convert a color between HEX, RGB, HSL and CSS notation.

Color

Contrast Checker

Check a foreground and background pair against WCAG AA and AAA.

Color