Zucchini to Decadial Pink Color Palette

About this palette

Zucchini to Decadial Pink is a 5-color cool, earthy palette: #254729 (Zucchini), #5C7B55 (Ghoul), #63A371 (Endo), #D3A1D7 (Velvet Horizon), #E4C9E6 (Decadial Pink). It mixes green, pink tones and feels cool overall. The strongest text pairing is #254729 on #E4C9E6 with a contrast ratio of 6.86:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Zucchini	rgb(37, 71, 41)	hsl(127, 31%, 21%)
Ghoul	rgb(92, 123, 85)	hsl(109, 18%, 41%)
Endo	rgb(99, 163, 113)	hsl(133, 26%, 51%)
Velvet Horizon	rgb(211, 161, 215)	hsl(296, 40%, 74%)
Decadial Pink	rgb(228, 201, 230)	hsl(296, 37%, 85%)

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.86:1 Good#254729 on #E4C9E6
Aa6.86:1 Good#E4C9E6 on #254729
Aa4.90:1 Good#254729 on #D3A1D7
Aa4.90:1 Good#D3A1D7 on #254729
Aa3.48:1 Poor#254729 on #63A371
Aa3.48:1 Poor#63A371 on #254729
Aa3.12:1 Poor#5C7B55 on #E4C9E6
Aa3.12:1 Poor#E4C9E6 on #5C7B55

Color blindness preview

CSS variables

/* Zucchini to Decadial Pink — https://swatchly.xyz/palette/254729-5c7b55-63a371-d3a1d7-e4c9e6 */
:root {
  --zucchini: #254729;
  --ghoul: #5c7b55;
  --endo: #63a371;
  --velvet-horizon: #d3a1d7;
  --decadial-pink: #e4c9e6;
}

Tailwind CSS v4

/* Zucchini to Decadial Pink — https://swatchly.xyz/palette/254729-5c7b55-63a371-d3a1d7-e4c9e6 */
@theme {
  --color-zucchini: #254729;
  --color-zucchini-50: #e6fce8;
  --color-zucchini-100: #dbf3dc;
  --color-zucchini-200: #c4e1c5;
  --color-zucchini-300: #a9caab;
  --color-zucchini-400: #87ab89;
  --color-zucchini-500: #6a8f6d;
  --color-zucchini-600: #507353;
  --color-zucchini-700: #3b5a3e;
  --color-zucchini-800: #254729;
  --color-zucchini-900: #1f3621;
  --color-zucchini-950: #112113;
  --color-ghoul: #5c7b55;
  --color-ghoul-50: #e9fce4;
  --color-ghoul-100: #def4d9;
  --color-ghoul-200: #c9e2c3;
  --color-ghoul-300: #b1cdab;
  --color-ghoul-400: #90b089;
  --color-ghoul-500: #75956e;
  --color-ghoul-600: #5c7b55;
  --color-ghoul-700: #466240;
  --color-ghoul-800: #354d2f;
  --color-ghoul-900: #273c22;
  --color-ghoul-950: #162513;
  --color-endo: #63a371;
  --color-endo-50: #e6ffea;
  --color-endo-100: #d5fbdb;
  --color-endo-200: #beecc6;
  --color-endo-300: #a4d9ad;
  --color-endo-400: #80bc8c;
  --color-endo-500: #63a371;
  --color-endo-600: #468555;
  --color-endo-700: #2f6b3f;
  --color-endo-800: #1e542d;
  --color-endo-900: #124120;
  --color-endo-950: #072811;
  --color-velvet-horizon: #d3a1d7;
  --color-velvet-horizon-50: #fde6ff;
  --color-velvet-horizon-100: #f9d6fb;
  --color-velvet-horizon-200: #e6bee9;
  --color-velvet-horizon-300: #d3a1d7;
  --color-velvet-horizon-400: #b485b8;
  --color-velvet-horizon-500: #9a6b9e;
  --color-velvet-horizon-600: #805484;
  --color-velvet-horizon-700: #69416c;
  --color-velvet-horizon-800: #553158;
  --color-velvet-horizon-900: #442647;
  --color-velvet-horizon-950: #2b162d;
  --color-decadial-pink: #e4c9e6;
  --color-decadial-pink-50: #fcecfd;
  --color-decadial-pink-100: #f3e1f4;
  --color-decadial-pink-200: #e4c9e6;
  --color-decadial-pink-300: #ccb5cd;
  --color-decadial-pink-400: #ae95b0;
  --color-decadial-pink-500: #937b95;
  --color-decadial-pink-600: #79617b;
  --color-decadial-pink-700: #614c63;
  --color-decadial-pink-800: #4d3b4f;
  --color-decadial-pink-900: #3c2d3d;
  --color-decadial-pink-950: #261b27;
}