Isle of Dreams to Marshland color palette

BCD1B7Isle of Dreams B8AB93Coffee Diva 898761Iguana 60533DVolcanic Island 434027Madras 252C1DMarshland

Open in generator Export PNG, PDF, ASE…

About this palette

Isle of Dreams to Marshland is a 6-color muted, warm, earthy palette: #BCD1B7 (Isle of Dreams), #B8AB93 (Coffee Diva), #898761 (Iguana), #60533D (Volcanic Island), #434027 (Madras), #252C1D (Marshland). It mixes green, yellow, brown, gray tones and feels warm overall. The strongest text pairing is #BCD1B7 on #252C1D with a contrast ratio of 8.88:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Isle of Dreams	rgb(188, 209, 183)	hsl(108, 22%, 77%)
Coffee Diva	rgb(184, 171, 147)	hsl(39, 21%, 65%)
Iguana	rgb(137, 135, 97)	hsl(57, 17%, 46%)
Volcanic Island	rgb(96, 83, 61)	hsl(38, 22%, 31%)
Madras	rgb(67, 64, 39)	hsl(54, 26%, 21%)
Marshland	rgb(37, 44, 29)	hsl(88, 21%, 14%)

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.

Aa8.88:1 Very good#BCD1B7 on #252C1D
Aa8.88:1 Very good#252C1D on #BCD1B7
Aa6.47:1 Good#BCD1B7 on #434027
Aa6.47:1 Good#434027 on #BCD1B7
Aa6.37:1 Good#B8AB93 on #252C1D
Aa6.37:1 Good#252C1D on #B8AB93
Aa4.64:1 Good#B8AB93 on #434027
Aa4.64:1 Good#434027 on #B8AB93

Color blindness preview

CSS variables

/* Isle of Dreams to Marshland — https://swatchly.xyz/palette/bcd1b7-b8ab93-898761-60533d-434027-252c1d */
:root {
  --isle-of-dreams: #bcd1b7;
  --coffee-diva: #b8ab93;
  --iguana: #898761;
  --volcanic-island: #60533d;
  --madras: #434027;
  --marshland: #252c1d;
}

Tailwind CSS v4

/* Isle of Dreams to Marshland — https://swatchly.xyz/palette/bcd1b7-b8ab93-898761-60533d-434027-252c1d */
@theme {
  --color-isle-of-dreams: #bcd1b7;
  --color-isle-of-dreams-50: #f2fef0;
  --color-isle-of-dreams-100: #e9f6e6;
  --color-isle-of-dreams-200: #d5e4d2;
  --color-isle-of-dreams-300: #bcd1b7;
  --color-isle-of-dreams-400: #9caf98;
  --color-isle-of-dreams-500: #7f927a;
  --color-isle-of-dreams-600: #63765f;
  --color-isle-of-dreams-700: #4c5d48;
  --color-isle-of-dreams-800: #3a4836;
  --color-isle-of-dreams-900: #2b3728;
  --color-isle-of-dreams-950: #192217;
  --color-coffee-diva: #b8ab93;
  --color-coffee-diva-50: #fff8ec;
  --color-coffee-diva-100: #f8f0e2;
  --color-coffee-diva-200: #e8decd;
  --color-coffee-diva-300: #d4c9b5;
  --color-coffee-diva-400: #b8ab93;
  --color-coffee-diva-500: #9a8e76;
  --color-coffee-diva-600: #7d715b;
  --color-coffee-diva-700: #645944;
  --color-coffee-diva-800: #4e4432;
  --color-coffee-diva-900: #3b3324;
  --color-coffee-diva-950: #241e14;
  --color-iguana: #898761;
  --color-iguana-50: #f7f6e0;
  --color-iguana-100: #edecd3;
  --color-iguana-200: #dad9bb;
  --color-iguana-300: #c4c2a0;
  --color-iguana-400: #a4a37d;
  --color-iguana-500: #898761;
  --color-iguana-600: #6f6d48;
  --color-iguana-700: #585635;
  --color-iguana-800: #454326;
  --color-iguana-900: #35341b;
  --color-iguana-950: #21200e;
  --color-volcanic-island: #60533d;
  --color-volcanic-island-50: #fdf4e6;
  --color-volcanic-island-100: #f3eada;
  --color-volcanic-island-200: #e1d6c3;
  --color-volcanic-island-300: #ccbfaa;
  --color-volcanic-island-400: #ad9f88;
  --color-volcanic-island-500: #92846d;
  --color-volcanic-island-600: #776a53;
  --color-volcanic-island-700: #60533d;
  --color-volcanic-island-800: #4b412f;
  --color-volcanic-island-900: #3a3122;
  --color-volcanic-island-950: #241e13;
  --color-madras: #434027;
  --color-madras-50: #f8f6e6;
  --color-madras-100: #eeecda;
  --color-madras-200: #dbd9c3;
  --color-madras-300: #c4c2a9;
  --color-madras-400: #a4a286;
  --color-madras-500: #89866a;
  --color-madras-600: #6d6b51;
  --color-madras-700: #56533c;
  --color-madras-800: #434027;
  --color-madras-900: #333120;
  --color-madras-950: #1f1e12;
  --color-marshland: #252c1d;
  --color-marshland-50: #f2f7ec;
  --color-marshland-100: #e8eee1;
  --color-marshland-200: #d3dacc;
  --color-marshland-300: #bcc4b4;
  --color-marshland-400: #9aa391;
  --color-marshland-500: #7d8674;
  --color-marshland-600: #626a59;
  --color-marshland-700: #4a5142;
  --color-marshland-800: #363c30;
  --color-marshland-900: #252c1d;
  --color-marshland-950: #161912;
}