Mint Coffee to Alligator Gladiator Color Palette

About this palette

Mint Coffee to Alligator Gladiator is a 5-color cool, vintage palette: #D0FFF0 (Mint Coffee), #BAA9F7 (Diva), #8687E7 (Perrywinkle), #A45884 (Feminism), #494D1C (Alligator Gladiator). It mixes white, purple, red, green tones and feels cool overall. The strongest text pairing is #D0FFF0 on #494D1C with a contrast ratio of 8.15:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mint Coffee	rgb(208, 255, 240)	hsl(161, 100%, 91%)
Diva	rgb(186, 169, 247)	hsl(253, 83%, 82%)
Perrywinkle	rgb(134, 135, 231)	hsl(239, 67%, 72%)
Feminism	rgb(164, 88, 132)	hsl(325, 30%, 49%)
Alligator Gladiator	rgb(73, 77, 28)	hsl(65, 47%, 21%)

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.15:1 Very good#D0FFF0 on #494D1C
Aa8.15:1 Very good#494D1C on #D0FFF0
Aa4.47:1 Poor#D0FFF0 on #A45884
Aa4.47:1 Poor#A45884 on #D0FFF0
Aa4.28:1 Poor#BAA9F7 on #494D1C
Aa4.28:1 Poor#494D1C on #BAA9F7

Color blindness preview

CSS variables

/* Mint Coffee to Alligator Gladiator — https://swatchly.xyz/palette/d0fff0-baa9f7-8687e7-a45884-494d1c */
:root {
  --mint-coffee: #d0fff0;
  --diva: #baa9f7;
  --perrywinkle: #8687e7;
  --feminism: #a45884;
  --alligator-gladiator: #494d1c;
}

Tailwind CSS v4

/* Mint Coffee to Alligator Gladiator — https://swatchly.xyz/palette/d0fff0-baa9f7-8687e7-a45884-494d1c */
@theme {
  --color-mint-coffee: #d0fff0;
  --color-mint-coffee-50: #d0fff0;
  --color-mint-coffee-100: #d4f1e7;
  --color-mint-coffee-200: #bddfd4;
  --color-mint-coffee-300: #a3cabd;
  --color-mint-coffee-400: #81ab9e;
  --color-mint-coffee-500: #659083;
  --color-mint-coffee-600: #4c7669;
  --color-mint-coffee-700: #375e53;
  --color-mint-coffee-800: #284a40;
  --color-mint-coffee-900: #1c3931;
  --color-mint-coffee-950: #0f241e;
  --color-diva: #baa9f7;
  --color-diva-50: #f0edff;
  --color-diva-100: #e5dfff;
  --color-diva-200: #d1c5ff;
  --color-diva-300: #baa9f7;
  --color-diva-400: #9d8cd6;
  --color-diva-500: #8372bb;
  --color-diva-600: #6b5a9f;
  --color-diva-700: #564684;
  --color-diva-800: #44356d;
  --color-diva-900: #362958;
  --color-diva-950: #21183a;
  --color-perrywinkle: #8687e7;
  --color-perrywinkle-50: #f6f7ff;
  --color-perrywinkle-100: #edefff;
  --color-perrywinkle-200: #d9dcff;
  --color-perrywinkle-300: #c1c5ff;
  --color-perrywinkle-400: #9fa2fd;
  --color-perrywinkle-500: #8687e7;
  --color-perrywinkle-600: #6a69c6;
  --color-perrywinkle-700: #5350a6;
  --color-perrywinkle-800: #3f3c88;
  --color-perrywinkle-900: #2f2c6c;
  --color-perrywinkle-950: #1c1947;
  --color-feminism: #a45884;
  --color-feminism-50: #fff0f8;
  --color-feminism-100: #ffe4f2;
  --color-feminism-200: #ffc9e5;
  --color-feminism-300: #f4aed4;
  --color-feminism-400: #d98db7;
  --color-feminism-500: #bf719e;
  --color-feminism-600: #a45884;
  --color-feminism-700: #87416a;
  --color-feminism-800: #6d2f54;
  --color-feminism-900: #552141;
  --color-feminism-950: #381229;
  --color-alligator-gladiator: #494d1c;
  --color-alligator-gladiator-50: #f5f9db;
  --color-alligator-gladiator-100: #ebefce;
  --color-alligator-gladiator-200: #d7dcb5;
  --color-alligator-gladiator-300: #c2c79b;
  --color-alligator-gladiator-400: #a4a978;
  --color-alligator-gladiator-500: #898f5d;
  --color-alligator-gladiator-600: #707545;
  --color-alligator-gladiator-700: #5b5f32;
  --color-alligator-gladiator-800: #494d1c;
  --color-alligator-gladiator-900: #383b18;
  --color-alligator-gladiator-950: #23250b;
}