Monster Monstera to Ink Black Color Palette

About this palette

Monster Monstera to Ink Black is a 5-color cool, earthy palette: #2E8452 (Monster Monstera), #1A5431 (Moor-Monster), #BD91B5 (Mauve Magic), #C9F3D9 (Jade Palace), #2A1C26 (Ink Black). It mixes green, pink, gray tones and feels cool overall. The strongest text pairing is #C9F3D9 on #2A1C26 with a contrast ratio of 13.39:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Monster Monstera	rgb(46, 132, 82)	hsl(145, 48%, 35%)
Moor-Monster	rgb(26, 84, 49)	hsl(144, 53%, 22%)
Mauve Magic	rgb(189, 145, 181)	hsl(311, 25%, 65%)
Jade Palace	rgb(201, 243, 217)	hsl(143, 64%, 87%)
Ink Black	rgb(42, 28, 38)	hsl(317, 20%, 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.

Aa13.39:1 Super#C9F3D9 on #2A1C26
Aa13.39:1 Super#2A1C26 on #C9F3D9
Aa7.34:1 Very good#1A5431 on #C9F3D9
Aa7.34:1 Very good#C9F3D9 on #1A5431
Aa6.10:1 Good#BD91B5 on #2A1C26
Aa6.10:1 Good#2A1C26 on #BD91B5
Aa3.81:1 Poor#2E8452 on #C9F3D9
Aa3.81:1 Poor#C9F3D9 on #2E8452

Color blindness preview

CSS variables

/* Monster Monstera to Ink Black — https://swatchly.xyz/palette/2e8452-1a5431-bd91b5-c9f3d9-2a1c26 */
:root {
  --monster-monstera: #2e8452;
  --moor-monster: #1a5431;
  --mauve-magic: #bd91b5;
  --jade-palace: #c9f3d9;
  --ink-black: #2a1c26;
}

Tailwind CSS v4

/* Monster Monstera to Ink Black — https://swatchly.xyz/palette/2e8452-1a5431-bd91b5-c9f3d9-2a1c26 */
@theme {
  --color-monster-monstera: #2e8452;
  --color-monster-monstera-50: #deffe7;
  --color-monster-monstera-100: #c9fbd8;
  --color-monster-monstera-200: #afeac1;
  --color-monster-monstera-300: #92d6a8;
  --color-monster-monstera-400: #6bb987;
  --color-monster-monstera-500: #4b9f6b;
  --color-monster-monstera-600: #2e8452;
  --color-monster-monstera-700: #166a3d;
  --color-monster-monstera-800: #02542c;
  --color-monster-monstera-900: #004121;
  --color-monster-monstera-950: #002912;
  --color-moor-monster: #1a5431;
  --color-moor-monster-50: #dfffe7;
  --color-moor-monster-100: #d2f6db;
  --color-moor-monster-200: #b9e4c5;
  --color-moor-monster-300: #9fd0ad;
  --color-moor-monster-400: #7cb28c;
  --color-moor-monster-500: #5f9871;
  --color-moor-monster-600: #467d58;
  --color-moor-monster-700: #326644;
  --color-moor-monster-800: #1a5431;
  --color-moor-monster-900: #174027;
  --color-moor-monster-950: #0b2916;
  --color-mauve-magic: #bd91b5;
  --color-mauve-magic-50: #fff0fc;
  --color-mauve-magic-100: #fee1f8;
  --color-mauve-magic-200: #eecbe7;
  --color-mauve-magic-300: #dab3d2;
  --color-mauve-magic-400: #bd91b5;
  --color-mauve-magic-500: #a07699;
  --color-mauve-magic-600: #845c7e;
  --color-mauve-magic-700: #6b4765;
  --color-mauve-magic-800: #553650;
  --color-mauve-magic-900: #43283f;
  --color-mauve-magic-950: #2b1828;
  --color-jade-palace: #c9f3d9;
  --color-jade-palace-50: #e1f9ea;
  --color-jade-palace-100: #c9f3d9;
  --color-jade-palace-200: #beddca;
  --color-jade-palace-300: #a5c8b2;
  --color-jade-palace-400: #84aa93;
  --color-jade-palace-500: #698f78;
  --color-jade-palace-600: #50755f;
  --color-jade-palace-700: #3c5e4a;
  --color-jade-palace-800: #2c4a39;
  --color-jade-palace-900: #20392b;
  --color-jade-palace-950: #112419;
  --color-ink-black: #2a1c26;
  --color-ink-black-50: #fcf1f9;
  --color-ink-black-100: #f3e7ef;
  --color-ink-black-200: #e1d3dc;
  --color-ink-black-300: #ccbbc6;
  --color-ink-black-400: #ad9ba8;
  --color-ink-black-500: #92808d;
  --color-ink-black-600: #786772;
  --color-ink-black-700: #60515c;
  --color-ink-black-800: #4c3f48;
  --color-ink-black-900: #3c3138;
  --color-ink-black-950: #2a1c26;
}