Corbeau to Leek Color Palette

About this palette

Corbeau to Leek is a 5-color cool palette: #171224 (Corbeau), #7E0835 (Inescapable Lover), #00945A (Moss), #C088FF (Illicit Purple), #88E197 (Leek). It mixes black, red, green, purple tones and feels cool overall. The strongest text pairing is #171224 on #88E197 with a contrast ratio of 11.55:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Corbeau	rgb(23, 18, 36)	hsl(257, 33%, 11%)
Inescapable Lover	rgb(126, 8, 53)	hsl(337, 88%, 26%)
Moss	rgb(0, 148, 90)	hsl(156, 100%, 29%)
Illicit Purple	rgb(192, 136, 255)	hsl(268, 100%, 77%)
Leek	rgb(136, 225, 151)	hsl(130, 60%, 71%)

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.

Aa11.55:1 Very good#171224 on #88E197
Aa11.55:1 Very good#88E197 on #171224
Aa7.15:1 Very good#171224 on #C088FF
Aa7.15:1 Very good#C088FF on #171224
Aa6.72:1 Good#7E0835 on #88E197
Aa6.72:1 Good#88E197 on #7E0835
Aa4.69:1 Good#171224 on #00945A
Aa4.69:1 Good#00945A on #171224

Color blindness preview

CSS variables

/* Corbeau to Leek — https://swatchly.xyz/palette/171224-7e0835-00945a-c088ff-88e197 */
:root {
  --corbeau: #171224;
  --inescapable-lover: #7e0835;
  --moss: #00945a;
  --illicit-purple: #c088ff;
  --leek: #88e197;
}

Tailwind CSS v4

/* Corbeau to Leek — https://swatchly.xyz/palette/171224-7e0835-00945a-c088ff-88e197 */
@theme {
  --color-corbeau: #171224;
  --color-corbeau-50: #f6f3ff;
  --color-corbeau-100: #ece8f9;
  --color-corbeau-200: #d8d4e8;
  --color-corbeau-300: #c2bdd3;
  --color-corbeau-400: #a39eb5;
  --color-corbeau-500: #858098;
  --color-corbeau-600: #69647a;
  --color-corbeau-700: #514c60;
  --color-corbeau-800: #3c3849;
  --color-corbeau-900: #2b2835;
  --color-corbeau-950: #171224;
  --color-inescapable-lover: #7e0835;
  --color-inescapable-lover-50: #fff1f3;
  --color-inescapable-lover-100: #ffe3e7;
  --color-inescapable-lover-200: #ffc6d0;
  --color-inescapable-lover-300: #ffa2b4;
  --color-inescapable-lover-400: #eb7992;
  --color-inescapable-lover-500: #ce5b77;
  --color-inescapable-lover-600: #af405d;
  --color-inescapable-lover-700: #912b48;
  --color-inescapable-lover-800: #7e0835;
  --color-inescapable-lover-900: #5f1129;
  --color-inescapable-lover-950: #3f0618;
  --color-moss: #00945a;
  --color-moss-50: #d6ffe5;
  --color-moss-100: #b6fad0;
  --color-moss-200: #94e8b6;
  --color-moss-300: #70d29a;
  --color-moss-400: #3eb277;
  --color-moss-500: #00945a;
  --color-moss-600: #007748;
  --color-moss-700: #005f38;
  --color-moss-800: #004b2b;
  --color-moss-900: #003b21;
  --color-moss-950: #002613;
  --color-illicit-purple: #c088ff;
  --color-illicit-purple-50: #f9f5ff;
  --color-illicit-purple-100: #f3eaff;
  --color-illicit-purple-200: #e5d2ff;
  --color-illicit-purple-300: #d5b5ff;
  --color-illicit-purple-400: #c088ff;
  --color-illicit-purple-500: #a36bdf;
  --color-illicit-purple-600: #864ebf;
  --color-illicit-purple-700: #6d38a0;
  --color-illicit-purple-800: #562682;
  --color-illicit-purple-900: #431a68;
  --color-illicit-purple-950: #2a0c44;
  --color-leek: #88e197;
  --color-leek-50: #edffef;
  --color-leek-100: #d0ffd6;
  --color-leek-200: #b3f0bc;
  --color-leek-300: #88e197;
  --color-leek-400: #6bbe7a;
  --color-leek-500: #49a15b;
  --color-leek-600: #298440;
  --color-leek-700: #0d6a2b;
  --color-leek-800: #00521e;
  --color-leek-900: #003f15;
  --color-leek-950: #00280a;
}