Everglade to Isle of Dreams color palette

2D4238Everglade AC8A92Punched Pink FFE9ECPink Lemonade 4B7987Mysterious Blue BACEC1Isle of Dreams

About this palette

Everglade to Isle of Dreams is a 5-color muted palette: #2D4238 (Everglade), #AC8A92 (Punched Pink), #FFE9EC (Pink Lemonade), #4B7987 (Mysterious Blue), #BACEC1 (Isle of Dreams). It mixes gray, pink, white, blue tones and feels balanced overall. The strongest text pairing is #2D4238 on #FFE9EC with a contrast ratio of 9.30:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Everglade	rgb(45, 66, 56)	hsl(151, 19%, 22%)
Punched Pink	rgb(172, 138, 146)	hsl(346, 17%, 61%)
Pink Lemonade	rgb(255, 233, 236)	hsl(352, 100%, 96%)
Mysterious Blue	rgb(75, 121, 135)	hsl(194, 29%, 41%)
Isle of Dreams	rgb(186, 206, 193)	hsl(141, 17%, 77%)

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.

Aa9.30:1 Very good#2D4238 on #FFE9EC
Aa9.30:1 Very good#FFE9EC on #2D4238
Aa6.51:1 Good#2D4238 on #BACEC1
Aa6.51:1 Good#BACEC1 on #2D4238
Aa4.13:1 Poor#FFE9EC on #4B7987
Aa4.13:1 Poor#4B7987 on #FFE9EC
Aa3.49:1 Poor#2D4238 on #AC8A92
Aa3.49:1 Poor#AC8A92 on #2D4238

Color blindness preview

CSS variables

/* Everglade to Isle of Dreams — https://swatchly.xyz/palette/2d4238-ac8a92-ffe9ec-4b7987-bacec1 */
:root {
  --everglade: #2d4238;
  --punched-pink: #ac8a92;
  --pink-lemonade: #ffe9ec;
  --mysterious-blue: #4b7987;
  --isle-of-dreams: #bacec1;
}

Tailwind CSS v4

/* Everglade to Isle of Dreams — https://swatchly.xyz/palette/2d4238-ac8a92-ffe9ec-4b7987-bacec1 */
@theme {
  --color-everglade: #2d4238;
  --color-everglade-50: #ebf9f2;
  --color-everglade-100: #e0f0e8;
  --color-everglade-200: #caddd3;
  --color-everglade-300: #b1c6bb;
  --color-everglade-400: #8fa69a;
  --color-everglade-500: #72897e;
  --color-everglade-600: #586d63;
  --color-everglade-700: #42554c;
  --color-everglade-800: #2d4238;
  --color-everglade-900: #24322b;
  --color-everglade-950: #151e1a;
  --color-punched-pink: #ac8a92;
  --color-punched-pink-50: #ffeaef;
  --color-punched-pink-100: #f6dde2;
  --color-punched-pink-200: #e3c6cc;
  --color-punched-pink-300: #ccacb3;
  --color-punched-pink-400: #ac8a92;
  --color-punched-pink-500: #927179;
  --color-punched-pink-600: #795a61;
  --color-punched-pink-700: #62474d;
  --color-punched-pink-800: #4f373d;
  --color-punched-pink-900: #3f2b30;
  --color-punched-pink-950: #291a1e;
  --color-pink-lemonade: #ffe9ec;
  --color-pink-lemonade-50: #fff6f7;
  --color-pink-lemonade-100: #ffe9ec;
  --color-pink-lemonade-200: #e6d6d8;
  --color-pink-lemonade-300: #d0bec1;
  --color-pink-lemonade-400: #b19ea0;
  --color-pink-lemonade-500: #958284;
  --color-pink-lemonade-600: #79676a;
  --color-pink-lemonade-700: #615053;
  --color-pink-lemonade-800: #4c3e40;
  --color-pink-lemonade-900: #3b2f31;
  --color-pink-lemonade-950: #251d1e;
  --color-mysterious-blue: #4b7987;
  --color-mysterious-blue-50: #e6f9ff;
  --color-mysterious-blue-100: #d5f2fc;
  --color-mysterious-blue-200: #bde0ec;
  --color-mysterious-blue-300: #a3ccd8;
  --color-mysterious-blue-400: #81aebc;
  --color-mysterious-blue-500: #6593a1;
  --color-mysterious-blue-600: #4b7987;
  --color-mysterious-blue-700: #36616d;
  --color-mysterious-blue-800: #264c57;
  --color-mysterious-blue-900: #1a3a44;
  --color-mysterious-blue-950: #0d242b;
  --color-isle-of-dreams: #bacec1;
  --color-isle-of-dreams-50: #f1fcf5;
  --color-isle-of-dreams-100: #e8f4ec;
  --color-isle-of-dreams-200: #d4e2d8;
  --color-isle-of-dreams-300: #bacec1;
  --color-isle-of-dreams-400: #9aada1;
  --color-isle-of-dreams-500: #7d9084;
  --color-isle-of-dreams-600: #627469;
  --color-isle-of-dreams-700: #4c5c52;
  --color-isle-of-dreams-800: #39473e;
  --color-isle-of-dreams-900: #2a362f;
  --color-isle-of-dreams-950: #19221c;
}