Turf to Zen Garden color palette

4F5E32Turf CBA4B2Young at Heart 225049Pine Needle 7E7C98Your Shadow 6AA58FEmerald Oasis CDDABBZen Garden

Open in generator Export PNG, PDF, ASE…

About this palette

Turf to Zen Garden is a 6-color muted, cool palette: #4F5E32 (Turf), #CBA4B2 (Young at Heart), #225049 (Pine Needle), #7E7C98 (Your Shadow), #6AA58F (Emerald Oasis), #CDDABB (Zen Garden). It mixes green, pink, turquoise, purple tones and feels cool overall. The strongest text pairing is #225049 on #CDDABB with a contrast ratio of 6.20:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Turf	rgb(79, 94, 50)	hsl(80, 31%, 28%)
Young at Heart	rgb(203, 164, 178)	hsl(338, 27%, 72%)
Pine Needle	rgb(34, 80, 73)	hsl(171, 40%, 22%)
Your Shadow	rgb(126, 124, 152)	hsl(244, 12%, 54%)
Emerald Oasis	rgb(106, 165, 143)	hsl(158, 25%, 53%)
Zen Garden	rgb(205, 218, 187)	hsl(85, 30%, 79%)

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.20:1 Good#225049 on #CDDABB
Aa6.20:1 Good#CDDABB on #225049
Aa4.81:1 Good#4F5E32 on #CDDABB
Aa4.81:1 Good#CDDABB on #4F5E32
Aa4.11:1 Poor#CBA4B2 on #225049
Aa4.11:1 Poor#225049 on #CBA4B2
Aa3.20:1 Poor#225049 on #6AA58F
Aa3.20:1 Poor#6AA58F on #225049

Color blindness preview

CSS variables

/* Turf to Zen Garden — https://swatchly.xyz/palette/4f5e32-cba4b2-225049-7e7c98-6aa58f-cddabb */
:root {
  --turf: #4f5e32;
  --young-at-heart: #cba4b2;
  --pine-needle: #225049;
  --your-shadow: #7e7c98;
  --emerald-oasis: #6aa58f;
  --zen-garden: #cddabb;
}

Tailwind CSS v4

/* Turf to Zen Garden — https://swatchly.xyz/palette/4f5e32-cba4b2-225049-7e7c98-6aa58f-cddabb */
@theme {
  --color-turf: #4f5e32;
  --color-turf-50: #effadf;
  --color-turf-100: #e5f1d2;
  --color-turf-200: #d0deba;
  --color-turf-300: #b9c9a0;
  --color-turf-400: #9aaa7d;
  --color-turf-500: #7f8f61;
  --color-turf-600: #657548;
  --color-turf-700: #4f5e32;
  --color-turf-800: #3d4926;
  --color-turf-900: #2e391a;
  --color-turf-950: #1c230d;
  --color-young-at-heart: #cba4b2;
  --color-young-at-heart-50: #fff8fb;
  --color-young-at-heart-100: #ffeef4;
  --color-young-at-heart-200: #f5d9e3;
  --color-young-at-heart-300: #e4c4cf;
  --color-young-at-heart-400: #cba4b2;
  --color-young-at-heart-500: #ab8694;
  --color-young-at-heart-600: #8d6976;
  --color-young-at-heart-700: #72515d;
  --color-young-at-heart-800: #593d48;
  --color-young-at-heart-900: #442d36;
  --color-young-at-heart-950: #2a1a20;
  --color-pine-needle: #225049;
  --color-pine-needle-50: #e1fcf7;
  --color-pine-needle-100: #d5f3ed;
  --color-pine-needle-200: #bde0d9;
  --color-pine-needle-300: #a3ccc4;
  --color-pine-needle-400: #81aea6;
  --color-pine-needle-500: #65938b;
  --color-pine-needle-600: #4c7971;
  --color-pine-needle-700: #38625b;
  --color-pine-needle-800: #225049;
  --color-pine-needle-900: #1c3d38;
  --color-pine-needle-950: #0f2723;
  --color-your-shadow: #7e7c98;
  --color-your-shadow-50: #f3f2ff;
  --color-your-shadow-100: #e7e6fa;
  --color-your-shadow-200: #d2d1e8;
  --color-your-shadow-300: #bbb9d3;
  --color-your-shadow-400: #9a98b5;
  --color-your-shadow-500: #7e7c98;
  --color-your-shadow-600: #65637d;
  --color-your-shadow-700: #504e66;
  --color-your-shadow-800: #3e3d51;
  --color-your-shadow-900: #302f40;
  --color-your-shadow-950: #1e1d29;
  --color-emerald-oasis: #6aa58f;
  --color-emerald-oasis-50: #d8fbec;
  --color-emerald-oasis-100: #c9f0e0;
  --color-emerald-oasis-200: #addcc9;
  --color-emerald-oasis-300: #90c5b0;
  --color-emerald-oasis-400: #6aa58f;
  --color-emerald-oasis-500: #518b76;
  --color-emerald-oasis-600: #39725e;
  --color-emerald-oasis-700: #285c4a;
  --color-emerald-oasis-800: #1a493a;
  --color-emerald-oasis-900: #113a2d;
  --color-emerald-oasis-950: #07251c;
  --color-zen-garden: #cddabb;
  --color-zen-garden-50: #eff6e4;
  --color-zen-garden-100: #e4ecd8;
  --color-zen-garden-200: #cddabb;
  --color-zen-garden-300: #b8c3a9;
  --color-zen-garden-400: #99a588;
  --color-zen-garden-500: #7e8a6d;
  --color-zen-garden-600: #657054;
  --color-zen-garden-700: #4f5940;
  --color-zen-garden-800: #3d4630;
  --color-zen-garden-900: #2f3624;
  --color-zen-garden-950: #1c2114;
}