Sea Foam to Pitch-Black Forests Color Palette

About this palette

Sea Foam to Pitch-Black Forests is a 5-color cool, vintage palette: #84DFD6 (Sea Foam), #CE7887 (First Love), #9A545F (Cherry Berry), #005950 (Cape Verde), #00312A (Pitch-Black Forests). It mixes turquoise, red tones and feels cool overall. The strongest text pairing is #84DFD6 on #00312A with a contrast ratio of 9.17:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sea Foam	rgb(132, 223, 214)	hsl(174, 59%, 70%)
First Love	rgb(206, 120, 135)	hsl(350, 47%, 64%)
Cherry Berry	rgb(154, 84, 95)	hsl(351, 29%, 47%)
Cape Verde	rgb(0, 89, 80)	hsl(174, 100%, 17%)
Pitch-Black Forests	rgb(0, 49, 42)	hsl(171, 100%, 10%)

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.17:1 Very good#84DFD6 on #00312A
Aa9.17:1 Very good#00312A on #84DFD6
Aa5.31:1 Good#84DFD6 on #005950
Aa5.31:1 Good#005950 on #84DFD6
Aa4.52:1 Good#CE7887 on #00312A
Aa4.52:1 Good#00312A on #CE7887
Aa3.55:1 Poor#84DFD6 on #9A545F
Aa3.55:1 Poor#9A545F on #84DFD6

Color blindness preview

CSS variables

/* Sea Foam to Pitch-Black Forests — https://swatchly.xyz/palette/84dfd6-ce7887-9a545f-005950-00312a */
:root {
  --sea-foam: #84dfd6;
  --first-love: #ce7887;
  --cherry-berry: #9a545f;
  --cape-verde: #005950;
  --pitch-black-forests: #00312a;
}

Tailwind CSS v4

/* Sea Foam to Pitch-Black Forests — https://swatchly.xyz/palette/84dfd6-ce7887-9a545f-005950-00312a */
@theme {
  --color-sea-foam: #84dfd6;
  --color-sea-foam-50: #eefffd;
  --color-sea-foam-100: #cefef9;
  --color-sea-foam-200: #b3efe8;
  --color-sea-foam-300: #84dfd6;
  --color-sea-foam-400: #68bcb4;
  --color-sea-foam-500: #429e96;
  --color-sea-foam-600: #1d817a;
  --color-sea-foam-700: #006760;
  --color-sea-foam-800: #004f4a;
  --color-sea-foam-900: #003c38;
  --color-sea-foam-950: #002623;
  --color-first-love: #ce7887;
  --color-first-love-50: #ffebed;
  --color-first-love-100: #ffdadf;
  --color-first-love-200: #ffb9c3;
  --color-first-love-300: #ed9ca9;
  --color-first-love-400: #ce7887;
  --color-first-love-500: #b25f6e;
  --color-first-love-600: #964857;
  --color-first-love-700: #7c3644;
  --color-first-love-800: #652835;
  --color-first-love-900: #511d28;
  --color-first-love-950: #371019;
  --color-cherry-berry: #9a545f;
  --color-cherry-berry-50: #fff1f3;
  --color-cherry-berry-100: #ffe3e6;
  --color-cherry-berry-200: #ffc7cd;
  --color-cherry-berry-300: #f0acb5;
  --color-cherry-berry-400: #d38a94;
  --color-cherry-berry-500: #b76e79;
  --color-cherry-berry-600: #9a545f;
  --color-cherry-berry-700: #7e404a;
  --color-cherry-berry-800: #652f38;
  --color-cherry-berry-900: #50222a;
  --color-cherry-berry-950: #341319;
  --color-cape-verde: #005950;
  --color-cape-verde-50: #d8fff8;
  --color-cape-verde-100: #caf6ee;
  --color-cape-verde-200: #ade2d9;
  --color-cape-verde-300: #8ecbc1;
  --color-cape-verde-400: #66aba1;
  --color-cape-verde-500: #468e84;
  --color-cape-verde-600: #2b7168;
  --color-cape-verde-700: #005950;
  --color-cape-verde-800: #08453e;
  --color-cape-verde-900: #023530;
  --color-cape-verde-950: #00211d;
  --color-pitch-black-forests: #00312a;
  --color-pitch-black-forests-50: #e2fcf6;
  --color-pitch-black-forests-100: #d6f3ec;
  --color-pitch-black-forests-200: #bee0d8;
  --color-pitch-black-forests-300: #a3cbc2;
  --color-pitch-black-forests-400: #7eaaa1;
  --color-pitch-black-forests-500: #608d83;
  --color-pitch-black-forests-600: #457067;
  --color-pitch-black-forests-700: #30564f;
  --color-pitch-black-forests-800: #20413b;
  --color-pitch-black-forests-900: #00312a;
  --color-pitch-black-forests-950: #091b18;
}