Turf to Wondrous Wisteria Color Palette

About this palette

Turf to Wondrous Wisteria is a 5-color cool palette: #3C5B36 (Turf), #9B6281 (Fruit of Passion), #1A2611 (Midnight Pines), #DFDDFF (Icy Plains), #A7B1E3 (Wondrous Wisteria). It mixes green, red, purple tones and feels cool overall. The strongest text pairing is #1A2611 on #DFDDFF with a contrast ratio of 11.98:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Turf	rgb(60, 91, 54)	hsl(110, 26%, 28%)
Fruit of Passion	rgb(155, 98, 129)	hsl(327, 23%, 50%)
Midnight Pines	rgb(26, 38, 17)	hsl(94, 38%, 11%)
Icy Plains	rgb(223, 221, 255)	hsl(244, 100%, 93%)
Wondrous Wisteria	rgb(167, 177, 227)	hsl(230, 52%, 77%)

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.

Aa11.98:1 Very good#1A2611 on #DFDDFF
Aa11.98:1 Very good#DFDDFF on #1A2611
Aa7.55:1 Very good#1A2611 on #A7B1E3
Aa7.55:1 Very good#A7B1E3 on #1A2611
Aa5.81:1 Good#3C5B36 on #DFDDFF
Aa5.81:1 Good#DFDDFF on #3C5B36
Aa3.66:1 Poor#3C5B36 on #A7B1E3
Aa3.66:1 Poor#A7B1E3 on #3C5B36

Color blindness preview

CSS variables

/* Turf to Wondrous Wisteria — https://swatchly.xyz/palette/3c5b36-9b6281-1a2611-dfddff-a7b1e3 */
:root {
  --turf: #3c5b36;
  --fruit-of-passion: #9b6281;
  --midnight-pines: #1a2611;
  --icy-plains: #dfddff;
  --wondrous-wisteria: #a7b1e3;
}

Tailwind CSS v4

/* Turf to Wondrous Wisteria — https://swatchly.xyz/palette/3c5b36-9b6281-1a2611-dfddff-a7b1e3 */
@theme {
  --color-turf: #3c5b36;
  --color-turf-50: #e8fce4;
  --color-turf-100: #dcf3d8;
  --color-turf-200: #c5e0c0;
  --color-turf-300: #abcaa5;
  --color-turf-400: #89aa83;
  --color-turf-500: #6d8e67;
  --color-turf-600: #53724d;
  --color-turf-700: #3c5b36;
  --color-turf-800: #2e472a;
  --color-turf-900: #22371e;
  --color-turf-950: #132210;
  --color-fruit-of-passion: #9b6281;
  --color-fruit-of-passion-50: #fff0f8;
  --color-fruit-of-passion-100: #ffe5f2;
  --color-fruit-of-passion-200: #fbcce4;
  --color-fruit-of-passion-300: #eab5d0;
  --color-fruit-of-passion-400: #cf95b4;
  --color-fruit-of-passion-500: #b57b9a;
  --color-fruit-of-passion-600: #9b6281;
  --color-fruit-of-passion-700: #7f4b67;
  --color-fruit-of-passion-800: #663851;
  --color-fruit-of-passion-900: #50293f;
  --color-fruit-of-passion-950: #331727;
  --color-midnight-pines: #1a2611;
  --color-midnight-pines-50: #eff9e9;
  --color-midnight-pines-100: #e5efde;
  --color-midnight-pines-200: #d0dcc8;
  --color-midnight-pines-300: #b8c6af;
  --color-midnight-pines-400: #98a78e;
  --color-midnight-pines-500: #7d8c73;
  --color-midnight-pines-600: #64725a;
  --color-midnight-pines-700: #4f5c46;
  --color-midnight-pines-800: #3d4835;
  --color-midnight-pines-900: #2f3928;
  --color-midnight-pines-950: #1a2611;
  --color-icy-plains: #dfddff;
  --color-icy-plains-50: #fbfbff;
  --color-icy-plains-100: #f2f2ff;
  --color-icy-plains-200: #dfddff;
  --color-icy-plains-300: #c7c5e1;
  --color-icy-plains-400: #a6a4c2;
  --color-icy-plains-500: #8987a6;
  --color-icy-plains-600: #6d6b88;
  --color-icy-plains-700: #55536e;
  --color-icy-plains-800: #413f56;
  --color-icy-plains-900: #323044;
  --color-icy-plains-950: #1e1d2b;
  --color-wondrous-wisteria: #a7b1e3;
  --color-wondrous-wisteria-50: #eaeeff;
  --color-wondrous-wisteria-100: #dae1ff;
  --color-wondrous-wisteria-200: #c2caf3;
  --color-wondrous-wisteria-300: #a7b1e3;
  --color-wondrous-wisteria-400: #8b94c4;
  --color-wondrous-wisteria-500: #727baa;
  --color-wondrous-wisteria-600: #5b638f;
  --color-wondrous-wisteria-700: #474e76;
  --color-wondrous-wisteria-800: #383e60;
  --color-wondrous-wisteria-900: #2b304e;
  --color-wondrous-wisteria-950: #1a1d33;
}