Glaucous Green to Murasaki Color Palette

About this palette

Glaucous Green to Murasaki is a 5-color cool palette: #B1E2BB (Glaucous Green), #87AE83 (Verdant Haven), #0099B0 (Munsell Blue), #A03F1E (Muddy), #4F264F (Murasaki). It mixes green, turquoise, red, purple tones and feels cool overall. The strongest text pairing is #B1E2BB on #4F264F with a contrast ratio of 8.40:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Glaucous Green	rgb(177, 226, 187)	hsl(132, 46%, 79%)
Verdant Haven	rgb(135, 174, 131)	hsl(114, 21%, 60%)
Munsell Blue	rgb(0, 153, 176)	hsl(188, 100%, 35%)
Muddy	rgb(160, 63, 30)	hsl(15, 68%, 37%)
Murasaki	rgb(79, 38, 79)	hsl(300, 35%, 23%)

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.40:1 Very good#B1E2BB on #4F264F
Aa8.40:1 Very good#4F264F on #B1E2BB
Aa4.88:1 Good#87AE83 on #4F264F
Aa4.88:1 Good#4F264F on #87AE83
Aa4.49:1 Poor#B1E2BB on #A03F1E
Aa4.49:1 Poor#A03F1E on #B1E2BB
Aa3.59:1 Poor#0099B0 on #4F264F
Aa3.59:1 Poor#4F264F on #0099B0

Color blindness preview

CSS variables

/* Glaucous Green to Murasaki — https://swatchly.xyz/palette/b1e2bb-87ae83-0099b0-a03f1e-4f264f */
:root {
  --glaucous-green: #b1e2bb;
  --verdant-haven: #87ae83;
  --munsell-blue: #0099b0;
  --muddy: #a03f1e;
  --murasaki: #4f264f;
}

Tailwind CSS v4

/* Glaucous Green to Murasaki — https://swatchly.xyz/palette/b1e2bb-87ae83-0099b0-a03f1e-4f264f */
@theme {
  --color-glaucous-green: #b1e2bb;
  --color-glaucous-green-50: #dffbe4;
  --color-glaucous-green-100: #d2f1d8;
  --color-glaucous-green-200: #b1e2bb;
  --color-glaucous-green-300: #a0caa9;
  --color-glaucous-green-400: #7fac88;
  --color-glaucous-green-500: #63916d;
  --color-glaucous-green-600: #4a7755;
  --color-glaucous-green-700: #375f41;
  --color-glaucous-green-800: #284c31;
  --color-glaucous-green-900: #1c3b24;
  --color-glaucous-green-950: #0f2515;
  --color-verdant-haven: #87ae83;
  --color-verdant-haven-50: #e6fde4;
  --color-verdant-haven-100: #daf4d7;
  --color-verdant-haven-200: #c3e2c0;
  --color-verdant-haven-300: #aacca6;
  --color-verdant-haven-400: #87ae83;
  --color-verdant-haven-500: #6c9268;
  --color-verdant-haven-600: #53774f;
  --color-verdant-haven-700: #3e5f3b;
  --color-verdant-haven-800: #2e4b2b;
  --color-verdant-haven-900: #213a1f;
  --color-verdant-haven-950: #132411;
  --color-munsell-blue: #0099b0;
  --color-munsell-blue-50: #e5faff;
  --color-munsell-blue-100: #c9f5ff;
  --color-munsell-blue-200: #99e7f9;
  --color-munsell-blue-300: #75d3e7;
  --color-munsell-blue-400: #43b4cb;
  --color-munsell-blue-500: #0099b0;
  --color-munsell-blue-600: #007b8e;
  --color-munsell-blue-700: #006271;
  --color-munsell-blue-800: #004c59;
  --color-munsell-blue-900: #003b45;
  --color-munsell-blue-950: #00252c;
  --color-muddy: #a03f1e;
  --color-muddy-50: #fff2ee;
  --color-muddy-100: #ffe2d9;
  --color-muddy-200: #ffc4b1;
  --color-muddy-300: #fea082;
  --color-muddy-400: #df7b5a;
  --color-muddy-500: #c05c3c;
  --color-muddy-600: #a03f1e;
  --color-muddy-700: #822e11;
  --color-muddy-800: #6a2105;
  --color-muddy-900: #541601;
  --color-muddy-950: #380b00;
  --color-murasaki: #4f264f;
  --color-murasaki-50: #ffeffe;
  --color-murasaki-100: #ffe0fe;
  --color-murasaki-200: #efc9ee;
  --color-murasaki-300: #dbb1da;
  --color-murasaki-400: #bf91bd;
  --color-murasaki-500: #a476a3;
  --color-murasaki-600: #895d89;
  --color-murasaki-700: #714871;
  --color-murasaki-800: #5c385c;
  --color-murasaki-900: #4f264f;
  --color-murasaki-950: #311a31;
}