Zucchini to Manga Pink Color Palette

About this palette

Zucchini to Manga Pink is a 5-color cool, vintage palette: #004A35 (Zucchini), #28795D (Opal Green), #5FA38B (Emerald Oasis), #D288B1 (Kiss), #F5B9D6 (Manga Pink). It mixes turquoise, pink tones and feels cool overall. The strongest text pairing is #004A35 on #F5B9D6 with a contrast ratio of 6.30:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Zucchini	rgb(0, 74, 53)	hsl(163, 100%, 15%)
Opal Green	rgb(40, 121, 93)	hsl(159, 50%, 32%)
Emerald Oasis	rgb(95, 163, 139)	hsl(159, 27%, 51%)
Kiss	rgb(210, 136, 177)	hsl(327, 45%, 68%)
Manga Pink	rgb(245, 185, 214)	hsl(331, 75%, 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.

Aa6.30:1 Good#004A35 on #F5B9D6
Aa6.30:1 Good#F5B9D6 on #004A35
Aa3.89:1 Poor#004A35 on #D288B1
Aa3.89:1 Poor#D288B1 on #004A35
Aa3.50:1 Poor#004A35 on #5FA38B
Aa3.50:1 Poor#5FA38B on #004A35
Aa3.21:1 Poor#28795D on #F5B9D6
Aa3.21:1 Poor#F5B9D6 on #28795D

Color blindness preview

CSS variables

/* Zucchini to Manga Pink — https://swatchly.xyz/palette/004a35-28795d-5fa38b-d288b1-f5b9d6 */
:root {
  --zucchini: #004a35;
  --opal-green: #28795d;
  --emerald-oasis: #5fa38b;
  --kiss: #d288b1;
  --manga-pink: #f5b9d6;
}

Tailwind CSS v4

/* Zucchini to Manga Pink — https://swatchly.xyz/palette/004a35-28795d-5fa38b-d288b1-f5b9d6 */
@theme {
  --color-zucchini: #004a35;
  --color-zucchini-50: #dcffef;
  --color-zucchini-100: #cff6e4;
  --color-zucchini-200: #b6e4cf;
  --color-zucchini-300: #98ceb7;
  --color-zucchini-400: #73ae96;
  --color-zucchini-500: #55927a;
  --color-zucchini-600: #3a765f;
  --color-zucchini-700: #265d49;
  --color-zucchini-800: #004a35;
  --color-zucchini-900: #0d3829;
  --color-zucchini-950: #052318;
  --color-opal-green: #28795d;
  --color-opal-green-50: #dbffef;
  --color-opal-green-100: #c8f7e2;
  --color-opal-green-200: #ace5cc;
  --color-opal-green-300: #8ed0b4;
  --color-opal-green-400: #67b193;
  --color-opal-green-500: #479577;
  --color-opal-green-600: #28795d;
  --color-opal-green-700: #156148;
  --color-opal-green-800: #054d37;
  --color-opal-green-900: #003c2a;
  --color-opal-green-950: #002619;
  --color-emerald-oasis: #5fa38b;
  --color-emerald-oasis-50: #e4fff4;
  --color-emerald-oasis-100: #d3fbeb;
  --color-emerald-oasis-200: #bcebd8;
  --color-emerald-oasis-300: #a1d8c3;
  --color-emerald-oasis-400: #7dbca5;
  --color-emerald-oasis-500: #5fa38b;
  --color-emerald-oasis-600: #41856e;
  --color-emerald-oasis-700: #2a6b56;
  --color-emerald-oasis-800: #185442;
  --color-emerald-oasis-900: #0b4031;
  --color-emerald-oasis-950: #03281d;
  --color-kiss: #d288b1;
  --color-kiss-50: #fff1f8;
  --color-kiss-100: #ffe3f1;
  --color-kiss-200: #ffc5e3;
  --color-kiss-300: #edabcf;
  --color-kiss-400: #d288b1;
  --color-kiss-500: #b46d95;
  --color-kiss-600: #965379;
  --color-kiss-700: #7b3e61;
  --color-kiss-800: #632d4d;
  --color-kiss-900: #4e213b;
  --color-kiss-950: #321225;
  --color-manga-pink: #f5b9d6;
  --color-manga-pink-50: #ffe6f2;
  --color-manga-pink-100: #ffd5e9;
  --color-manga-pink-200: #f5b9d6;
  --color-manga-pink-300: #dba7c0;
  --color-manga-pink-400: #bf88a3;
  --color-manga-pink-500: #a56e89;
  --color-manga-pink-600: #8a5670;
  --color-manga-pink-700: #71435b;
  --color-manga-pink-800: #5c3348;
  --color-manga-pink-900: #482638;
  --color-manga-pink-950: #2f1623;
}