CSSAwwwards
+ Submit tool
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.

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;}

How to use

01

Pick a base colour

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

02

Choose a harmony

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

03

Explore shades

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

04

Copy CSS variables

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

More CSS utility tools

From our directory of 30+ CSS tools.

Browse all →

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →