Promenade to Deep Forest Color Palette

About this palette

Promenade to Deep Forest is a 4-color muted, gradient palette: #F6F7DD (Promenade), #B9C39A (Beige and Sage), #677C6C (Ecological), #354740 (Deep Forest). It mixes white, green, gray tones and feels cool overall. The strongest text pairing is #F6F7DD on #354740 with a contrast ratio of 9.06:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Promenade	rgb(246, 247, 221)	hsl(62, 62%, 92%)
Beige and Sage	rgb(185, 195, 154)	hsl(75, 25%, 68%)
Ecological	rgb(103, 124, 108)	hsl(134, 9%, 45%)
Deep Forest	rgb(53, 71, 64)	hsl(157, 15%, 24%)

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.06:1 Very good#F6F7DD on #354740
Aa9.06:1 Very good#354740 on #F6F7DD
Aa5.33:1 Good#B9C39A on #354740
Aa5.33:1 Good#354740 on #B9C39A
Aa4.12:1 Poor#F6F7DD on #677C6C
Aa4.12:1 Poor#677C6C on #F6F7DD

Color blindness preview

CSS variables

/* Promenade to Deep Forest — https://swatchly.xyz/palette/f6f7dd-b9c39a-677c6c-354740 */
:root {
  --promenade: #f6f7dd;
  --beige-and-sage: #b9c39a;
  --ecological: #677c6c;
  --deep-forest: #354740;
}

Tailwind CSS v4

/* Promenade to Deep Forest — https://swatchly.xyz/palette/f6f7dd-b9c39a-677c6c-354740 */
@theme {
  --color-promenade: #f6f7dd;
  --color-promenade-50: #f6f7dd;
  --color-promenade-100: #ebecdc;
  --color-promenade-200: #d8d9c6;
  --color-promenade-300: #c2c3ad;
  --color-promenade-400: #a3a38c;
  --color-promenade-500: #878871;
  --color-promenade-600: #6d6e57;
  --color-promenade-700: #565743;
  --color-promenade-800: #434432;
  --color-promenade-900: #343425;
  --color-promenade-950: #202015;
  --color-beige-and-sage: #b9c39a;
  --color-beige-and-sage-50: #f1f7df;
  --color-beige-and-sage-100: #e6edd2;
  --color-beige-and-sage-200: #d1d9b9;
  --color-beige-and-sage-300: #b9c39a;
  --color-beige-and-sage-400: #9ba47d;
  --color-beige-and-sage-500: #808962;
  --color-beige-and-sage-600: #676f4a;
  --color-beige-and-sage-700: #515837;
  --color-beige-and-sage-800: #3f4628;
  --color-beige-and-sage-900: #30361d;
  --color-beige-and-sage-950: #1e210f;
  --color-ecological: #677c6c;
  --color-ecological-50: #ecf9ef;
  --color-ecological-100: #e3f1e6;
  --color-ecological-200: #d0e0d3;
  --color-ecological-300: #b9ccbe;
  --color-ecological-400: #9aaf9f;
  --color-ecological-500: #809585;
  --color-ecological-600: #677c6c;
  --color-ecological-700: #506354;
  --color-ecological-800: #3c4d41;
  --color-ecological-900: #2d3b31;
  --color-ecological-950: #1b251d;
  --color-deep-forest: #354740;
  --color-deep-forest-50: #edf8f3;
  --color-deep-forest-100: #e1efe9;
  --color-deep-forest-200: #ccdcd5;
  --color-deep-forest-300: #b4c6be;
  --color-deep-forest-400: #93a79f;
  --color-deep-forest-500: #788b83;
  --color-deep-forest-600: #5e7169;
  --color-deep-forest-700: #495a53;
  --color-deep-forest-800: #354740;
  --color-deep-forest-900: #293631;
  --color-deep-forest-950: #18221e;
}