Water Nymph to Darkest Forest color palette

8DD0DCWater Nymph D58CACKiss 4F8D67Illuminati Green 84506AVelour Scar 24391EDarkest Forest

About this palette

Water Nymph to Darkest Forest is a 5-color cool, vintage palette: #8DD0DC (Water Nymph), #D58CAC (Kiss), #4F8D67 (Illuminati Green), #84506A (Velour Scar), #24391E (Darkest Forest). It mixes turquoise, pink, green, red tones and feels cool overall. The strongest text pairing is #8DD0DC on #24391E with a contrast ratio of 7.26:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Water Nymph	rgb(141, 208, 220)	hsl(189, 53%, 71%)
Kiss	rgb(213, 140, 172)	hsl(334, 46%, 69%)
Illuminati Green	rgb(79, 141, 103)	hsl(143, 28%, 43%)
Velour Scar	rgb(132, 80, 106)	hsl(330, 25%, 42%)
Darkest Forest	rgb(36, 57, 30)	hsl(107, 31%, 17%)

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.

Aa7.26:1 Very good#8DD0DC on #24391E
Aa7.26:1 Very good#24391E on #8DD0DC
Aa4.87:1 Good#D58CAC on #24391E
Aa4.87:1 Good#24391E on #D58CAC
Aa3.65:1 Poor#8DD0DC on #84506A
Aa3.65:1 Poor#84506A on #8DD0DC
Aa3.18:1 Poor#4F8D67 on #24391E
Aa3.18:1 Poor#24391E on #4F8D67

Color blindness preview

CSS variables

/* Water Nymph to Darkest Forest — https://swatchly.xyz/palette/8dd0dc-d58cac-4f8d67-84506a-24391e */
:root {
  --water-nymph: #8dd0dc;
  --kiss: #d58cac;
  --illuminati-green: #4f8d67;
  --velour-scar: #84506a;
  --darkest-forest: #24391e;
}

Tailwind CSS v4

/* Water Nymph to Darkest Forest — https://swatchly.xyz/palette/8dd0dc-d58cac-4f8d67-84506a-24391e */
@theme {
  --color-water-nymph: #8dd0dc;
  --color-water-nymph-50: #e5fbff;
  --color-water-nymph-100: #cdf5fc;
  --color-water-nymph-200: #b3e3ec;
  --color-water-nymph-300: #8dd0dc;
  --color-water-nymph-400: #70afba;
  --color-water-nymph-500: #51939f;
  --color-water-nymph-600: #367883;
  --color-water-nymph-700: #21606a;
  --color-water-nymph-800: #114b54;
  --color-water-nymph-900: #073a41;
  --color-water-nymph-950: #02242a;
  --color-kiss: #d58cac;
  --color-kiss-50: #fff3f7;
  --color-kiss-100: #ffe5ef;
  --color-kiss-200: #ffc9df;
  --color-kiss-300: #efafca;
  --color-kiss-400: #d58cac;
  --color-kiss-500: #b67090;
  --color-kiss-600: #985674;
  --color-kiss-700: #7d405c;
  --color-kiss-800: #642f48;
  --color-kiss-900: #4e2237;
  --color-kiss-950: #321322;
  --color-illuminati-green: #4f8d67;
  --color-illuminati-green-50: #dafee6;
  --color-illuminati-green-100: #cbf4d8;
  --color-illuminati-green-200: #b0e0c0;
  --color-illuminati-green-300: #93caa6;
  --color-illuminati-green-400: #6daa83;
  --color-illuminati-green-500: #4f8d67;
  --color-illuminati-green-600: #377350;
  --color-illuminati-green-700: #255d3d;
  --color-illuminati-green-800: #18492e;
  --color-illuminati-green-900: #0f3a22;
  --color-illuminati-green-950: #062514;
  --color-velour-scar: #84506a;
  --color-velour-scar-50: #fff1f7;
  --color-velour-scar-100: #ffdfee;
  --color-velour-scar-200: #f3c5da;
  --color-velour-scar-300: #deabc3;
  --color-velour-scar-400: #bf88a3;
  --color-velour-scar-500: #a26b86;
  --color-velour-scar-600: #84506a;
  --color-velour-scar-700: #6a3e54;
  --color-velour-scar-800: #552f42;
  --color-velour-scar-900: #432333;
  --color-velour-scar-950: #2b1420;
  --color-darkest-forest: #24391e;
  --color-darkest-forest-50: #ecfae8;
  --color-darkest-forest-100: #e0f1dc;
  --color-darkest-forest-200: #cbdec5;
  --color-darkest-forest-300: #b2c9ac;
  --color-darkest-forest-400: #92aa8b;
  --color-darkest-forest-500: #768e6f;
  --color-darkest-forest-600: #5c7356;
  --color-darkest-forest-700: #475c41;
  --color-darkest-forest-800: #364831;
  --color-darkest-forest-900: #24391e;
  --color-darkest-forest-950: #182314;
}