Veiling Waterfalls to Darkest Forest color palette

C8E8FFVeiling Waterfalls 884200Otterly Brown 88B38AVerde 8C698CSunshone Plum 213220Darkest Forest

About this palette

Veiling Waterfalls to Darkest Forest is a 5-color cool, earthy palette: #C8E8FF (Veiling Waterfalls), #884200 (Otterly Brown), #88B38A (Verde), #8C698C (Sunshone Plum), #213220 (Darkest Forest). It mixes blue, brown, green, pink tones and feels cool overall. The strongest text pairing is #C8E8FF on #213220 with a contrast ratio of 10.66:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Veiling Waterfalls	rgb(200, 232, 255)	hsl(205, 100%, 89%)
Otterly Brown	rgb(136, 66, 0)	hsl(29, 100%, 27%)
Verde	rgb(136, 179, 138)	hsl(123, 22%, 62%)
Sunshone Plum	rgb(140, 105, 140)	hsl(300, 14%, 48%)
Darkest Forest	rgb(33, 50, 32)	hsl(117, 22%, 16%)

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.

Aa10.66:1 Very good#C8E8FF on #213220
Aa10.66:1 Very good#213220 on #C8E8FF
Aa5.82:1 Good#C8E8FF on #884200
Aa5.82:1 Good#884200 on #C8E8FF
Aa5.75:1 Good#88B38A on #213220
Aa5.75:1 Good#213220 on #88B38A
Aa3.64:1 Poor#C8E8FF on #8C698C
Aa3.64:1 Poor#8C698C on #C8E8FF

Color blindness preview

CSS variables

/* Veiling Waterfalls to Darkest Forest — https://swatchly.xyz/palette/c8e8ff-884200-88b38a-8c698c-213220 */
:root {
  --veiling-waterfalls: #c8e8ff;
  --otterly-brown: #884200;
  --verde: #88b38a;
  --sunshone-plum: #8c698c;
  --darkest-forest: #213220;
}

Tailwind CSS v4

/* Veiling Waterfalls to Darkest Forest — https://swatchly.xyz/palette/c8e8ff-884200-88b38a-8c698c-213220 */
@theme {
  --color-veiling-waterfalls: #c8e8ff;
  --color-veiling-waterfalls-50: #def1ff;
  --color-veiling-waterfalls-100: #c8e8ff;
  --color-veiling-waterfalls-200: #bcd5e6;
  --color-veiling-waterfalls-300: #a5c0d3;
  --color-veiling-waterfalls-400: #85a2b7;
  --color-veiling-waterfalls-500: #6b889d;
  --color-veiling-waterfalls-600: #526f82;
  --color-veiling-waterfalls-700: #3f596b;
  --color-veiling-waterfalls-800: #2f4555;
  --color-veiling-waterfalls-900: #223543;
  --color-veiling-waterfalls-950: #13212b;
  --color-otterly-brown: #884200;
  --color-otterly-brown-50: #fff2eb;
  --color-otterly-brown-100: #ffe6d6;
  --color-otterly-brown-200: #ffccac;
  --color-otterly-brown-300: #f5b185;
  --color-otterly-brown-400: #d98f5e;
  --color-otterly-brown-500: #be733f;
  --color-otterly-brown-600: #a05924;
  --color-otterly-brown-700: #884200;
  --color-otterly-brown-800: #6b3300;
  --color-otterly-brown-900: #542600;
  --color-otterly-brown-950: #361600;
  --color-verde: #88b38a;
  --color-verde-50: #e6ffe7;
  --color-verde-100: #dbf6dc;
  --color-verde-200: #c5e5c6;
  --color-verde-300: #acd0ad;
  --color-verde-400: #88b38a;
  --color-verde-500: #6c966f;
  --color-verde-600: #527a54;
  --color-verde-700: #3d623f;
  --color-verde-800: #2c4d2f;
  --color-verde-900: #1f3b22;
  --color-verde-950: #112513;
  --color-sunshone-plum: #8c698c;
  --color-sunshone-plum-50: #ffefff;
  --color-sunshone-plum-100: #fce4fc;
  --color-sunshone-plum-200: #edd1ed;
  --color-sunshone-plum-300: #dbbbda;
  --color-sunshone-plum-400: #bf9cbf;
  --color-sunshone-plum-500: #a682a6;
  --color-sunshone-plum-600: #8c698c;
  --color-sunshone-plum-700: #715171;
  --color-sunshone-plum-800: #5a3e5a;
  --color-sunshone-plum-900: #462e46;
  --color-sunshone-plum-950: #2c1b2d;
  --color-darkest-forest: #213220;
  --color-darkest-forest-50: #edf9ec;
  --color-darkest-forest-100: #e2f0e1;
  --color-darkest-forest-200: #cdddcc;
  --color-darkest-forest-300: #b5c7b3;
  --color-darkest-forest-400: #93a791;
  --color-darkest-forest-500: #768a75;
  --color-darkest-forest-600: #5c6e5a;
  --color-darkest-forest-700: #465644;
  --color-darkest-forest-800: #334232;
  --color-darkest-forest-900: #213220;
  --color-darkest-forest-950: #151d15;
}