Color Palette Generator

Configuration

Swatch Palettes

Primary - 0°

Swatch 0
Swatch 100
Swatch 200
Swatch 300
Swatch 400
Swatch 500
Swatch 600
Swatch 700
Swatch 800
Swatch 900
Swatch 1000

CSS Output

--swatch--primary--1000: #000;
--swatch--primary--900: #120003;
--swatch--primary--800: #380014;
--swatch--primary--700: #61002b;
--swatch--primary--600: #821044;
--swatch--primary--500: #a33460;
--swatch--primary--400: #c5537c;
--swatch--primary--300: #e7729a;
--swatch--primary--200: #ff91b9;
--swatch--primary--100: #ffc2db;
--swatch--primary--0: #fff8fe;

@supports (color: oklch(0 1 1)) {
  --swatch--primary--1000: oklch(1.0769% 0.00497 28.958);
  --swatch--primary--900: oklch(11.2% 0.05065 6.4546);
  --swatch--primary--800: oklch(21.168% 0.09607 3.5109);
  --swatch--primary--700: oklch(30.747% 0.13996 1.5442);
  --swatch--primary--600: oklch(40.05% 0.15 0);
  --swatch--primary--500: oklch(50% 0.15 0);
  --swatch--primary--400: oklch(59.95% 0.15 0);
  --swatch--primary--300: oklch(69.9% 0.15 0);
  --swatch--primary--200: oklch(79.85% 0.15 0);
  --swatch--primary--100: oklch(88.597% 0.08816 356.46);
  --swatch--primary--0: oklch(98.667% 0.01228 337.09);
}

--swatch--text-on--primary--1000: #fff;
--swatch--text-on--primary--900: #fff;
--swatch--text-on--primary--800: #fff;
--swatch--text-on--primary--700: #fff;
--swatch--text-on--primary--600: #fff;
--swatch--text-on--primary--500: #fff;
--swatch--text-on--primary--400: #000;
--swatch--text-on--primary--300: #000;
--swatch--text-on--primary--200: #000;
--swatch--text-on--primary--100: #000;
--swatch--text-on--primary--0: #000;