Everglade to Peppermint color palette

2E3F32Everglade 356256Ethereal Woods 627C81Catfish 789798Yucca 92C0B5Seaborn D4E7CDPeppermint

About this palette

Everglade to Peppermint is a 6-color muted, gradient palette: #2E3F32 (Everglade), #356256 (Ethereal Woods), #627C81 (Catfish), #789798 (Yucca), #92C0B5 (Seaborn), #D4E7CD (Peppermint). It mixes gray, turquoise, green tones and feels cool overall. The strongest text pairing is #2E3F32 on #D4E7CD with a contrast ratio of 8.60:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Everglade	rgb(46, 63, 50)	hsl(134, 16%, 21%)
Ethereal Woods	rgb(53, 98, 86)	hsl(164, 30%, 30%)
Catfish	rgb(98, 124, 129)	hsl(190, 14%, 45%)
Yucca	rgb(120, 151, 152)	hsl(182, 13%, 53%)
Seaborn	rgb(146, 192, 181)	hsl(166, 27%, 66%)
Peppermint	rgb(212, 231, 205)	hsl(104, 35%, 85%)

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.

Aa8.60:1 Very good#2E3F32 on #D4E7CD
Aa8.60:1 Very good#D4E7CD on #2E3F32
Aa5.57:1 Good#2E3F32 on #92C0B5
Aa5.57:1 Good#92C0B5 on #2E3F32
Aa5.31:1 Good#356256 on #D4E7CD
Aa5.31:1 Good#D4E7CD on #356256
Aa3.57:1 Poor#2E3F32 on #789798
Aa3.57:1 Poor#789798 on #2E3F32

Color blindness preview

CSS variables

/* Everglade to Peppermint — https://swatchly.xyz/palette/2e3f32-356256-627c81-789798-92c0b5-d4e7cd */
:root {
  --everglade: #2e3f32;
  --ethereal-woods: #356256;
  --catfish: #627c81;
  --yucca: #789798;
  --seaborn: #92c0b5;
  --peppermint: #d4e7cd;
}

Tailwind CSS v4

/* Everglade to Peppermint — https://swatchly.xyz/palette/2e3f32-356256-627c81-789798-92c0b5-d4e7cd */
@theme {
  --color-everglade: #2e3f32;
  --color-everglade-50: #edf9ef;
  --color-everglade-100: #e2efe5;
  --color-everglade-200: #cddcd0;
  --color-everglade-300: #b5c6b8;
  --color-everglade-400: #96a99a;
  --color-everglade-500: #7c8f80;
  --color-everglade-600: #637567;
  --color-everglade-700: #4f6052;
  --color-everglade-800: #3e4d41;
  --color-everglade-900: #2e3f32;
  --color-everglade-950: #1e2820;
  --color-ethereal-woods: #356256;
  --color-ethereal-woods-50: #e2fcf4;
  --color-ethereal-woods-100: #d5f3ea;
  --color-ethereal-woods-200: #bee1d6;
  --color-ethereal-woods-300: #a4ccc0;
  --color-ethereal-woods-400: #81aea1;
  --color-ethereal-woods-500: #659386;
  --color-ethereal-woods-600: #4c796c;
  --color-ethereal-woods-700: #356256;
  --color-ethereal-woods-800: #284d43;
  --color-ethereal-woods-900: #1c3b33;
  --color-ethereal-woods-950: #0e251f;
  --color-catfish: #627c81;
  --color-catfish-50: #e9f9fc;
  --color-catfish-100: #e0f1f4;
  --color-catfish-200: #cce0e4;
  --color-catfish-300: #b5ccd0;
  --color-catfish-400: #95afb4;
  --color-catfish-500: #7b959a;
  --color-catfish-600: #627c81;
  --color-catfish-700: #4b6367;
  --color-catfish-800: #384d51;
  --color-catfish-900: #293b3f;
  --color-catfish-950: #182527;
  --color-yucca: #789798;
  --color-yucca-50: #e9fbfc;
  --color-yucca-100: #e0f3f4;
  --color-yucca-200: #cbe2e3;
  --color-yucca-300: #b4cecf;
  --color-yucca-400: #93b1b2;
  --color-yucca-500: #789798;
  --color-yucca-600: #5c7a7b;
  --color-yucca-700: #466162;
  --color-yucca-800: #334c4d;
  --color-yucca-900: #253a3b;
  --color-yucca-950: #152424;
  --color-seaborn: #92c0b5;
  --color-seaborn-50: #daf6ef;
  --color-seaborn-100: #ccebe3;
  --color-seaborn-200: #b2d6cd;
  --color-seaborn-300: #92c0b5;
  --color-seaborn-400: #76a298;
  --color-seaborn-500: #5d897f;
  --color-seaborn-600: #467067;
  --color-seaborn-700: #345a52;
  --color-seaborn-800: #264841;
  --color-seaborn-900: #1b3933;
  --color-seaborn-950: #0e241f;
  --color-peppermint: #d4e7cd;
  --color-peppermint-50: #f5fff1;
  --color-peppermint-100: #ecf6e8;
  --color-peppermint-200: #d4e7cd;
  --color-peppermint-300: #becdb9;
  --color-peppermint-400: #9cad96;
  --color-peppermint-500: #7f9078;
  --color-peppermint-600: #64745d;
  --color-peppermint-700: #4d5c47;
  --color-peppermint-800: #3a4735;
  --color-peppermint-900: #2c3728;
  --color-peppermint-950: #1a2217;
}