Zucchini to Mintastic Color Palette

About this palette

Zucchini to Mintastic is a 5-color cool, earthy, monochromatic palette: #004B2F (Zucchini), #42A979 (Jubilant Jade), #54E1A7 (Aquamarine), #007C5A (Opal Green), #B3FBDB (Mintastic). It mixes green, turquoise tones and feels cool overall. The strongest text pairing is #004B2F on #B3FBDB with a contrast ratio of 8.66:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Zucchini	rgb(0, 75, 47)	hsl(158, 100%, 15%)
Jubilant Jade	rgb(66, 169, 121)	hsl(152, 44%, 46%)
Aquamarine	rgb(84, 225, 167)	hsl(155, 70%, 61%)
Opal Green	rgb(0, 124, 90)	hsl(164, 100%, 24%)
Mintastic	rgb(179, 251, 219)	hsl(153, 90%, 84%)

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.

Aa8.66:1 Very good#004B2F on #B3FBDB
Aa8.66:1 Very good#B3FBDB on #004B2F
Aa6.21:1 Good#004B2F on #54E1A7
Aa6.21:1 Good#54E1A7 on #004B2F
Aa4.40:1 Poor#007C5A on #B3FBDB
Aa4.40:1 Poor#B3FBDB on #007C5A
Aa3.51:1 Poor#004B2F on #42A979
Aa3.51:1 Poor#42A979 on #004B2F

Color blindness preview

CSS variables

/* Zucchini to Mintastic — https://swatchly.xyz/palette/004b2f-42a979-54e1a7-007c5a-b3fbdb */
:root {
  --zucchini: #004b2f;
  --jubilant-jade: #42a979;
  --aquamarine: #54e1a7;
  --opal-green: #007c5a;
  --mintastic: #b3fbdb;
}

Tailwind CSS v4

/* Zucchini to Mintastic — https://swatchly.xyz/palette/004b2f-42a979-54e1a7-007c5a-b3fbdb */
@theme {
  --color-zucchini: #004b2f;
  --color-zucchini-50: #dcffeb;
  --color-zucchini-100: #cff6e0;
  --color-zucchini-200: #b5e4ca;
  --color-zucchini-300: #98cfb1;
  --color-zucchini-400: #73af8f;
  --color-zucchini-500: #559373;
  --color-zucchini-600: #3a7759;
  --color-zucchini-700: #265e43;
  --color-zucchini-800: #004b2f;
  --color-zucchini-900: #0d3825;
  --color-zucchini-950: #052315;
  --color-jubilant-jade: #42a979;
  --color-jubilant-jade-50: #e5fff0;
  --color-jubilant-jade-100: #c8ffe0;
  --color-jubilant-jade-200: #adf0cb;
  --color-jubilant-jade-300: #8fdeb4;
  --color-jubilant-jade-400: #66c294;
  --color-jubilant-jade-500: #42a979;
  --color-jubilant-jade-600: #1b8b5d;
  --color-jubilant-jade-700: #006f47;
  --color-jubilant-jade-800: #005636;
  --color-jubilant-jade-900: #004228;
  --color-jubilant-jade-950: #002917;
  --color-aquamarine: #54e1a7;
  --color-aquamarine-50: #e1ffef;
  --color-aquamarine-100: #bbffdd;
  --color-aquamarine-200: #95f0c5;
  --color-aquamarine-300: #54e1a7;
  --color-aquamarine-400: #33bf89;
  --color-aquamarine-500: #00a16f;
  --color-aquamarine-600: #008159;
  --color-aquamarine-700: #006745;
  --color-aquamarine-800: #005035;
  --color-aquamarine-900: #003e28;
  --color-aquamarine-950: #002718;
  --color-opal-green: #007c5a;
  --color-opal-green-50: #dbffee;
  --color-opal-green-100: #c1fae0;
  --color-opal-green-200: #a3e8ca;
  --color-opal-green-300: #82d3b1;
  --color-opal-green-400: #57b490;
  --color-opal-green-500: #339874;
  --color-opal-green-600: #007c5a;
  --color-opal-green-700: #006347;
  --color-opal-green-800: #004d37;
  --color-opal-green-900: #003c2a;
  --color-opal-green-950: #002619;
  --color-mintastic: #b3fbdb;
  --color-mintastic-50: #d6feeb;
  --color-mintastic-100: #b3fbdb;
  --color-mintastic-200: #afe3cb;
  --color-mintastic-300: #93cfb4;
  --color-mintastic-400: #6eb194;
  --color-mintastic-500: #509579;
  --color-mintastic-600: #357a60;
  --color-mintastic-700: #21634b;
  --color-mintastic-800: #124e39;
  --color-mintastic-900: #073d2b;
  --color-mintastic-950: #02261a;
}