Everglade to Smoke Dragon Color Palette

About this palette

Everglade to Smoke Dragon is a 5-color muted, cool palette: #23463D (Everglade), #7F6272 (Opera), #5F9385 (Martian Cerulean), #80AABA (Equanimity), #CEBBAE (Smoke Dragon). It mixes turquoise, red, blue, gray tones and feels cool overall. The strongest text pairing is #23463D on #CEBBAE with a contrast ratio of 5.63:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Everglade	rgb(35, 70, 61)	hsl(165, 33%, 21%)
Opera	rgb(127, 98, 114)	hsl(327, 13%, 44%)
Martian Cerulean	rgb(95, 147, 133)	hsl(164, 21%, 47%)
Equanimity	rgb(128, 170, 186)	hsl(197, 30%, 62%)
Smoke Dragon	rgb(206, 187, 174)	hsl(24, 25%, 75%)

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.63:1 Good#23463D on #CEBBAE
Aa5.63:1 Good#CEBBAE on #23463D
Aa4.16:1 Poor#23463D on #80AABA
Aa4.16:1 Poor#80AABA on #23463D

Color blindness preview

CSS variables

/* Everglade to Smoke Dragon — https://swatchly.xyz/palette/23463d-7f6272-5f9385-80aaba-cebbae */
:root {
  --everglade: #23463d;
  --opera: #7f6272;
  --martian-cerulean: #5f9385;
  --equanimity: #80aaba;
  --smoke-dragon: #cebbae;
}

Tailwind CSS v4

/* Everglade to Smoke Dragon — https://swatchly.xyz/palette/23463d-7f6272-5f9385-80aaba-cebbae */
@theme {
  --color-everglade: #23463d;
  --color-everglade-50: #e5fbf4;
  --color-everglade-100: #d9f2ea;
  --color-everglade-200: #c2dfd6;
  --color-everglade-300: #a8c9bf;
  --color-everglade-400: #85a99e;
  --color-everglade-500: #688d82;
  --color-everglade-600: #4e7167;
  --color-everglade-700: #3a5950;
  --color-everglade-800: #23463d;
  --color-everglade-900: #1e352f;
  --color-everglade-950: #10211c;
  --color-opera: #7f6272;
  --color-opera-50: #fff0f8;
  --color-opera-100: #f9e4ef;
  --color-opera-200: #e8cfdd;
  --color-opera-300: #d4b8c7;
  --color-opera-400: #b698a8;
  --color-opera-500: #9a7c8d;
  --color-opera-600: #7f6272;
  --color-opera-700: #664c5b;
  --color-opera-800: #513b47;
  --color-opera-900: #3f2c37;
  --color-opera-950: #281b22;
  --color-martian-cerulean: #5f9385;
  --color-martian-cerulean-50: #e0fdf4;
  --color-martian-cerulean-100: #d3f4ea;
  --color-martian-cerulean-200: #bbe2d6;
  --color-martian-cerulean-300: #a0cdc0;
  --color-martian-cerulean-400: #7caea0;
  --color-martian-cerulean-500: #5f9385;
  --color-martian-cerulean-600: #45786b;
  --color-martian-cerulean-700: #316054;
  --color-martian-cerulean-800: #224b41;
  --color-martian-cerulean-900: #173a32;
  --color-martian-cerulean-950: #0b251e;
  --color-equanimity: #80aaba;
  --color-equanimity-50: #e9f9ff;
  --color-equanimity-100: #d6f1fb;
  --color-equanimity-200: #bfdeeb;
  --color-equanimity-300: #a4c8d6;
  --color-equanimity-400: #80aaba;
  --color-equanimity-500: #658e9e;
  --color-equanimity-600: #4b7382;
  --color-equanimity-700: #375c69;
  --color-equanimity-800: #284853;
  --color-equanimity-900: #1c3741;
  --color-equanimity-950: #0e2229;
  --color-smoke-dragon: #cebbae;
  --color-smoke-dragon-50: #fdf2ea;
  --color-smoke-dragon-100: #f4e7df;
  --color-smoke-dragon-200: #e1d3c9;
  --color-smoke-dragon-300: #cebbae;
  --color-smoke-dragon-400: #ae9c90;
  --color-smoke-dragon-500: #938175;
  --color-smoke-dragon-600: #78675c;
  --color-smoke-dragon-700: #605147;
  --color-smoke-dragon-800: #4c3f36;
  --color-smoke-dragon-900: #3b3029;
  --color-smoke-dragon-950: #251d18;
}