Start generating

Mauvelous to Aloe Vera color palette

D2B2BAMauvelous3E6D67Moonlit Forest87A49CJapanese BonsaiF1D7DBSummer Crush4E343CVibrant Vine618579Aloe Vera
Open in generator Export PNG, PDF, ASE…

About this palette

Mauvelous to Aloe Vera is a 6-color muted palette: #D2B2BA (Mauvelous), #3E6D67 (Moonlit Forest), #87A49C (Japanese Bonsai), #F1D7DB (Summer Crush), #4E343C (Vibrant Vine), #618579 (Aloe Vera). It mixes pink, turquoise, gray, red tones and feels balanced overall. The strongest text pairing is #F1D7DB on #4E343C with a contrast ratio of 8.23:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Mauvelousrgb(210, 178, 186)hsl(345, 26%, 76%)
Moonlit Forestrgb(62, 109, 103)hsl(172, 27%, 34%)
Japanese Bonsairgb(135, 164, 156)hsl(163, 14%, 59%)
Summer Crushrgb(241, 215, 219)hsl(351, 48%, 89%)
Vibrant Vinergb(78, 52, 60)hsl(342, 20%, 25%)
Aloe Verargb(97, 133, 121)hsl(160, 16%, 45%)

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.23:1 Very good#F1D7DB on #4E343C
  • Aa8.23:1 Very good#4E343C on #F1D7DB
  • Aa5.75:1 Good#D2B2BA on #4E343C
  • Aa5.75:1 Good#4E343C on #D2B2BA
  • Aa4.32:1 Poor#3E6D67 on #F1D7DB
  • Aa4.32:1 Poor#F1D7DB on #3E6D67
  • Aa4.16:1 Poor#87A49C on #4E343C
  • Aa4.16:1 Poor#4E343C on #87A49C

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Mauvelous to Aloe Vera — https://swatchly.xyz/palette/d2b2ba-3e6d67-87a49c-f1d7db-4e343c-618579 */
:root {
  --mauvelous: #d2b2ba;
  --moonlit-forest: #3e6d67;
  --japanese-bonsai: #87a49c;
  --summer-crush: #f1d7db;
  --vibrant-vine: #4e343c;
  --aloe-vera: #618579;
}

Tailwind CSS v4

/* Mauvelous to Aloe Vera — https://swatchly.xyz/palette/d2b2ba-3e6d67-87a49c-f1d7db-4e343c-618579 */
@theme {
  --color-mauvelous: #d2b2ba;
  --color-mauvelous-50: #ffedf1;
  --color-mauvelous-100: #f7e1e6;
  --color-mauvelous-200: #e5ccd2;
  --color-mauvelous-300: #d2b2ba;
  --color-mauvelous-400: #b2949c;
  --color-mauvelous-500: #977a81;
  --color-mauvelous-600: #7d6168;
  --color-mauvelous-700: #654c52;
  --color-mauvelous-800: #513b40;
  --color-mauvelous-900: #3f2d32;
  --color-mauvelous-950: #281b1f;
  --color-moonlit-forest: #3e6d67;
  --color-moonlit-forest-50: #e1fcf8;
  --color-moonlit-forest-100: #d2f1ec;
  --color-moonlit-forest-200: #b8ddd8;
  --color-moonlit-forest-300: #9bc6c0;
  --color-moonlit-forest-400: #77a69f;
  --color-moonlit-forest-500: #5a8983;
  --color-moonlit-forest-600: #3e6d67;
  --color-moonlit-forest-700: #2e5752;
  --color-moonlit-forest-800: #204440;
  --color-moonlit-forest-900: #163531;
  --color-moonlit-forest-950: #0b211f;
  --color-japanese-bonsai: #87a49c;
  --color-japanese-bonsai-50: #e7f8f3;
  --color-japanese-bonsai-100: #daeee8;
  --color-japanese-bonsai-200: #c3dad3;
  --color-japanese-bonsai-300: #aac3bc;
  --color-japanese-bonsai-400: #87a49c;
  --color-japanese-bonsai-500: #6d8982;
  --color-japanese-bonsai-600: #556f68;
  --color-japanese-bonsai-700: #415953;
  --color-japanese-bonsai-800: #314641;
  --color-japanese-bonsai-900: #243732;
  --color-japanese-bonsai-950: #15221f;
  --color-summer-crush: #f1d7db;
  --color-summer-crush-50: #fff8f9;
  --color-summer-crush-100: #fcedef;
  --color-summer-crush-200: #f1d7db;
  --color-summer-crush-300: #d6c1c4;
  --color-summer-crush-400: #b69fa3;
  --color-summer-crush-500: #9a8286;
  --color-summer-crush-600: #7d676b;
  --color-summer-crush-700: #645054;
  --color-summer-crush-800: #4e3d40;
  --color-summer-crush-900: #3d2e31;
  --color-summer-crush-950: #271c1e;
  --color-vibrant-vine: #4e343c;
  --color-vibrant-vine-50: #fff1f5;
  --color-vibrant-vine-100: #fae5eb;
  --color-vibrant-vine-200: #e9d0d7;
  --color-vibrant-vine-300: #d3b7bf;
  --color-vibrant-vine-400: #b4969e;
  --color-vibrant-vine-500: #987982;
  --color-vibrant-vine-600: #7b5f67;
  --color-vibrant-vine-700: #614850;
  --color-vibrant-vine-800: #4e343c;
  --color-vibrant-vine-900: #3a292e;
  --color-vibrant-vine-950: #24181c;
  --color-aloe-vera: #618579;
  --color-aloe-vera-50: #e3f9f1;
  --color-aloe-vera-100: #d5eee5;
  --color-aloe-vera-200: #bcdacf;
  --color-aloe-vera-300: #a1c2b7;
  --color-aloe-vera-400: #7ea296;
  --color-aloe-vera-500: #618579;
  --color-aloe-vera-600: #4a6c61;
  --color-aloe-vera-700: #38564d;
  --color-aloe-vera-800: #29443c;
  --color-aloe-vera-900: #1e352e;
  --color-aloe-vera-950: #11221d;
}

Similar palettes