Peekaboo to Marshland Color Palette

About this palette

Peekaboo to Marshland is a 5-color muted, gradient palette: #E7DEE9 (Peekaboo), #9EBBCA (Gentle Sky), #768465 (Wreath), #714F48 (Bigfoot), #293026 (Marshland). It mixes gray, blue, green, red tones and feels cool overall. The strongest text pairing is #E7DEE9 on #293026 with a contrast ratio of 10.37:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Peekaboo	rgb(231, 222, 233)	hsl(289, 20%, 89%)
Gentle Sky	rgb(158, 187, 202)	hsl(200, 29%, 71%)
Wreath	rgb(118, 132, 101)	hsl(87, 13%, 46%)
Bigfoot	rgb(113, 79, 72)	hsl(10, 22%, 36%)
Marshland	rgb(41, 48, 38)	hsl(102, 12%, 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.

Aa10.37:1 Very good#E7DEE9 on #293026
Aa10.37:1 Very good#293026 on #E7DEE9
Aa6.74:1 Good#9EBBCA on #293026
Aa6.74:1 Good#293026 on #9EBBCA
Aa5.50:1 Good#E7DEE9 on #714F48
Aa5.50:1 Good#714F48 on #E7DEE9
Aa3.57:1 Poor#9EBBCA on #714F48
Aa3.57:1 Poor#714F48 on #9EBBCA

Color blindness preview

CSS variables

/* Peekaboo to Marshland — https://swatchly.xyz/palette/e7dee9-9ebbca-768465-714f48-293026 */
:root {
  --peekaboo: #e7dee9;
  --gentle-sky: #9ebbca;
  --wreath: #768465;
  --bigfoot: #714f48;
  --marshland: #293026;
}

Tailwind CSS v4

/* Peekaboo to Marshland — https://swatchly.xyz/palette/e7dee9-9ebbca-768465-714f48-293026 */
@theme {
  --color-peekaboo: #e7dee9;
  --color-peekaboo-50: #f0ebf2;
  --color-peekaboo-100: #e7dee9;
  --color-peekaboo-200: #d4cdd5;
  --color-peekaboo-300: #bfb8c1;
  --color-peekaboo-400: #a29aa4;
  --color-peekaboo-500: #88808a;
  --color-peekaboo-600: #6f6771;
  --color-peekaboo-700: #59525b;
  --color-peekaboo-800: #464047;
  --color-peekaboo-900: #363137;
  --color-peekaboo-950: #211e22;
  --color-gentle-sky: #9ebbca;
  --color-gentle-sky-50: #e1f3fc;
  --color-gentle-sky-100: #d3e7f2;
  --color-gentle-sky-200: #bbd2de;
  --color-gentle-sky-300: #9ebbca;
  --color-gentle-sky-400: #829dac;
  --color-gentle-sky-500: #688492;
  --color-gentle-sky-600: #516b78;
  --color-gentle-sky-700: #3e5662;
  --color-gentle-sky-800: #2f444f;
  --color-gentle-sky-900: #24363f;
  --color-gentle-sky-950: #142128;
  --color-wreath: #768465;
  --color-wreath-50: #eef7e4;
  --color-wreath-100: #e2edd7;
  --color-wreath-200: #ccd8be;
  --color-wreath-300: #b3c1a4;
  --color-wreath-400: #92a181;
  --color-wreath-500: #768465;
  --color-wreath-600: #5e6b4e;
  --color-wreath-700: #49553b;
  --color-wreath-800: #39432c;
  --color-wreath-900: #2c3421;
  --color-wreath-950: #1b2113;
  --color-bigfoot: #714f48;
  --color-bigfoot-50: #fff2ef;
  --color-bigfoot-100: #fee5df;
  --color-bigfoot-200: #efd0ca;
  --color-bigfoot-300: #dbb9b2;
  --color-bigfoot-400: #be9a92;
  --color-bigfoot-500: #a37f77;
  --color-bigfoot-600: #88655e;
  --color-bigfoot-700: #714f48;
  --color-bigfoot-800: #593d37;
  --color-bigfoot-900: #462e29;
  --color-bigfoot-950: #2d1c18;
  --color-marshland: #293026;
  --color-marshland-50: #f2f7f0;
  --color-marshland-100: #e7ede5;
  --color-marshland-200: #d3dad0;
  --color-marshland-300: #bcc4b9;
  --color-marshland-400: #9ba398;
  --color-marshland-500: #7f877b;
  --color-marshland-600: #646c60;
  --color-marshland-700: #4d544a;
  --color-marshland-800: #3a4037;
  --color-marshland-900: #293026;
  --color-marshland-950: #191c17;
}