Everglade to Pretty in Pink Color Palette

About this palette

Everglade to Pretty in Pink is a 5-color warm, vintage palette: #223E2B (Everglade), #8E5583 (Grape Candy), #EA99CA (Pearly Pink), #679A7F (Paying Mantis), #F6BDE4 (Pretty in Pink). It mixes green, pink tones and feels warm overall. The strongest text pairing is #223E2B on #F6BDE4 with a contrast ratio of 7.43:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Everglade	rgb(34, 62, 43)	hsl(139, 29%, 19%)
Grape Candy	rgb(142, 85, 131)	hsl(312, 25%, 45%)
Pearly Pink	rgb(234, 153, 202)	hsl(324, 66%, 76%)
Paying Mantis	rgb(103, 154, 127)	hsl(148, 20%, 50%)
Pretty in Pink	rgb(246, 189, 228)	hsl(319, 76%, 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.

Aa7.43:1 Very good#223E2B on #F6BDE4
Aa7.43:1 Very good#F6BDE4 on #223E2B
Aa5.53:1 Good#223E2B on #EA99CA
Aa5.53:1 Good#EA99CA on #223E2B
Aa3.63:1 Poor#223E2B on #679A7F
Aa3.63:1 Poor#679A7F on #223E2B
Aa3.53:1 Poor#8E5583 on #F6BDE4
Aa3.53:1 Poor#F6BDE4 on #8E5583

Color blindness preview

CSS variables

/* Everglade to Pretty in Pink — https://swatchly.xyz/palette/223e2b-8e5583-ea99ca-679a7f-f6bde4 */
:root {
  --everglade: #223e2b;
  --grape-candy: #8e5583;
  --pearly-pink: #ea99ca;
  --paying-mantis: #679a7f;
  --pretty-in-pink: #f6bde4;
}

Tailwind CSS v4

/* Everglade to Pretty in Pink — https://swatchly.xyz/palette/223e2b-8e5583-ea99ca-679a7f-f6bde4 */
@theme {
  --color-everglade: #223e2b;
  --color-everglade-50: #e8fbed;
  --color-everglade-100: #ddf1e2;
  --color-everglade-200: #c7dfcd;
  --color-everglade-300: #aec9b5;
  --color-everglade-400: #8dab95;
  --color-everglade-500: #72917a;
  --color-everglade-600: #597661;
  --color-everglade-700: #45604c;
  --color-everglade-800: #344c3b;
  --color-everglade-900: #223e2b;
  --color-everglade-950: #17261c;
  --color-grape-candy: #8e5583;
  --color-grape-candy-50: #fff0fb;
  --color-grape-candy-100: #ffe1f8;
  --color-grape-candy-200: #f6c6eb;
  --color-grape-candy-300: #e3add7;
  --color-grape-candy-400: #c68bba;
  --color-grape-candy-500: #aa6f9e;
  --color-grape-candy-600: #8e5583;
  --color-grape-candy-700: #73416a;
  --color-grape-candy-800: #5c3054;
  --color-grape-candy-900: #492342;
  --color-grape-candy-950: #2f142a;
  --color-pearly-pink: #ea99ca;
  --color-pearly-pink-50: #ffe9f5;
  --color-pearly-pink-100: #ffd7ee;
  --color-pearly-pink-200: #f9b8de;
  --color-pearly-pink-300: #ea99ca;
  --color-pearly-pink-400: #c97dab;
  --color-pearly-pink-500: #ae6392;
  --color-pearly-pink-600: #924b78;
  --color-pearly-pink-700: #793861;
  --color-pearly-pink-800: #62294e;
  --color-pearly-pink-900: #4f1e3e;
  --color-pearly-pink-950: #331027;
  --color-paying-mantis: #679a7f;
  --color-paying-mantis-50: #e2ffee;
  --color-paying-mantis-100: #d7f7e5;
  --color-paying-mantis-200: #c0e6d0;
  --color-paying-mantis-300: #a6d2b9;
  --color-paying-mantis-400: #83b49a;
  --color-paying-mantis-500: #679a7f;
  --color-paying-mantis-600: #4c7e64;
  --color-paying-mantis-700: #36654d;
  --color-paying-mantis-800: #264f3b;
  --color-paying-mantis-900: #1a3d2c;
  --color-paying-mantis-950: #0c261a;
  --color-pretty-in-pink: #f6bde4;
  --color-pretty-in-pink-50: #ffeaf8;
  --color-pretty-in-pink-100: #ffd9f2;
  --color-pretty-in-pink-200: #f6bde4;
  --color-pretty-in-pink-300: #dbabcc;
  --color-pretty-in-pink-400: #bf8baf;
  --color-pretty-in-pink-500: #a47094;
  --color-pretty-in-pink-600: #88577a;
  --color-pretty-in-pink-700: #704363;
  --color-pretty-in-pink-800: #5a334f;
  --color-pretty-in-pink-900: #47263d;
  --color-pretty-in-pink-950: #2d1627;
}