Everglade to Salty Ice Color Palette

About this palette

Everglade to Salty Ice is a 5-color muted, cool, gradient palette: #2E3C29 (Everglade), #6B5056 (Pinot Noir), #73839B (Stonewash), #BEA7A7 (Grey Sheep), #CCE5FC (Salty Ice). It mixes green, red, blue, gray tones and feels cool overall. The strongest text pairing is #2E3C29 on #CCE5FC with a contrast ratio of 9.02:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Everglade	rgb(46, 60, 41)	hsl(104, 19%, 20%)
Pinot Noir	rgb(107, 80, 86)	hsl(347, 14%, 37%)
Stonewash	rgb(115, 131, 155)	hsl(216, 17%, 53%)
Grey Sheep	rgb(190, 167, 167)	hsl(0, 15%, 70%)
Salty Ice	rgb(204, 229, 252)	hsl(209, 89%, 89%)

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.02:1 Very good#2E3C29 on #CCE5FC
Aa9.02:1 Very good#CCE5FC on #2E3C29
Aa5.57:1 Good#6B5056 on #CCE5FC
Aa5.57:1 Good#CCE5FC on #6B5056
Aa5.17:1 Good#2E3C29 on #BEA7A7
Aa5.17:1 Good#BEA7A7 on #2E3C29
Aa3.19:1 Poor#6B5056 on #BEA7A7
Aa3.19:1 Poor#BEA7A7 on #6B5056

Color blindness preview

CSS variables

/* Everglade to Salty Ice — https://swatchly.xyz/palette/2e3c29-6b5056-73839b-bea7a7-cce5fc */
:root {
  --everglade: #2e3c29;
  --pinot-noir: #6b5056;
  --stonewash: #73839b;
  --grey-sheep: #bea7a7;
  --salty-ice: #cce5fc;
}

Tailwind CSS v4

/* Everglade to Salty Ice — https://swatchly.xyz/palette/2e3c29-6b5056-73839b-bea7a7-cce5fc */
@theme {
  --color-everglade: #2e3c29;
  --color-everglade-50: #eff9eb;
  --color-everglade-100: #e4efe0;
  --color-everglade-200: #cfdccb;
  --color-everglade-300: #b7c6b2;
  --color-everglade-400: #98a892;
  --color-everglade-500: #7d8e78;
  --color-everglade-600: #64745f;
  --color-everglade-700: #4f5d4a;
  --color-everglade-800: #3e4b3a;
  --color-everglade-900: #2e3c29;
  --color-everglade-950: #1e251b;
  --color-pinot-noir: #6b5056;
  --color-pinot-noir-50: #fff1f4;
  --color-pinot-noir-100: #fae5e9;
  --color-pinot-noir-200: #e9d1d6;
  --color-pinot-noir-300: #d5bac0;
  --color-pinot-noir-400: #b89aa1;
  --color-pinot-noir-500: #9d8086;
  --color-pinot-noir-600: #82666c;
  --color-pinot-noir-700: #6b5056;
  --color-pinot-noir-800: #543e43;
  --color-pinot-noir-900: #422f33;
  --color-pinot-noir-950: #2a1c1f;
  --color-stonewash: #73839b;
  --color-stonewash-50: #eef5ff;
  --color-stonewash-100: #dfebfb;
  --color-stonewash-200: #c9d6ea;
  --color-stonewash-300: #b0bfd5;
  --color-stonewash-400: #8f9fb7;
  --color-stonewash-500: #73839b;
  --color-stonewash-600: #5a6980;
  --color-stonewash-700: #465368;
  --color-stonewash-800: #354153;
  --color-stonewash-900: #283241;
  --color-stonewash-950: #181f2a;
  --color-grey-sheep: #bea7a7;
  --color-grey-sheep-50: #fff7f7;
  --color-grey-sheep-100: #fceeee;
  --color-grey-sheep-200: #ecdbdb;
  --color-grey-sheep-300: #d9c6c6;
  --color-grey-sheep-400: #bea7a7;
  --color-grey-sheep-500: #a08a8a;
  --color-grey-sheep-600: #826d6d;
  --color-grey-sheep-700: #685555;
  --color-grey-sheep-800: #524141;
  --color-grey-sheep-900: #3e3031;
  --color-grey-sheep-950: #261c1c;
  --color-salty-ice: #cce5fc;
  --color-salty-ice-50: #e0effd;
  --color-salty-ice-100: #cce5fc;
  --color-salty-ice-200: #bfd2e4;
  --color-salty-ice-300: #a8bed1;
  --color-salty-ice-400: #89a0b5;
  --color-salty-ice-500: #6f869b;
  --color-salty-ice-600: #576d81;
  --color-salty-ice-700: #44586a;
  --color-salty-ice-800: #334454;
  --color-salty-ice-900: #263542;
  --color-salty-ice-950: #16202a;
}