Ephemeral Red to Mauve Magic color palette

E2CCD5Ephemeral Red 698A7BAloe Vera 674B5BWine Stain 152D25Swamp Thing BD90AAMauve Magic

About this palette

Ephemeral Red to Mauve Magic is a 5-color muted, vintage palette: #E2CCD5 (Ephemeral Red), #698A7B (Aloe Vera), #674B5B (Wine Stain), #152D25 (Swamp Thing), #BD90AA (Mauve Magic). It mixes gray, turquoise, red, pink tones and feels warm overall. The strongest text pairing is #E2CCD5 on #152D25 with a contrast ratio of 9.65:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ephemeral Red	rgb(226, 204, 213)	hsl(335, 27%, 84%)
Aloe Vera	rgb(105, 138, 123)	hsl(153, 14%, 48%)
Wine Stain	rgb(103, 75, 91)	hsl(326, 16%, 35%)
Swamp Thing	rgb(21, 45, 37)	hsl(160, 36%, 13%)
Mauve Magic	rgb(189, 144, 170)	hsl(325, 25%, 65%)

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.65:1 Very good#E2CCD5 on #152D25
Aa9.65:1 Very good#152D25 on #E2CCD5
Aa5.39:1 Good#152D25 on #BD90AA
Aa5.39:1 Good#BD90AA on #152D25
Aa5.06:1 Good#E2CCD5 on #674B5B
Aa5.06:1 Good#674B5B on #E2CCD5
Aa3.85:1 Poor#698A7B on #152D25
Aa3.85:1 Poor#152D25 on #698A7B

Color blindness preview

CSS variables

/* Ephemeral Red to Mauve Magic — https://swatchly.xyz/palette/e2ccd5-698a7b-674b5b-152d25-bd90aa */
:root {
  --ephemeral-red: #e2ccd5;
  --aloe-vera: #698a7b;
  --wine-stain: #674b5b;
  --swamp-thing: #152d25;
  --mauve-magic: #bd90aa;
}

Tailwind CSS v4

/* Ephemeral Red to Mauve Magic — https://swatchly.xyz/palette/e2ccd5-698a7b-674b5b-152d25-bd90aa */
@theme {
  --color-ephemeral-red: #e2ccd5;
  --color-ephemeral-red-50: #fbeef3;
  --color-ephemeral-red-100: #f1e3e9;
  --color-ephemeral-red-200: #e2ccd5;
  --color-ephemeral-red-300: #cab7bf;
  --color-ephemeral-red-400: #ac98a1;
  --color-ephemeral-red-500: #927e86;
  --color-ephemeral-red-600: #77646c;
  --color-ephemeral-red-700: #604f56;
  --color-ephemeral-red-800: #4c3e44;
  --color-ephemeral-red-900: #3b2f34;
  --color-ephemeral-red-950: #251c20;
  --color-aloe-vera: #698a7b;
  --color-aloe-vera-50: #e6faf0;
  --color-aloe-vera-100: #d9f0e5;
  --color-aloe-vera-200: #c2dcd0;
  --color-aloe-vera-300: #a8c6b8;
  --color-aloe-vera-400: #85a697;
  --color-aloe-vera-500: #698a7b;
  --color-aloe-vera-600: #517062;
  --color-aloe-vera-700: #3d5a4d;
  --color-aloe-vera-800: #2e463c;
  --color-aloe-vera-900: #22372e;
  --color-aloe-vera-950: #13221c;
  --color-wine-stain: #674b5b;
  --color-wine-stain-50: #fff0f8;
  --color-wine-stain-100: #fae4f0;
  --color-wine-stain-200: #e8cfdd;
  --color-wine-stain-300: #d4b7c7;
  --color-wine-stain-400: #b697a8;
  --color-wine-stain-500: #9a7b8d;
  --color-wine-stain-600: #7e6172;
  --color-wine-stain-700: #674b5b;
  --color-wine-stain-800: #513a47;
  --color-wine-stain-900: #3f2c37;
  --color-wine-stain-950: #281a22;
  --color-swamp-thing: #152d25;
  --color-swamp-thing-50: #eaf9f3;
  --color-swamp-thing-100: #def0e9;
  --color-swamp-thing-200: #c8ddd5;
  --color-swamp-thing-300: #afc7be;
  --color-swamp-thing-400: #8ea89e;
  --color-swamp-thing-500: #748f85;
  --color-swamp-thing-600: #5c766c;
  --color-swamp-thing-700: #486057;
  --color-swamp-thing-800: #394e46;
  --color-swamp-thing-900: #2c3f38;
  --color-swamp-thing-950: #152d25;
  --color-mauve-magic: #bd90aa;
  --color-mauve-magic-50: #ffeff8;
  --color-mauve-magic-100: #ffe0f1;
  --color-mauve-magic-200: #eecade;
  --color-mauve-magic-300: #dab2c9;
  --color-mauve-magic-400: #bd90aa;
  --color-mauve-magic-500: #a1758f;
  --color-mauve-magic-600: #855c74;
  --color-mauve-magic-700: #6c475d;
  --color-mauve-magic-800: #563649;
  --color-mauve-magic-900: #442939;
  --color-mauve-magic-950: #2b1824;
}