Smoky to Zen Garden Color Palette

About this palette

Smoky to Zen Garden is a 5-color muted, cool palette: #5F5A6C (Smoky), #2D2A34 (Haiti), #7C7086 (Flying Carpet), #9EAC83 (Forester), #CDDBC2 (Zen Garden). It mixes gray, purple, green tones and feels cool overall. The strongest text pairing is #2D2A34 on #CDDBC2 with a contrast ratio of 9.72:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Smoky	rgb(95, 90, 108)	hsl(257, 9%, 39%)
Haiti	rgb(45, 42, 52)	hsl(258, 11%, 18%)
Flying Carpet	rgb(124, 112, 134)	hsl(273, 9%, 48%)
Forester	rgb(158, 172, 131)	hsl(80, 20%, 59%)
Zen Garden	rgb(205, 219, 194)	hsl(94, 26%, 81%)

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.72:1 Very good#2D2A34 on #CDDBC2
Aa9.72:1 Very good#CDDBC2 on #2D2A34
Aa5.82:1 Good#2D2A34 on #9EAC83
Aa5.82:1 Good#9EAC83 on #2D2A34
Aa4.58:1 Good#5F5A6C on #CDDBC2
Aa4.58:1 Good#CDDBC2 on #5F5A6C
Aa3.21:1 Poor#7C7086 on #CDDBC2
Aa3.21:1 Poor#CDDBC2 on #7C7086

Color blindness preview

CSS variables

/* Smoky to Zen Garden — https://swatchly.xyz/palette/5f5a6c-2d2a34-7c7086-9eac83-cddbc2 */
:root {
  --smoky: #5f5a6c;
  --haiti: #2d2a34;
  --flying-carpet: #7c7086;
  --forester: #9eac83;
  --zen-garden: #cddbc2;
}

Tailwind CSS v4

/* Smoky to Zen Garden — https://swatchly.xyz/palette/5f5a6c-2d2a34-7c7086-9eac83-cddbc2 */
@theme {
  --color-smoky: #5f5a6c;
  --color-smoky-50: #f6f3ff;
  --color-smoky-100: #ece9f6;
  --color-smoky-200: #dad6e6;
  --color-smoky-300: #c6c1d2;
  --color-smoky-400: #a8a3b6;
  --color-smoky-500: #8e889c;
  --color-smoky-600: #746f82;
  --color-smoky-700: #5f5a6c;
  --color-smoky-800: #4a4655;
  --color-smoky-900: #393542;
  --color-smoky-950: #24212a;
  --color-haiti: #2d2a34;
  --color-haiti-50: #f6f4fb;
  --color-haiti-100: #eceaf2;
  --color-haiti-200: #d8d6df;
  --color-haiti-300: #c2bfca;
  --color-haiti-400: #a19eaa;
  --color-haiti-500: #85818d;
  --color-haiti-600: #696671;
  --color-haiti-700: #514e58;
  --color-haiti-800: #3d3b43;
  --color-haiti-900: #2d2a34;
  --color-haiti-950: #1a191e;
  --color-flying-carpet: #7c7086;
  --color-flying-carpet-50: #f9f2ff;
  --color-flying-carpet-100: #f1e9f8;
  --color-flying-carpet-200: #e0d7e9;
  --color-flying-carpet-300: #ccc1d5;
  --color-flying-carpet-400: #afa3b9;
  --color-flying-carpet-500: #9589a0;
  --color-flying-carpet-600: #7c7086;
  --color-flying-carpet-700: #63586c;
  --color-flying-carpet-800: #4d4455;
  --color-flying-carpet-900: #3b3342;
  --color-flying-carpet-950: #251f2a;
  --color-forester: #9eac83;
  --color-forester-50: #f2fbe3;
  --color-forester-100: #e8f2d8;
  --color-forester-200: #d4dfc1;
  --color-forester-300: #becaa7;
  --color-forester-400: #9eac83;
  --color-forester-500: #829068;
  --color-forester-600: #67744e;
  --color-forester-700: #515c39;
  --color-forester-800: #3e4829;
  --color-forester-900: #2f371d;
  --color-forester-950: #1c220f;
  --color-zen-garden: #cddbc2;
  --color-zen-garden-50: #eff7e9;
  --color-zen-garden-100: #e4eddd;
  --color-zen-garden-200: #cddbc2;
  --color-zen-garden-300: #b8c4af;
  --color-zen-garden-400: #98a58e;
  --color-zen-garden-500: #7d8a73;
  --color-zen-garden-600: #64705a;
  --color-zen-garden-700: #4e5945;
  --color-zen-garden-800: #3c4635;
  --color-zen-garden-900: #2e3627;
  --color-zen-garden-950: #1c2117;
}