Built-in toolFree · No signup

CSS Color Palette Generator

Generate harmonious colour palettes from a single base colour using colour theory. Choose from 6 harmony modes, explore shades and tints, then copy the full palette as CSS custom properties ready to drop into your design system.

Share on X LinkedIn

Base Color

HSL

hsl(161, 69%, 37%)

Color Harmony

Complementary Palette

#1D9E75

hsl(161, 69%, 37%)

#9F1D46

hsl(341, 69%, 37%)

#115F46

hsl(161, 70%, 22%)

#D93066

hsl(341, 69%, 52%)

#5CC7A5

hsl(161, 49%, 57%)

Base Color Shades

50#F2FDF9hsl(158,73%,97%)

100#D4F7EChsl(161,69%,90%)

200#A9EFD9hsl(161,69%,80%)

300#7EE7C6hsl(161,69%,70%)

400#53DFB3hsl(161,69%,60%)

500#28D7A0hsl(161,69%,50%)

600#1EA479hsl(161,69%,38%)

700#167959hsl(161,69%,28%)

800#0E4E3Ahsl(161,70%,18%)

900#082B20hsl(161,69%,10%)

CSS Custom Properties

:root {  --color-primary: #1D9E75;  --color-secondary: #9f1d46;  --color-tertiary: #115f46;  --color-quaternary: #d93066;  --color-quinary: #5cc7a5;   --color-50: #f2fdf9;  --color-100: #d4f7ec;  --color-200: #a9efd9;  --color-300: #7ee7c6;  --color-400: #53dfb3;  --color-500: #28d7a0;  --color-600: #1ea479;  --color-700: #167959;  --color-800: #0e4e3a;  --color-900: #082b20;}

Was this tool helpful?

How to use

Pick a base colour

Use the colour picker or type a hex value. This is the anchor colour your palette is built from.

Choose a harmony

Select Complementary, Analogous, Triadic, Split, Tetradic, or Monochromatic to generate a harmonious set.

Explore shades

The shades panel shows 9 tints and shades of your base colour from 50 to 900, Tailwind-style.

Copy CSS variables

Grab the full :root block with all palette colours as --color-primary, --color-secondary, and shade tokens.