Moor-Monster to Tutu color palette

235036Moor-Monster 328656Monster Monstera 5C66B9Bellflower 7395C9King Neptune E3A3A4Pastel Pink FFE4E3Tutu

Open in generator Export PNG, PDF, ASE…

About this palette

Moor-Monster to Tutu is a 6-color cool palette: #235036 (Moor-Monster), #328656 (Monster Monstera), #5C66B9 (Bellflower), #7395C9 (King Neptune), #E3A3A4 (Pastel Pink), #FFE4E3 (Tutu). It mixes green, purple, blue, red, white tones and feels cool overall. The strongest text pairing is #235036 on #FFE4E3 with a contrast ratio of 7.68:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Moor-Monster	rgb(35, 80, 54)	hsl(145, 39%, 23%)
Monster Monstera	rgb(50, 134, 86)	hsl(146, 46%, 36%)
Bellflower	rgb(92, 102, 185)	hsl(234, 40%, 54%)
King Neptune	rgb(115, 149, 201)	hsl(216, 44%, 62%)
Pastel Pink	rgb(227, 163, 164)	hsl(359, 53%, 76%)
Tutu	rgb(255, 228, 227)	hsl(2, 100%, 95%)

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.

Aa7.68:1 Very good#235036 on #FFE4E3
Aa7.68:1 Very good#FFE4E3 on #235036
Aa4.42:1 Poor#235036 on #E3A3A4
Aa4.42:1 Poor#E3A3A4 on #235036
Aa4.30:1 Poor#5C66B9 on #FFE4E3
Aa4.30:1 Poor#FFE4E3 on #5C66B9
Aa3.73:1 Poor#328656 on #FFE4E3
Aa3.73:1 Poor#FFE4E3 on #328656

Color blindness preview

CSS variables

/* Moor-Monster to Tutu — https://swatchly.xyz/palette/235036-328656-5c66b9-7395c9-e3a3a4-ffe4e3 */
:root {
  --moor-monster: #235036;
  --monster-monstera: #328656;
  --bellflower: #5c66b9;
  --king-neptune: #7395c9;
  --pastel-pink: #e3a3a4;
  --tutu: #ffe4e3;
}

Tailwind CSS v4

/* Moor-Monster to Tutu — https://swatchly.xyz/palette/235036-328656-5c66b9-7395c9-e3a3a4-ffe4e3 */
@theme {
  --color-moor-monster: #235036;
  --color-moor-monster-50: #e2fdeb;
  --color-moor-monster-100: #d6f4e0;
  --color-moor-monster-200: #bee2ca;
  --color-moor-monster-300: #a4cdb2;
  --color-moor-monster-400: #82af92;
  --color-moor-monster-500: #669477;
  --color-moor-monster-600: #4d7a5e;
  --color-moor-monster-700: #396249;
  --color-moor-monster-800: #235036;
  --color-moor-monster-900: #1d3d2a;
  --color-moor-monster-950: #0f2719;
  --color-monster-monstera: #328656;
  --color-monster-monstera-50: #deffe8;
  --color-monster-monstera-100: #cafbd9;
  --color-monster-monstera-200: #b0ebc3;
  --color-monster-monstera-300: #94d7ab;
  --color-monster-monstera-400: #6eba8a;
  --color-monster-monstera-500: #4fa06f;
  --color-monster-monstera-600: #328656;
  --color-monster-monstera-700: #1a6c40;
  --color-monster-monstera-800: #05552f;
  --color-monster-monstera-900: #004222;
  --color-monster-monstera-950: #002a14;
  --color-bellflower: #5c66b9;
  --color-bellflower-50: #f2f5ff;
  --color-bellflower-100: #e6ebff;
  --color-bellflower-200: #ced6ff;
  --color-bellflower-300: #b2beff;
  --color-bellflower-400: #8f9cf0;
  --color-bellflower-500: #7581d6;
  --color-bellflower-600: #5c66b9;
  --color-bellflower-700: #474f9a;
  --color-bellflower-800: #363c7e;
  --color-bellflower-900: #282d65;
  --color-bellflower-950: #181b43;
  --color-king-neptune: #7395c9;
  --color-king-neptune-50: #f3f8ff;
  --color-king-neptune-100: #e8f1ff;
  --color-king-neptune-200: #cce0ff;
  --color-king-neptune-300: #afccf9;
  --color-king-neptune-400: #8eafe0;
  --color-king-neptune-500: #7395c9;
  --color-king-neptune-600: #5778a9;
  --color-king-neptune-700: #405e8c;
  --color-king-neptune-800: #2e4971;
  --color-king-neptune-900: #213759;
  --color-king-neptune-950: #112139;
  --color-pastel-pink: #e3a3a4;
  --color-pastel-pink-50: #ffeaea;
  --color-pastel-pink-100: #ffd9d9;
  --color-pastel-pink-200: #f4bfc0;
  --color-pastel-pink-300: #e3a3a4;
  --color-pastel-pink-400: #c38688;
  --color-pastel-pink-500: #a86d6e;
  --color-pastel-pink-600: #8d5557;
  --color-pastel-pink-700: #744244;
  --color-pastel-pink-800: #5e3234;
  --color-pastel-pink-900: #4c2628;
  --color-pastel-pink-950: #311617;
  --color-tutu: #ffe4e3;
  --color-tutu-50: #fff2f1;
  --color-tutu-100: #ffe4e3;
  --color-tutu-200: #e6d2d1;
  --color-tutu-300: #d1bbba;
  --color-tutu-400: #b39b9a;
  --color-tutu-500: #987f7f;
  --color-tutu-600: #7c6565;
  --color-tutu-700: #644f4f;
  --color-tutu-800: #4f3d3d;
  --color-tutu-900: #3d2e2e;
  --color-tutu-950: #271c1c;
}