Mauve to Lavendless Color Palette

About this palette

Mauve to Lavendless is a 5-color cool palette: #D8B2F7 (Mauve), #1E1E0B (Noir Mystique), #434300 (Green Not Found), #19874C (Later Gator), #B374CA (Lavendless). It mixes purple, gray, brown, green tones and feels cool overall. The strongest text pairing is #D8B2F7 on #1E1E0B with a contrast ratio of 9.34:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mauve	rgb(216, 178, 247)	hsl(273, 81%, 83%)
Noir Mystique	rgb(30, 30, 11)	hsl(60, 46%, 8%)
Green Not Found	rgb(67, 67, 0)	hsl(60, 100%, 13%)
Later Gator	rgb(25, 135, 76)	hsl(148, 69%, 31%)
Lavendless	rgb(179, 116, 202)	hsl(284, 45%, 62%)

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.

Aa9.34:1 Very good#D8B2F7 on #1E1E0B
Aa9.34:1 Very good#1E1E0B on #D8B2F7
Aa5.70:1 Good#D8B2F7 on #434300
Aa5.70:1 Good#434300 on #D8B2F7
Aa5.03:1 Good#1E1E0B on #B374CA
Aa5.03:1 Good#B374CA on #1E1E0B
Aa3.70:1 Poor#1E1E0B on #19874C
Aa3.70:1 Poor#19874C on #1E1E0B

Color blindness preview

CSS variables

/* Mauve to Lavendless — https://swatchly.xyz/palette/d8b2f7-1e1e0b-434300-19874c-b374ca */
:root {
  --mauve: #d8b2f7;
  --noir-mystique: #1e1e0b;
  --green-not-found: #434300;
  --later-gator: #19874c;
  --lavendless: #b374ca;
}

Tailwind CSS v4

/* Mauve to Lavendless — https://swatchly.xyz/palette/d8b2f7-1e1e0b-434300-19874c-b374ca */
@theme {
  --color-mauve: #d8b2f7;
  --color-mauve-50: #faf4ff;
  --color-mauve-100: #f4e8ff;
  --color-mauve-200: #e8ceff;
  --color-mauve-300: #d8b2f7;
  --color-mauve-400: #b693d3;
  --color-mauve-500: #9b76b7;
  --color-mauve-600: #7f5c9a;
  --color-mauve-700: #66467e;
  --color-mauve-800: #503465;
  --color-mauve-900: #3e2650;
  --color-mauve-950: #271634;
  --color-noir-mystique: #1e1e0b;
  --color-noir-mystique-50: #f6f6e9;
  --color-noir-mystique-100: #eceddd;
  --color-noir-mystique-200: #d8d9c7;
  --color-noir-mystique-300: #c2c3ae;
  --color-noir-mystique-400: #a3a38d;
  --color-noir-mystique-500: #878871;
  --color-noir-mystique-600: #6c6d57;
  --color-noir-mystique-700: #555542;
  --color-noir-mystique-800: #414231;
  --color-noir-mystique-900: #313224;
  --color-noir-mystique-950: #1e1e0b;
  --color-green-not-found: #434300;
  --color-green-not-found-50: #f6f8d6;
  --color-green-not-found-100: #edefc9;
  --color-green-not-found-200: #d9dcae;
  --color-green-not-found-300: #c3c591;
  --color-green-not-found-400: #a3a56c;
  --color-green-not-found-500: #88894e;
  --color-green-not-found-600: #6d6e35;
  --color-green-not-found-700: #565621;
  --color-green-not-found-800: #434300;
  --color-green-not-found-900: #33330a;
  --color-green-not-found-950: #1f1f04;
  --color-later-gator: #19874c;
  --color-later-gator-50: #deffe7;
  --color-later-gator-100: #c3fdd4;
  --color-later-gator-200: #a8edbd;
  --color-later-gator-300: #89d9a3;
  --color-later-gator-400: #60bc81;
  --color-later-gator-500: #3ea265;
  --color-later-gator-600: #19874c;
  --color-later-gator-700: #006c39;
  --color-later-gator-800: #00552b;
  --color-later-gator-900: #004120;
  --color-later-gator-950: #002912;
  --color-lavendless: #b374ca;
  --color-lavendless-50: #fcf4ff;
  --color-lavendless-100: #f9e9ff;
  --color-lavendless-200: #f2cfff;
  --color-lavendless-300: #e7b2fb;
  --color-lavendless-400: #cc90e2;
  --color-lavendless-500: #b374ca;
  --color-lavendless-600: #9557ab;
  --color-lavendless-700: #79408d;
  --color-lavendless-800: #602e72;
  --color-lavendless-900: #4b205a;
  --color-lavendless-950: #30113a;
}