Violet Heaven to Alligator Gladiator color palette

D7B4EEViolet Heaven 95AA49Lime It or Leave It 202308Midnight Pines 7F6EA6Purple Haze 40451CAlligator Gladiator

Open in generator Export PNG, PDF, ASE…

About this palette

Violet Heaven to Alligator Gladiator is a 5-color cool, earthy palette: #D7B4EE (Violet Heaven), #95AA49 (Lime It or Leave It), #202308 (Midnight Pines), #7F6EA6 (Purple Haze), #40451C (Alligator Gladiator). It mixes purple, green tones and feels cool overall. The strongest text pairing is #D7B4EE on #202308 with a contrast ratio of 8.93:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Violet Heaven	rgb(215, 180, 238)	hsl(276, 63%, 82%)
Lime It or Leave It	rgb(149, 170, 73)	hsl(73, 40%, 48%)
Midnight Pines	rgb(32, 35, 8)	hsl(67, 63%, 8%)
Purple Haze	rgb(127, 110, 166)	hsl(258, 24%, 54%)
Alligator Gladiator	rgb(64, 69, 28)	hsl(67, 42%, 19%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa8.93:1 Very good#D7B4EE on #202308
Aa8.93:1 Very good#202308 on #D7B4EE
Aa6.22:1 Good#95AA49 on #202308
Aa6.22:1 Good#202308 on #95AA49
Aa5.59:1 Good#D7B4EE on #40451C
Aa5.59:1 Good#40451C on #D7B4EE
Aa3.89:1 Poor#95AA49 on #40451C
Aa3.89:1 Poor#40451C on #95AA49

Color blindness preview

CSS variables

/* Violet Heaven to Alligator Gladiator — https://swatchly.xyz/palette/d7b4ee-95aa49-202308-7f6ea6-40451c */
:root {
  --violet-heaven: #d7b4ee;
  --lime-it-or-leave-it: #95aa49;
  --midnight-pines: #202308;
  --purple-haze: #7f6ea6;
  --alligator-gladiator: #40451c;
}

Tailwind CSS v4

/* Violet Heaven to Alligator Gladiator — https://swatchly.xyz/palette/d7b4ee-95aa49-202308-7f6ea6-40451c */
@theme {
  --color-violet-heaven: #d7b4ee;
  --color-violet-heaven-50: #faf4ff;
  --color-violet-heaven-100: #f5e7ff;
  --color-violet-heaven-200: #e8cffa;
  --color-violet-heaven-300: #d7b4ee;
  --color-violet-heaven-400: #b595cb;
  --color-violet-heaven-500: #9a79af;
  --color-violet-heaven-600: #7e5e92;
  --color-violet-heaven-700: #654877;
  --color-violet-heaven-800: #50365f;
  --color-violet-heaven-900: #3e284b;
  --color-violet-heaven-950: #271830;
  --color-lime-it-or-leave-it: #95aa49;
  --color-lime-it-or-leave-it-50: #eefcc7;
  --color-lime-it-or-leave-it-100: #e3f2b7;
  --color-lime-it-or-leave-it-200: #cddf98;
  --color-lime-it-or-leave-it-300: #b5c977;
  --color-lime-it-or-leave-it-400: #95aa49;
  --color-lime-it-or-leave-it-500: #7b8e2b;
  --color-lime-it-or-leave-it-600: #627403;
  --color-lime-it-or-leave-it-700: #4d5c00;
  --color-lime-it-or-leave-it-800: #3c4800;
  --color-lime-it-or-leave-it-900: #2e3800;
  --color-lime-it-or-leave-it-950: #1c2300;
  --color-midnight-pines: #202308;
  --color-midnight-pines-50: #f4f7e5;
  --color-midnight-pines-100: #eaeed9;
  --color-midnight-pines-200: #d6dac2;
  --color-midnight-pines-300: #c0c4a9;
  --color-midnight-pines-400: #a0a587;
  --color-midnight-pines-500: #858a6c;
  --color-midnight-pines-600: #6b7053;
  --color-midnight-pines-700: #55593f;
  --color-midnight-pines-800: #43462f;
  --color-midnight-pines-900: #333623;
  --color-midnight-pines-950: #202308;
  --color-purple-haze: #7f6ea6;
  --color-purple-haze-50: #f4f0ff;
  --color-purple-haze-100: #e9e1ff;
  --color-purple-haze-200: #d5c8f8;
  --color-purple-haze-300: #bdaee3;
  --color-purple-haze-400: #9c8bc4;
  --color-purple-haze-500: #7f6ea6;
  --color-purple-haze-600: #67578b;
  --color-purple-haze-700: #524472;
  --color-purple-haze-800: #41345c;
  --color-purple-haze-900: #33284a;
  --color-purple-haze-950: #201831;
  --color-alligator-gladiator: #40451c;
  --color-alligator-gladiator-50: #f4f8df;
  --color-alligator-gladiator-100: #eaefd2;
  --color-alligator-gladiator-200: #d6dcba;
  --color-alligator-gladiator-300: #bfc59f;
  --color-alligator-gladiator-400: #9fa67c;
  --color-alligator-gladiator-500: #848a5f;
  --color-alligator-gladiator-600: #696f46;
  --color-alligator-gladiator-700: #535833;
  --color-alligator-gladiator-800: #40451c;
  --color-alligator-gladiator-900: #313519;
  --color-alligator-gladiator-950: #1e210c;
}