Such a Peach to Nightlife color palette

FFDDB2Such a Peach D8A710Honeycomb 65A847Jungle Jewels 3F9117Kelp Forest 7E469APurple Pleasures 2D4069Nightlife

Open in generator Export PNG, PDF, ASE…

About this palette

Such a Peach to Nightlife is a 6-color cool palette: #FFDDB2 (Such a Peach), #D8A710 (Honeycomb), #65A847 (Jungle Jewels), #3F9117 (Kelp Forest), #7E469A (Purple Pleasures), #2D4069 (Nightlife). It mixes orange, yellow, green, purple, blue tones and feels cool overall. The strongest text pairing is #FFDDB2 on #2D4069 with a contrast ratio of 7.92:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Such a Peach	rgb(255, 221, 178)	hsl(34, 100%, 85%)
Honeycomb	rgb(216, 167, 16)	hsl(45, 86%, 45%)
Jungle Jewels	rgb(101, 168, 71)	hsl(101, 41%, 47%)
Kelp Forest	rgb(63, 145, 23)	hsl(100, 73%, 33%)
Purple Pleasures	rgb(126, 70, 154)	hsl(280, 37%, 44%)
Nightlife	rgb(45, 64, 105)	hsl(221, 40%, 29%)

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.

Aa7.92:1 Very good#FFDDB2 on #2D4069
Aa7.92:1 Very good#2D4069 on #FFDDB2
Aa5.03:1 Good#FFDDB2 on #7E469A
Aa5.03:1 Good#7E469A on #FFDDB2
Aa4.61:1 Good#D8A710 on #2D4069
Aa4.61:1 Good#2D4069 on #D8A710
Aa3.54:1 Poor#65A847 on #2D4069
Aa3.54:1 Poor#2D4069 on #65A847

Color blindness preview

CSS variables

/* Such a Peach to Nightlife — https://swatchly.xyz/palette/ffddb2-d8a710-65a847-3f9117-7e469a-2d4069 */
:root {
  --such-a-peach: #ffddb2;
  --honeycomb: #d8a710;
  --jungle-jewels: #65a847;
  --kelp-forest: #3f9117;
  --purple-pleasures: #7e469a;
  --nightlife: #2d4069;
}

Tailwind CSS v4

/* Such a Peach to Nightlife — https://swatchly.xyz/palette/ffddb2-d8a710-65a847-3f9117-7e469a-2d4069 */
@theme {
  --color-such-a-peach: #ffddb2;
  --color-such-a-peach-50: #ffebd2;
  --color-such-a-peach-100: #ffddb2;
  --color-such-a-peach-200: #e6ccac;
  --color-such-a-peach-300: #d3b792;
  --color-such-a-peach-400: #b79870;
  --color-such-a-peach-500: #9d7e56;
  --color-such-a-peach-600: #82653e;
  --color-such-a-peach-700: #6a502c;
  --color-such-a-peach-800: #553d1e;
  --color-such-a-peach-900: #422f13;
  --color-such-a-peach-950: #2a1c09;
  --color-honeycomb: #d8a710;
  --color-honeycomb-50: #fff9ed;
  --color-honeycomb-100: #fff1d2;
  --color-honeycomb-200: #ffdd8f;
  --color-honeycomb-300: #efc769;
  --color-honeycomb-400: #d8a710;
  --color-honeycomb-500: #b48a00;
  --color-honeycomb-600: #916e00;
  --color-honeycomb-700: #735700;
  --color-honeycomb-800: #594300;
  --color-honeycomb-900: #433200;
  --color-honeycomb-950: #291d00;
  --color-jungle-jewels: #65a847;
  --color-jungle-jewels-50: #d5fec5;
  --color-jungle-jewels-100: #c5f4b3;
  --color-jungle-jewels-200: #a9e093;
  --color-jungle-jewels-300: #8bc972;
  --color-jungle-jewels-400: #65a847;
  --color-jungle-jewels-500: #4c8e2c;
  --color-jungle-jewels-600: #367510;
  --color-jungle-jewels-700: #275e00;
  --color-jungle-jewels-800: #1d4b00;
  --color-jungle-jewels-900: #153b00;
  --color-jungle-jewels-950: #0b2700;
  --color-kelp-forest: #3f9117;
  --color-kelp-forest-50: #ddffd2;
  --color-kelp-forest-100: #c3f9b1;
  --color-kelp-forest-200: #a6e690;
  --color-kelp-forest-300: #86cf6d;
  --color-kelp-forest-400: #5faf40;
  --color-kelp-forest-500: #3f9117;
  --color-kelp-forest-600: #2d7600;
  --color-kelp-forest-700: #225e00;
  --color-kelp-forest-800: #194a00;
  --color-kelp-forest-900: #123a00;
  --color-kelp-forest-950: #082500;
  --color-purple-pleasures: #7e469a;
  --color-purple-pleasures-50: #faf1ff;
  --color-purple-pleasures-100: #f4e1ff;
  --color-purple-pleasures-200: #e9c3ff;
  --color-purple-pleasures-300: #d7a4f4;
  --color-purple-pleasures-400: #b880d6;
  --color-purple-pleasures-500: #9b62b8;
  --color-purple-pleasures-600: #7e469a;
  --color-purple-pleasures-700: #65357d;
  --color-purple-pleasures-800: #512666;
  --color-purple-pleasures-900: #401b51;
  --color-purple-pleasures-950: #290f35;
  --color-nightlife: #2d4069;
  --color-nightlife-50: #f0f5ff;
  --color-nightlife-100: #e2ebff;
  --color-nightlife-200: #c5d8fd;
  --color-nightlife-300: #acc1eb;
  --color-nightlife-400: #8ba1cf;
  --color-nightlife-500: #6f85b3;
  --color-nightlife-600: #566a96;
  --color-nightlife-700: #41547b;
  --color-nightlife-800: #2d4069;
  --color-nightlife-900: #24314e;
  --color-nightlife-950: #141e33;
}