Everglade to Foggy Plum Color Palette

About this palette

Everglade to Foggy Plum is a 5-color muted, vintage palette: #2C483A (Everglade), #DBC0D0 (Creamy Berry), #735C34 (Olivary), #748798 (Tempest), #BBA7B6 (Foggy Plum). It mixes green, pink, brown, gray tones and feels warm overall. The strongest text pairing is #2C483A on #DBC0D0 with a contrast ratio of 5.95:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Everglade	rgb(44, 72, 58)	hsl(150, 24%, 23%)
Creamy Berry	rgb(219, 192, 208)	hsl(324, 27%, 81%)
Olivary	rgb(115, 92, 52)	hsl(38, 38%, 33%)
Tempest	rgb(116, 135, 152)	hsl(208, 15%, 53%)
Foggy Plum	rgb(187, 167, 182)	hsl(315, 13%, 69%)

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.

Aa5.95:1 Good#2C483A on #DBC0D0
Aa5.95:1 Good#DBC0D0 on #2C483A
Aa4.45:1 Poor#2C483A on #BBA7B6
Aa4.45:1 Poor#BBA7B6 on #2C483A
Aa3.77:1 Poor#DBC0D0 on #735C34
Aa3.77:1 Poor#735C34 on #DBC0D0

Color blindness preview

CSS variables

/* Everglade to Foggy Plum — https://swatchly.xyz/palette/2c483a-dbc0d0-735c34-748798-bba7b6 */
:root {
  --everglade: #2c483a;
  --creamy-berry: #dbc0d0;
  --olivary: #735c34;
  --tempest: #748798;
  --foggy-plum: #bba7b6;
}

Tailwind CSS v4

/* Everglade to Foggy Plum — https://swatchly.xyz/palette/2c483a-dbc0d0-735c34-748798-bba7b6 */
@theme {
  --color-everglade: #2c483a;
  --color-everglade-50: #e8faf0;
  --color-everglade-100: #ddf1e6;
  --color-everglade-200: #c6ded1;
  --color-everglade-300: #adc8b9;
  --color-everglade-400: #8ba999;
  --color-everglade-500: #6f8e7e;
  --color-everglade-600: #567263;
  --color-everglade-700: #415b4d;
  --color-everglade-800: #2c483a;
  --color-everglade-900: #23372d;
  --color-everglade-950: #14221b;
  --color-creamy-berry: #dbc0d0;
  --color-creamy-berry-50: #fff7fb;
  --color-creamy-berry-100: #fcebf5;
  --color-creamy-berry-200: #ebd8e3;
  --color-creamy-berry-300: #dbc0d0;
  --color-creamy-berry-400: #b8a0ae;
  --color-creamy-berry-500: #9c8392;
  --color-creamy-berry-600: #7f6776;
  --color-creamy-berry-700: #66505d;
  --color-creamy-berry-800: #503d48;
  --color-creamy-berry-900: #3d2d37;
  --color-creamy-berry-950: #261b22;
  --color-olivary: #735c34;
  --color-olivary-50: #fff4e1;
  --color-olivary-100: #f9e9ce;
  --color-olivary-200: #ead7b8;
  --color-olivary-300: #d7c29e;
  --color-olivary-400: #bca47c;
  --color-olivary-500: #a28a61;
  --color-olivary-600: #897149;
  --color-olivary-700: #735c34;
  --color-olivary-800: #5b4725;
  --color-olivary-900: #473619;
  --color-olivary-950: #2e220c;
  --color-tempest: #748798;
  --color-tempest-50: #edf6ff;
  --color-tempest-100: #dfecf8;
  --color-tempest-200: #c9d9e7;
  --color-tempest-300: #b1c2d2;
  --color-tempest-400: #90a3b4;
  --color-tempest-500: #748798;
  --color-tempest-600: #5b6d7d;
  --color-tempest-700: #465665;
  --color-tempest-800: #354350;
  --color-tempest-900: #28343e;
  --color-tempest-950: #172028;
  --color-foggy-plum: #bba7b6;
  --color-foggy-plum-50: #fff7fd;
  --color-foggy-plum-100: #faeef7;
  --color-foggy-plum-200: #eadbe6;
  --color-foggy-plum-300: #d6c6d2;
  --color-foggy-plum-400: #bba7b6;
  --color-foggy-plum-500: #9d8a98;
  --color-foggy-plum-600: #7f6d7b;
  --color-foggy-plum-700: #665562;
  --color-foggy-plum-800: #4f414c;
  --color-foggy-plum-900: #3c3039;
  --color-foggy-plum-950: #251c23;
}