Darkest Forest to Chantilly Color Palette

About this palette

Darkest Forest to Chantilly is a 5-color muted, cool, vintage palette: #26371A (Darkest Forest), #374A5C (Silent Sea), #6C7959 (Dill), #D38F96 (Rosetti), #E8B7C5 (Chantilly). It mixes green, blue, red, pink tones and feels cool overall. The strongest text pairing is #26371A on #E8B7C5 with a contrast ratio of 7.31:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Darkest Forest	rgb(38, 55, 26)	hsl(95, 36%, 16%)
Silent Sea	rgb(55, 74, 92)	hsl(209, 25%, 29%)
Dill	rgb(108, 121, 89)	hsl(84, 15%, 41%)
Rosetti	rgb(211, 143, 150)	hsl(354, 44%, 69%)
Chantilly	rgb(232, 183, 197)	hsl(343, 52%, 81%)

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.31:1 Very good#26371A on #E8B7C5
Aa7.31:1 Very good#E8B7C5 on #26371A
Aa5.23:1 Good#374A5C on #E8B7C5
Aa5.23:1 Good#E8B7C5 on #374A5C
Aa4.95:1 Good#26371A on #D38F96
Aa4.95:1 Good#D38F96 on #26371A
Aa3.54:1 Poor#374A5C on #D38F96
Aa3.54:1 Poor#D38F96 on #374A5C

Color blindness preview

CSS variables

/* Darkest Forest to Chantilly — https://swatchly.xyz/palette/26371a-374a5c-6c7959-d38f96-e8b7c5 */
:root {
  --darkest-forest: #26371a;
  --silent-sea: #374a5c;
  --dill: #6c7959;
  --rosetti: #d38f96;
  --chantilly: #e8b7c5;
}

Tailwind CSS v4

/* Darkest Forest to Chantilly — https://swatchly.xyz/palette/26371a-374a5c-6c7959-d38f96-e8b7c5 */
@theme {
  --color-darkest-forest: #26371a;
  --color-darkest-forest-50: #edfae6;
  --color-darkest-forest-100: #e3f0da;
  --color-darkest-forest-200: #cddec3;
  --color-darkest-forest-300: #b5c8aa;
  --color-darkest-forest-400: #95a988;
  --color-darkest-forest-500: #798d6c;
  --color-darkest-forest-600: #5f7253;
  --color-darkest-forest-700: #495a3e;
  --color-darkest-forest-800: #37462e;
  --color-darkest-forest-900: #26371a;
  --color-darkest-forest-950: #182112;
  --color-silent-sea: #374a5c;
  --color-silent-sea-50: #edf6ff;
  --color-silent-sea-100: #dfedfb;
  --color-silent-sea-200: #c9daea;
  --color-silent-sea-300: #b2c5d7;
  --color-silent-sea-400: #92a6ba;
  --color-silent-sea-500: #778ca0;
  --color-silent-sea-600: #5e7285;
  --color-silent-sea-700: #4a5c6e;
  --color-silent-sea-800: #374a5c;
  --color-silent-sea-900: #2b3946;
  --color-silent-sea-950: #19242d;
  --color-dill: #6c7959;
  --color-dill-50: #f0f9e5;
  --color-dill-100: #e7f1db;
  --color-dill-200: #d4dfc6;
  --color-dill-300: #becaad;
  --color-dill-400: #9fad8d;
  --color-dill-500: #859372;
  --color-dill-600: #6c7959;
  --color-dill-700: #556043;
  --color-dill-800: #414b32;
  --color-dill-900: #313a24;
  --color-dill-950: #1e2414;
  --color-rosetti: #d38f96;
  --color-rosetti-50: #fff3f4;
  --color-rosetti-100: #ffe6e7;
  --color-rosetti-200: #ffcace;
  --color-rosetti-300: #edb1b7;
  --color-rosetti-400: #d38f96;
  --color-rosetti-500: #b5737b;
  --color-rosetti-600: #975960;
  --color-rosetti-700: #7b444b;
  --color-rosetti-800: #633239;
  --color-rosetti-900: #4e252a;
  --color-rosetti-950: #321519;
  --color-chantilly: #e8b7c5;
  --color-chantilly-50: #fff5f8;
  --color-chantilly-100: #ffe8ee;
  --color-chantilly-200: #f5d1db;
  --color-chantilly-300: #e8b7c5;
  --color-chantilly-400: #c598a5;
  --color-chantilly-500: #a87b88;
  --color-chantilly-600: #8b606d;
  --color-chantilly-700: #714a56;
  --color-chantilly-800: #593842;
  --color-chantilly-900: #452932;
  --color-chantilly-950: #2c181f;
}