Maniac Mansion to Glaucous Green Color Palette

About this palette

Maniac Mansion to Glaucous Green is a 4-color cool palette: #00435D (Maniac Mansion), #874B00 (Milk Chocolate), #BB87C1 (Violaceous), #ACE6C2 (Glaucous Green). It mixes blue, brown, pink, green tones and feels cool overall. The strongest text pairing is #00435D on #ACE6C2 with a contrast ratio of 7.57:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Maniac Mansion	rgb(0, 67, 93)	hsl(197, 100%, 18%)
Milk Chocolate	rgb(135, 75, 0)	hsl(33, 100%, 26%)
Violaceous	rgb(187, 135, 193)	hsl(294, 32%, 64%)
Glaucous Green	rgb(172, 230, 194)	hsl(143, 54%, 79%)

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.57:1 Very good#00435D on #ACE6C2
Aa7.57:1 Very good#ACE6C2 on #00435D
Aa4.89:1 Good#874B00 on #ACE6C2
Aa4.89:1 Good#ACE6C2 on #874B00
Aa3.75:1 Poor#00435D on #BB87C1
Aa3.75:1 Poor#BB87C1 on #00435D

Color blindness preview

CSS variables

/* Maniac Mansion to Glaucous Green — https://swatchly.xyz/palette/00435d-874b00-bb87c1-ace6c2 */
:root {
  --maniac-mansion: #00435d;
  --milk-chocolate: #874b00;
  --violaceous: #bb87c1;
  --glaucous-green: #ace6c2;
}

Tailwind CSS v4

/* Maniac Mansion to Glaucous Green — https://swatchly.xyz/palette/00435d-874b00-bb87c1-ace6c2 */
@theme {
  --color-maniac-mansion: #00435d;
  --color-maniac-mansion-50: #eaf7ff;
  --color-maniac-mansion-100: #d5f0ff;
  --color-maniac-mansion-200: #b4dff6;
  --color-maniac-mansion-300: #97c8e2;
  --color-maniac-mansion-400: #71a8c5;
  --color-maniac-mansion-500: #538ba8;
  --color-maniac-mansion-600: #396f8a;
  --color-maniac-mansion-700: #25576f;
  --color-maniac-mansion-800: #00435d;
  --color-maniac-mansion-900: #0d3344;
  --color-maniac-mansion-950: #051f2b;
  --color-milk-chocolate: #874b00;
  --color-milk-chocolate-50: #fff3e9;
  --color-milk-chocolate-100: #ffe6d2;
  --color-milk-chocolate-200: #ffcea5;
  --color-milk-chocolate-300: #f0b685;
  --color-milk-chocolate-400: #d5965e;
  --color-milk-chocolate-500: #ba7b40;
  --color-milk-chocolate-600: #9f6124;
  --color-milk-chocolate-700: #874b00;
  --color-milk-chocolate-800: #6b3a00;
  --color-milk-chocolate-900: #532c00;
  --color-milk-chocolate-950: #361a00;
  --color-violaceous: #bb87c1;
  --color-violaceous-50: #fdedff;
  --color-violaceous-100: #fcdcff;
  --color-violaceous-200: #edc4f2;
  --color-violaceous-300: #d9aade;
  --color-violaceous-400: #bb87c1;
  --color-violaceous-500: #9f6da5;
  --color-violaceous-600: #84548a;
  --color-violaceous-700: #6b4071;
  --color-violaceous-800: #56305b;
  --color-violaceous-900: #442448;
  --color-violaceous-950: #2c152f;
  --color-glaucous-green: #ace6c2;
  --color-glaucous-green-50: #defde9;
  --color-glaucous-green-100: #d0f4dd;
  --color-glaucous-green-200: #ace6c2;
  --color-glaucous-green-300: #9dcdaf;
  --color-glaucous-green-400: #79af8e;
  --color-glaucous-green-500: #5d9473;
  --color-glaucous-green-600: #43795a;
  --color-glaucous-green-700: #2f6145;
  --color-glaucous-green-800: #204d34;
  --color-glaucous-green-900: #153b27;
  --color-glaucous-green-950: #0a2517;
}