Oh so Pink to Midnight Pines color palette

EAC8D1Oh so Pink BFA7DBEnchanted Lavender 836D9CPurple Haze 31543CHighlander 142718Midnight Pines

About this palette

Oh so Pink to Midnight Pines is a 5-color muted, cool palette: #EAC8D1 (Oh so Pink), #BFA7DB (Enchanted Lavender), #836D9C (Purple Haze), #31543C (Highlander), #142718 (Midnight Pines). It mixes pink, purple, green tones and feels cool overall. The strongest text pairing is #EAC8D1 on #142718 with a contrast ratio of 10.26:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oh so Pink	rgb(234, 200, 209)	hsl(344, 45%, 85%)
Enchanted Lavender	rgb(191, 167, 219)	hsl(268, 42%, 76%)
Purple Haze	rgb(131, 109, 156)	hsl(268, 19%, 52%)
Highlander	rgb(49, 84, 60)	hsl(139, 26%, 26%)
Midnight Pines	rgb(20, 39, 24)	hsl(133, 32%, 12%)

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.

Aa10.26:1 Very good#EAC8D1 on #142718
Aa10.26:1 Very good#142718 on #EAC8D1
Aa7.33:1 Very good#BFA7DB on #142718
Aa7.33:1 Very good#142718 on #BFA7DB
Aa5.55:1 Good#EAC8D1 on #31543C
Aa5.55:1 Good#31543C on #EAC8D1
Aa3.96:1 Poor#BFA7DB on #31543C
Aa3.96:1 Poor#31543C on #BFA7DB

Color blindness preview

CSS variables

/* Oh so Pink to Midnight Pines — https://swatchly.xyz/palette/eac8d1-bfa7db-836d9c-31543c-142718 */
:root {
  --oh-so-pink: #eac8d1;
  --enchanted-lavender: #bfa7db;
  --purple-haze: #836d9c;
  --highlander: #31543c;
  --midnight-pines: #142718;
}

Tailwind CSS v4

/* Oh so Pink to Midnight Pines — https://swatchly.xyz/palette/eac8d1-bfa7db-836d9c-31543c-142718 */
@theme {
  --color-oh-so-pink: #eac8d1;
  --color-oh-so-pink-50: #ffecf1;
  --color-oh-so-pink-100: #f7e0e6;
  --color-oh-so-pink-200: #eac8d1;
  --color-oh-so-pink-300: #d1b4bc;
  --color-oh-so-pink-400: #b4959d;
  --color-oh-so-pink-500: #997a83;
  --color-oh-so-pink-600: #7e6169;
  --color-oh-so-pink-700: #664c54;
  --color-oh-so-pink-800: #523b41;
  --color-oh-so-pink-900: #402d32;
  --color-oh-so-pink-950: #291b1f;
  --color-enchanted-lavender: #bfa7db;
  --color-enchanted-lavender-50: #f3e9ff;
  --color-enchanted-lavender-100: #ead9fe;
  --color-enchanted-lavender-200: #d5c2ed;
  --color-enchanted-lavender-300: #bfa7db;
  --color-enchanted-lavender-400: #a28bbc;
  --color-enchanted-lavender-500: #8972a3;
  --color-enchanted-lavender-600: #705a88;
  --color-enchanted-lavender-700: #5b4770;
  --color-enchanted-lavender-800: #49375c;
  --color-enchanted-lavender-900: #3a2b4a;
  --color-enchanted-lavender-950: #241930;
  --color-purple-haze: #836d9c;
  --color-purple-haze-50: #f8f2ff;
  --color-purple-haze-100: #f2e9ff;
  --color-purple-haze-200: #e5d4f9;
  --color-purple-haze-300: #d1bee9;
  --color-purple-haze-400: #b5a0ce;
  --color-purple-haze-500: #9c86b6;
  --color-purple-haze-600: #836d9c;
  --color-purple-haze-700: #695580;
  --color-purple-haze-800: #534167;
  --color-purple-haze-900: #403051;
  --color-purple-haze-950: #281d34;
  --color-highlander: #31543c;
  --color-highlander-50: #e6fceb;
  --color-highlander-100: #daf3e0;
  --color-highlander-200: #c3e0cb;
  --color-highlander-300: #abccb4;
  --color-highlander-400: #8baf95;
  --color-highlander-500: #70957b;
  --color-highlander-600: #587c62;
  --color-highlander-700: #44664e;
  --color-highlander-800: #31543c;
  --color-highlander-900: #26412e;
  --color-highlander-950: #16291c;
  --color-midnight-pines: #142718;
  --color-midnight-pines-50: #ecf9ee;
  --color-midnight-pines-100: #e1f0e3;
  --color-midnight-pines-200: #cbddce;
  --color-midnight-pines-300: #b3c7b6;
  --color-midnight-pines-400: #92a896;
  --color-midnight-pines-500: #778d7b;
  --color-midnight-pines-600: #5e7361;
  --color-midnight-pines-700: #495d4c;
  --color-midnight-pines-800: #38493b;
  --color-midnight-pines-900: #2b392d;
  --color-midnight-pines-950: #142718;
}