Misty Morning to Everglade Color Palette

About this palette

Misty Morning to Everglade is a 4-color muted, gradient palette: #B0CDBB (Misty Morning), #8FA095 (Japanese Bonsai), #576A5B (Italian Basil), #2E4438 (Everglade). It mixes green, gray tones and feels cool overall. The strongest text pairing is #B0CDBB on #2E4438 with a contrast ratio of 6.15:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Misty Morning	rgb(176, 205, 187)	hsl(143, 22%, 75%)
Japanese Bonsai	rgb(143, 160, 149)	hsl(141, 8%, 59%)
Italian Basil	rgb(87, 106, 91)	hsl(133, 10%, 38%)
Everglade	rgb(46, 68, 56)	hsl(147, 19%, 22%)

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.

Aa6.15:1 Good#B0CDBB on #2E4438
Aa6.15:1 Good#2E4438 on #B0CDBB
Aa3.81:1 Poor#8FA095 on #2E4438
Aa3.81:1 Poor#2E4438 on #8FA095
Aa3.40:1 Poor#B0CDBB on #576A5B
Aa3.40:1 Poor#576A5B on #B0CDBB

Color blindness preview

CSS variables

/* Misty Morning to Everglade — https://swatchly.xyz/palette/b0cdbb-8fa095-576a5b-2e4438 */
:root {
  --misty-morning: #b0cdbb;
  --japanese-bonsai: #8fa095;
  --italian-basil: #576a5b;
  --everglade: #2e4438;
}

Tailwind CSS v4

/* Misty Morning to Everglade — https://swatchly.xyz/palette/b0cdbb-8fa095-576a5b-2e4438 */
@theme {
  --color-misty-morning: #b0cdbb;
  --color-misty-morning-50: #ecfcf2;
  --color-misty-morning-100: #e1f3e8;
  --color-misty-morning-200: #cce1d4;
  --color-misty-morning-300: #b0cdbb;
  --color-misty-morning-400: #91ac9c;
  --color-misty-morning-500: #75907f;
  --color-misty-morning-600: #5b7565;
  --color-misty-morning-700: #455d4f;
  --color-misty-morning-800: #34493c;
  --color-misty-morning-900: #26382d;
  --color-misty-morning-950: #16231b;
  --color-japanese-bonsai: #8fa095;
  --color-japanese-bonsai-50: #ecf6ef;
  --color-japanese-bonsai-100: #dfebe3;
  --color-japanese-bonsai-200: #c9d7ce;
  --color-japanese-bonsai-300: #b0c0b6;
  --color-japanese-bonsai-400: #8fa095;
  --color-japanese-bonsai-500: #75867b;
  --color-japanese-bonsai-600: #5d6c62;
  --color-japanese-bonsai-700: #48564d;
  --color-japanese-bonsai-800: #38443c;
  --color-japanese-bonsai-900: #2a352e;
  --color-japanese-bonsai-950: #1a211d;
  --color-italian-basil: #576a5b;
  --color-italian-basil-50: #edf9ef;
  --color-italian-basil-100: #e0eee3;
  --color-italian-basil-200: #c9dacd;
  --color-italian-basil-300: #b0c2b4;
  --color-italian-basil-400: #8ea292;
  --color-italian-basil-500: #728676;
  --color-italian-basil-600: #576a5b;
  --color-italian-basil-700: #445447;
  --color-italian-basil-800: #344237;
  --color-italian-basil-900: #27332a;
  --color-italian-basil-950: #172019;
  --color-everglade: #2e4438;
  --color-everglade-50: #ebf9f1;
  --color-everglade-100: #e0f0e6;
  --color-everglade-200: #caddd2;
  --color-everglade-300: #b0c6ba;
  --color-everglade-400: #8fa799;
  --color-everglade-500: #728b7d;
  --color-everglade-600: #586f62;
  --color-everglade-700: #43574c;
  --color-everglade-800: #2e4438;
  --color-everglade-900: #25342b;
  --color-everglade-950: #15201a;
}