Mermaid’s Kiss to Mystery Mint color palette

5CC9A9Mermaid’s Kiss 321923Black Cherry 6C2A59Pretty in Prune A15B7DFeminism B1F5D9Mystery Mint

About this palette

Mermaid’s Kiss to Mystery Mint is a 5-color warm, vintage palette: #5CC9A9 (Mermaid’s Kiss), #321923 (Black Cherry), #6C2A59 (Pretty in Prune), #A15B7D (Feminism), #B1F5D9 (Mystery Mint). It mixes turquoise, red tones and feels warm overall. The strongest text pairing is #321923 on #B1F5D9 with a contrast ratio of 13.04:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mermaid’s Kiss	rgb(92, 201, 169)	hsl(162, 50%, 57%)
Black Cherry	rgb(50, 25, 35)	hsl(336, 33%, 15%)
Pretty in Prune	rgb(108, 42, 89)	hsl(317, 44%, 29%)
Feminism	rgb(161, 91, 125)	hsl(331, 28%, 49%)
Mystery Mint	rgb(177, 245, 217)	hsl(155, 77%, 83%)

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.

Aa13.04:1 Super#321923 on #B1F5D9
Aa13.04:1 Super#B1F5D9 on #321923
Aa8.01:1 Very good#6C2A59 on #B1F5D9
Aa8.01:1 Very good#B1F5D9 on #6C2A59
Aa7.99:1 Very good#5CC9A9 on #321923
Aa7.99:1 Very good#321923 on #5CC9A9
Aa4.91:1 Good#5CC9A9 on #6C2A59
Aa4.91:1 Good#6C2A59 on #5CC9A9

Color blindness preview

CSS variables

/* Mermaid’s Kiss to Mystery Mint — https://swatchly.xyz/palette/5cc9a9-321923-6c2a59-a15b7d-b1f5d9 */
:root {
  --mermaid-s-kiss: #5cc9a9;
  --black-cherry: #321923;
  --pretty-in-prune: #6c2a59;
  --feminism: #a15b7d;
  --mystery-mint: #b1f5d9;
}

Tailwind CSS v4

/* Mermaid’s Kiss to Mystery Mint — https://swatchly.xyz/palette/5cc9a9-321923-6c2a59-a15b7d-b1f5d9 */
@theme {
  --color-mermaid-s-kiss: #5cc9a9;
  --color-mermaid-s-kiss-50: #c0fde8;
  --color-mermaid-s-kiss-100: #adf2da;
  --color-mermaid-s-kiss-200: #8bdec3;
  --color-mermaid-s-kiss-300: #5cc9a9;
  --color-mermaid-s-kiss-400: #3dab8d;
  --color-mermaid-s-kiss-500: #119274;
  --color-mermaid-s-kiss-600: #00775e;
  --color-mermaid-s-kiss-700: #00604b;
  --color-mermaid-s-kiss-800: #004c3b;
  --color-mermaid-s-kiss-900: #003d2f;
  --color-mermaid-s-kiss-950: #00261c;
  --color-black-cherry: #321923;
  --color-black-cherry-50: #fff1f6;
  --color-black-cherry-100: #fbe4ec;
  --color-black-cherry-200: #eacfd8;
  --color-black-cherry-300: #d5b8c2;
  --color-black-cherry-400: #b797a3;
  --color-black-cherry-500: #9c7d88;
  --color-black-cherry-600: #81636e;
  --color-black-cherry-700: #694e58;
  --color-black-cherry-800: #553d45;
  --color-black-cherry-900: #432f36;
  --color-black-cherry-950: #321923;
  --color-pretty-in-prune: #6c2a59;
  --color-pretty-in-prune-50: #fff0f9;
  --color-pretty-in-prune-100: #ffe1f4;
  --color-pretty-in-prune-200: #fec3e9;
  --color-pretty-in-prune-300: #ecaad5;
  --color-pretty-in-prune-400: #d088b8;
  --color-pretty-in-prune-500: #b56d9d;
  --color-pretty-in-prune-600: #995383;
  --color-pretty-in-prune-700: #7f3f6b;
  --color-pretty-in-prune-800: #6c2a59;
  --color-pretty-in-prune-900: #522244;
  --color-pretty-in-prune-950: #36132c;
  --color-feminism: #a15b7d;
  --color-feminism-50: #fff1f7;
  --color-feminism-100: #ffe5f0;
  --color-feminism-200: #ffc9e1;
  --color-feminism-300: #f1b0cd;
  --color-feminism-400: #d68fb0;
  --color-feminism-500: #bc7496;
  --color-feminism-600: #a15b7d;
  --color-feminism-700: #844464;
  --color-feminism-800: #6a324e;
  --color-feminism-900: #54243c;
  --color-feminism-950: #361426;
  --color-mystery-mint: #b1f5d9;
  --color-mystery-mint-50: #d2f9e8;
  --color-mystery-mint-100: #b1f5d9;
  --color-mystery-mint-200: #acdfc9;
  --color-mystery-mint-300: #91cbb3;
  --color-mystery-mint-400: #6ead94;
  --color-mystery-mint-500: #52937a;
  --color-mystery-mint-600: #387961;
  --color-mystery-mint-700: #25624d;
  --color-mystery-mint-800: #164d3b;
  --color-mystery-mint-900: #0c3c2d;
  --color-mystery-mint-950: #04261b;
}