Embarrassed to Mauve Color Palette

About this palette

Embarrassed to Mauve is a 5-color cool palette: #F1738E (Embarrassed), #005735 (Moor-Monster), #3B1C4E (Plunged Into Darkness), #2D884E (Later Gator), #E7B6FF (Mauve). It mixes red, green, purple tones and feels cool overall. The strongest text pairing is #3B1C4E on #E7B6FF with a contrast ratio of 8.57:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Embarrassed	rgb(241, 115, 142)	hsl(347, 82%, 70%)
Moor-Monster	rgb(0, 87, 53)	hsl(157, 100%, 17%)
Plunged Into Darkness	rgb(59, 28, 78)	hsl(277, 47%, 21%)
Later Gator	rgb(45, 136, 78)	hsl(142, 50%, 35%)
Mauve	rgb(231, 182, 255)	hsl(280, 100%, 86%)

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.57:1 Very good#3B1C4E on #E7B6FF
Aa8.57:1 Very good#E7B6FF on #3B1C4E
Aa5.19:1 Good#005735 on #E7B6FF
Aa5.19:1 Good#E7B6FF on #005735
Aa5.19:1 Good#F1738E on #3B1C4E
Aa5.19:1 Good#3B1C4E on #F1738E
Aa3.24:1 Poor#3B1C4E on #2D884E
Aa3.24:1 Poor#2D884E on #3B1C4E

Color blindness preview

CSS variables

/* Embarrassed to Mauve — https://swatchly.xyz/palette/f1738e-005735-3b1c4e-2d884e-e7b6ff */
:root {
  --embarrassed: #f1738e;
  --moor-monster: #005735;
  --plunged-into-darkness: #3b1c4e;
  --later-gator: #2d884e;
  --mauve: #e7b6ff;
}

Tailwind CSS v4

/* Embarrassed to Mauve — https://swatchly.xyz/palette/f1738e-005735-3b1c4e-2d884e-e7b6ff */
@theme {
  --color-embarrassed: #f1738e;
  --color-embarrassed-50: #fff1f3;
  --color-embarrassed-100: #ffe3e7;
  --color-embarrassed-200: #ffc6cf;
  --color-embarrassed-300: #ffa2b3;
  --color-embarrassed-400: #f1738e;
  --color-embarrassed-500: #d15773;
  --color-embarrassed-600: #b13b5a;
  --color-embarrassed-700: #932645;
  --color-embarrassed-800: #771634;
  --color-embarrassed-900: #5f0b27;
  --color-embarrassed-950: #3f0317;
  --color-moor-monster: #005735;
  --color-moor-monster-50: #ddffea;
  --color-moor-monster-100: #ccf8dd;
  --color-moor-monster-200: #b1e6c7;
  --color-moor-monster-300: #96d2af;
  --color-moor-monster-400: #71b58f;
  --color-moor-monster-500: #549b75;
  --color-moor-monster-600: #3a805c;
  --color-moor-monster-700: #256948;
  --color-moor-monster-800: #005735;
  --color-moor-monster-900: #0a4329;
  --color-moor-monster-950: #022b18;
  --color-plunged-into-darkness: #3b1c4e;
  --color-plunged-into-darkness-50: #f9f2ff;
  --color-plunged-into-darkness-100: #f3e4ff;
  --color-plunged-into-darkness-200: #e6ccf9;
  --color-plunged-into-darkness-300: #d1b3e7;
  --color-plunged-into-darkness-400: #b291ca;
  --color-plunged-into-darkness-500: #9574ad;
  --color-plunged-into-darkness-600: #79598f;
  --color-plunged-into-darkness-700: #5f4373;
  --color-plunged-into-darkness-800: #49315a;
  --color-plunged-into-darkness-900: #3b1c4e;
  --color-plunged-into-darkness-950: #21132b;
  --color-later-gator: #2d884e;
  --color-later-gator-50: #dfffe6;
  --color-later-gator-100: #c8fcd4;
  --color-later-gator-200: #aeecbe;
  --color-later-gator-300: #92d9a4;
  --color-later-gator-400: #6bbc82;
  --color-later-gator-500: #4ba267;
  --color-later-gator-600: #2d884e;
  --color-later-gator-700: #126e39;
  --color-later-gator-800: #005729;
  --color-later-gator-900: #00431e;
  --color-later-gator-950: #002a10;
  --color-mauve: #e7b6ff;
  --color-mauve-50: #fdf9ff;
  --color-mauve-100: #f9eeff;
  --color-mauve-200: #f1d5ff;
  --color-mauve-300: #e7b6ff;
  --color-mauve-400: #c396d9;
  --color-mauve-500: #a678bc;
  --color-mauve-600: #885c9d;
  --color-mauve-700: #6e4581;
  --color-mauve-800: #563267;
  --color-mauve-900: #422450;
  --color-mauve-950: #2a1434;
}