Mermaid’s Kiss to Pitch-Black Forests color palette

5DC49EMermaid’s Kiss 12A381Bejewelled CEFEEAMint Coffee 2B644DTerrestrial 0B3A26Pitch-Black Forests

About this palette

Mermaid’s Kiss to Pitch-Black Forests is a 5-color cool, monochromatic palette: #5DC49E (Mermaid’s Kiss), #12A381 (Bejewelled), #CEFEEA (Mint Coffee), #2B644D (Terrestrial), #0B3A26 (Pitch-Black Forests). It mixes turquoise, white, green tones and feels cool overall. The strongest text pairing is #CEFEEA on #0B3A26 with a contrast ratio of 11.53:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mermaid’s Kiss	rgb(93, 196, 158)	hsl(158, 47%, 57%)
Bejewelled	rgb(18, 163, 129)	hsl(166, 80%, 35%)
Mint Coffee	rgb(206, 254, 234)	hsl(155, 96%, 90%)
Terrestrial	rgb(43, 100, 77)	hsl(156, 40%, 28%)
Pitch-Black Forests	rgb(11, 58, 38)	hsl(154, 68%, 14%)

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.

Aa11.53:1 Very good#CEFEEA on #0B3A26
Aa11.53:1 Very good#0B3A26 on #CEFEEA
Aa6.26:1 Good#CEFEEA on #2B644D
Aa6.26:1 Good#2B644D on #CEFEEA
Aa5.98:1 Good#5DC49E on #0B3A26
Aa5.98:1 Good#0B3A26 on #5DC49E
Aa4.00:1 Poor#12A381 on #0B3A26
Aa4.00:1 Poor#0B3A26 on #12A381

Color blindness preview

CSS variables

/* Mermaid’s Kiss to Pitch-Black Forests — https://swatchly.xyz/palette/5dc49e-12a381-cefeea-2b644d-0b3a26 */
:root {
  --mermaid-s-kiss: #5dc49e;
  --bejewelled: #12a381;
  --mint-coffee: #cefeea;
  --terrestrial: #2b644d;
  --pitch-black-forests: #0b3a26;
}

Tailwind CSS v4

/* Mermaid’s Kiss to Pitch-Black Forests — https://swatchly.xyz/palette/5dc49e-12a381-cefeea-2b644d-0b3a26 */
@theme {
  --color-mermaid-s-kiss: #5dc49e;
  --color-mermaid-s-kiss-50: #ebfff6;
  --color-mermaid-s-kiss-100: #ccffe9;
  --color-mermaid-s-kiss-200: #aef1d5;
  --color-mermaid-s-kiss-300: #90debe;
  --color-mermaid-s-kiss-400: #5dc49e;
  --color-mermaid-s-kiss-500: #3ca581;
  --color-mermaid-s-kiss-600: #0d8765;
  --color-mermaid-s-kiss-700: #006b4f;
  --color-mermaid-s-kiss-800: #00533c;
  --color-mermaid-s-kiss-900: #003f2d;
  --color-mermaid-s-kiss-950: #00271a;
  --color-bejewelled: #12a381;
  --color-bejewelled-50: #defff2;
  --color-bejewelled-100: #bbfee6;
  --color-bejewelled-200: #9deed2;
  --color-bejewelled-300: #7bdbbb;
  --color-bejewelled-400: #4abe9c;
  --color-bejewelled-500: #12a381;
  --color-bejewelled-600: #008467;
  --color-bejewelled-700: #006951;
  --color-bejewelled-800: #00523f;
  --color-bejewelled-900: #003f30;
  --color-bejewelled-950: #00271d;
  --color-mint-coffee: #cefeea;
  --color-mint-coffee-50: #cefeea;
  --color-mint-coffee-100: #d2f0e3;
  --color-mint-coffee-200: #bbded0;
  --color-mint-coffee-300: #a2cab9;
  --color-mint-coffee-400: #80ac9a;
  --color-mint-coffee-500: #64917f;
  --color-mint-coffee-600: #4b7666;
  --color-mint-coffee-700: #375f50;
  --color-mint-coffee-800: #284a3d;
  --color-mint-coffee-900: #1c3a2f;
  --color-mint-coffee-950: #0f241c;
  --color-terrestrial: #2b644d;
  --color-terrestrial-50: #defeee;
  --color-terrestrial-100: #d1f5e4;
  --color-terrestrial-200: #b9e4cf;
  --color-terrestrial-300: #9ecfb8;
  --color-terrestrial-400: #7ab198;
  --color-terrestrial-500: #5d967d;
  --color-terrestrial-600: #437b63;
  --color-terrestrial-700: #2b644d;
  --color-terrestrial-800: #204e3c;
  --color-terrestrial-900: #153d2d;
  --color-terrestrial-950: #09261b;
  --color-pitch-black-forests: #0b3a26;
  --color-pitch-black-forests-50: #e3fdee;
  --color-pitch-black-forests-100: #d6f4e3;
  --color-pitch-black-forests-200: #bee1ce;
  --color-pitch-black-forests-300: #a4ccb6;
  --color-pitch-black-forests-400: #81ad95;
  --color-pitch-black-forests-500: #649179;
  --color-pitch-black-forests-600: #4a765f;
  --color-pitch-black-forests-700: #365e49;
  --color-pitch-black-forests-800: #264937;
  --color-pitch-black-forests-900: #0b3a26;
  --color-pitch-black-forests-950: #0d2318;
}