Aubergine to Mermaid’s Kiss color palette

37212CAubergine 574683In the Vines E2EEBDMellow Mint 7A7198Purple Haze 5BC5AAMermaid’s Kiss

About this palette

Aubergine to Mermaid’s Kiss is a 5-color cool palette: #37212C (Aubergine), #574683 (In the Vines), #E2EEBD (Mellow Mint), #7A7198 (Purple Haze), #5BC5AA (Mermaid’s Kiss). It mixes red, purple, green, turquoise tones and feels cool overall. The strongest text pairing is #37212C on #E2EEBD with a contrast ratio of 12.14:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Aubergine	rgb(55, 33, 44)	hsl(330, 25%, 17%)
In the Vines	rgb(87, 70, 131)	hsl(257, 30%, 39%)
Mellow Mint	rgb(226, 238, 189)	hsl(75, 59%, 84%)
Purple Haze	rgb(122, 113, 152)	hsl(254, 16%, 52%)
Mermaid’s Kiss	rgb(91, 197, 170)	hsl(165, 48%, 56%)

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.

Aa12.14:1 Super#37212C on #E2EEBD
Aa12.14:1 Super#E2EEBD on #37212C
Aa7.07:1 Very good#37212C on #5BC5AA
Aa7.07:1 Very good#5BC5AA on #37212C
Aa6.59:1 Good#574683 on #E2EEBD
Aa6.59:1 Good#E2EEBD on #574683
Aa3.84:1 Poor#574683 on #5BC5AA
Aa3.84:1 Poor#5BC5AA on #574683

Color blindness preview

CSS variables

/* Aubergine to Mermaid’s Kiss — https://swatchly.xyz/palette/37212c-574683-e2eebd-7a7198-5bc5aa */
:root {
  --aubergine: #37212c;
  --in-the-vines: #574683;
  --mellow-mint: #e2eebd;
  --purple-haze: #7a7198;
  --mermaid-s-kiss: #5bc5aa;
}

Tailwind CSS v4

/* Aubergine to Mermaid’s Kiss — https://swatchly.xyz/palette/37212c-574683-e2eebd-7a7198-5bc5aa */
@theme {
  --color-aubergine: #37212c;
  --color-aubergine-50: #fff1f7;
  --color-aubergine-100: #f8e5ee;
  --color-aubergine-200: #e7d0db;
  --color-aubergine-300: #d2b9c4;
  --color-aubergine-400: #b297a3;
  --color-aubergine-500: #947986;
  --color-aubergine-600: #775e6a;
  --color-aubergine-700: #5d4751;
  --color-aubergine-800: #46333c;
  --color-aubergine-900: #37212c;
  --color-aubergine-950: #1e1419;
  --color-in-the-vines: #574683;
  --color-in-the-vines-50: #f5f3ff;
  --color-in-the-vines-100: #ece7ff;
  --color-in-the-vines-200: #d9cfff;
  --color-in-the-vines-300: #c3b6f2;
  --color-in-the-vines-400: #a494d5;
  --color-in-the-vines-500: #8878b9;
  --color-in-the-vines-600: #6e5d9b;
  --color-in-the-vines-700: #574683;
  --color-in-the-vines-800: #443667;
  --color-in-the-vines-900: #342952;
  --color-in-the-vines-950: #201835;
  --color-mellow-mint: #e2eebd;
  --color-mellow-mint-50: #eff6da;
  --color-mellow-mint-100: #e2eebd;
  --color-mellow-mint-200: #d0d9b5;
  --color-mellow-mint-300: #bac49b;
  --color-mellow-mint-400: #9ba679;
  --color-mellow-mint-500: #808b5e;
  --color-mellow-mint-600: #677145;
  --color-mellow-mint-700: #525a32;
  --color-mellow-mint-800: #3f4724;
  --color-mellow-mint-900: #303619;
  --color-mellow-mint-950: #1d220c;
  --color-purple-haze: #7a7198;
  --color-purple-haze-50: #f6f3ff;
  --color-purple-haze-100: #eeeaff;
  --color-purple-haze-200: #ddd7f6;
  --color-purple-haze-300: #c9c2e5;
  --color-purple-haze-400: #aca4cb;
  --color-purple-haze-500: #938ab2;
  --color-purple-haze-600: #7a7198;
  --color-purple-haze-700: #61597c;
  --color-purple-haze-800: #4c4464;
  --color-purple-haze-900: #3a334e;
  --color-purple-haze-950: #241f32;
  --color-mermaid-s-kiss: #5bc5aa;
  --color-mermaid-s-kiss-50: #ecfff9;
  --color-mermaid-s-kiss-100: #cefff0;
  --color-mermaid-s-kiss-200: #aef1dd;
  --color-mermaid-s-kiss-300: #8fdfc8;
  --color-mermaid-s-kiss-400: #5bc5aa;
  --color-mermaid-s-kiss-500: #39a68c;
  --color-mermaid-s-kiss-600: #018870;
  --color-mermaid-s-kiss-700: #006b58;
  --color-mermaid-s-kiss-800: #005343;
  --color-mermaid-s-kiss-900: #003f32;
  --color-mermaid-s-kiss-950: #00261e;
}