Melanzane to Monster Monstera color palette

342237Melanzane DCE3FFVeiling Waterfalls 705A31Olivary B4A168Packing Paper 478257Monster Monstera

About this palette

Melanzane to Monster Monstera is a 5-color cool, earthy, vintage palette: #342237 (Melanzane), #DCE3FF (Veiling Waterfalls), #705A31 (Olivary), #B4A168 (Packing Paper), #478257 (Monster Monstera). It mixes purple, blue, brown, yellow, green tones and feels cool overall. The strongest text pairing is #342237 on #DCE3FF with a contrast ratio of 11.52:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Melanzane	rgb(52, 34, 55)	hsl(291, 24%, 17%)
Veiling Waterfalls	rgb(220, 227, 255)	hsl(228, 100%, 93%)
Olivary	rgb(112, 90, 49)	hsl(39, 39%, 32%)
Packing Paper	rgb(180, 161, 104)	hsl(45, 34%, 56%)
Monster Monstera	rgb(71, 130, 87)	hsl(136, 29%, 39%)

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.

Aa11.52:1 Very good#342237 on #DCE3FF
Aa11.52:1 Very good#DCE3FF on #342237
Aa5.76:1 Good#342237 on #B4A168
Aa5.76:1 Good#B4A168 on #342237
Aa5.16:1 Good#DCE3FF on #705A31
Aa5.16:1 Good#705A31 on #DCE3FF
Aa3.58:1 Poor#DCE3FF on #478257
Aa3.58:1 Poor#478257 on #DCE3FF

Color blindness preview

CSS variables

/* Melanzane to Monster Monstera — https://swatchly.xyz/palette/342237-dce3ff-705a31-b4a168-478257 */
:root {
  --melanzane: #342237;
  --veiling-waterfalls: #dce3ff;
  --olivary: #705a31;
  --packing-paper: #b4a168;
  --monster-monstera: #478257;
}

Tailwind CSS v4

/* Melanzane to Monster Monstera — https://swatchly.xyz/palette/342237-dce3ff-705a31-b4a168-478257 */
@theme {
  --color-melanzane: #342237;
  --color-melanzane-50: #fdf0ff;
  --color-melanzane-100: #f4e5f7;
  --color-melanzane-200: #e2d1e5;
  --color-melanzane-300: #cdb9d0;
  --color-melanzane-400: #ad97b0;
  --color-melanzane-500: #907a93;
  --color-melanzane-600: #735e76;
  --color-melanzane-700: #59475c;
  --color-melanzane-800: #433446;
  --color-melanzane-900: #342237;
  --color-melanzane-950: #1d151e;
  --color-veiling-waterfalls: #dce3ff;
  --color-veiling-waterfalls-50: #eaefff;
  --color-veiling-waterfalls-100: #dce3ff;
  --color-veiling-waterfalls-200: #cbd1e6;
  --color-veiling-waterfalls-300: #b5bbd3;
  --color-veiling-waterfalls-400: #979db6;
  --color-veiling-waterfalls-500: #7d839c;
  --color-veiling-waterfalls-600: #646981;
  --color-veiling-waterfalls-700: #4f546a;
  --color-veiling-waterfalls-800: #3d4154;
  --color-veiling-waterfalls-900: #2e3242;
  --color-veiling-waterfalls-950: #1c1f2a;
  --color-olivary: #705a31;
  --color-olivary-50: #fff4e0;
  --color-olivary-100: #f9e9ce;
  --color-olivary-200: #e9d7b7;
  --color-olivary-300: #d6c19d;
  --color-olivary-400: #baa37a;
  --color-olivary-500: #a0895f;
  --color-olivary-600: #867046;
  --color-olivary-700: #705a31;
  --color-olivary-800: #584623;
  --color-olivary-900: #453517;
  --color-olivary-950: #2c210b;
  --color-packing-paper: #b4a168;
  --color-packing-paper-50: #fff5d8;
  --color-packing-paper-100: #f7ebc7;
  --color-packing-paper-200: #e6d7ad;
  --color-packing-paper-300: #d1c190;
  --color-packing-paper-400: #b4a168;
  --color-packing-paper-500: #98854d;
  --color-packing-paper-600: #7d6b34;
  --color-packing-paper-700: #645420;
  --color-packing-paper-800: #4f4112;
  --color-packing-paper-900: #3e3209;
  --color-packing-paper-950: #271e03;
  --color-monster-monstera: #478257;
  --color-monster-monstera-50: #dfffe5;
  --color-monster-monstera-100: #d2f8da;
  --color-monster-monstera-200: #bbe7c4;
  --color-monster-monstera-300: #a1d4ac;
  --color-monster-monstera-400: #7db68b;
  --color-monster-monstera-500: #619c70;
  --color-monster-monstera-600: #478257;
  --color-monster-monstera-700: #326841;
  --color-monster-monstera-800: #215230;
  --color-monster-monstera-900: #154023;
  --color-monster-monstera-950: #092813;
}