Maniac Mansion to Aquamarine Color Palette

About this palette

Maniac Mansion to Aquamarine is a 4-color palette: #003F52 (Maniac Mansion), #914C47 (Chocolate Explosion), #CD6578 (Mexican Chile), #34E1B4 (Aquamarine). It mixes blue, red, turquoise tones and feels balanced overall. The strongest text pairing is #003F52 on #34E1B4 with a contrast ratio of 6.86:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Maniac Mansion	rgb(0, 63, 82)	hsl(194, 100%, 16%)
Chocolate Explosion	rgb(145, 76, 71)	hsl(4, 34%, 42%)
Mexican Chile	rgb(205, 101, 120)	hsl(349, 51%, 60%)
Aquamarine	rgb(52, 225, 180)	hsl(164, 74%, 54%)

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.

Aa6.86:1 Good#003F52 on #34E1B4
Aa6.86:1 Good#34E1B4 on #003F52
Aa3.78:1 Poor#914C47 on #34E1B4
Aa3.78:1 Poor#34E1B4 on #914C47
Aa3.13:1 Poor#003F52 on #CD6578
Aa3.13:1 Poor#CD6578 on #003F52

Color blindness preview

CSS variables

/* Maniac Mansion to Aquamarine — https://swatchly.xyz/palette/003f52-914c47-cd6578-34e1b4 */
:root {
  --maniac-mansion: #003f52;
  --chocolate-explosion: #914c47;
  --mexican-chile: #cd6578;
  --aquamarine: #34e1b4;
}

Tailwind CSS v4

/* Maniac Mansion to Aquamarine — https://swatchly.xyz/palette/003f52-914c47-cd6578-34e1b4 */
@theme {
  --color-maniac-mansion: #003f52;
  --color-maniac-mansion-50: #e8f8ff;
  --color-maniac-mansion-100: #d1f1ff;
  --color-maniac-mansion-200: #b7dff0;
  --color-maniac-mansion-300: #9bc9dd;
  --color-maniac-mansion-400: #78abc1;
  --color-maniac-mansion-500: #5c91a6;
  --color-maniac-mansion-600: #43778c;
  --color-maniac-mansion-700: #2f6173;
  --color-maniac-mansion-800: #214e5e;
  --color-maniac-mansion-900: #003f52;
  --color-maniac-mansion-950: #0a2832;
  --color-chocolate-explosion: #914c47;
  --color-chocolate-explosion-50: #fff2f0;
  --color-chocolate-explosion-100: #ffe2de;
  --color-chocolate-explosion-200: #ffc3bd;
  --color-chocolate-explosion-300: #eca8a1;
  --color-chocolate-explosion-400: #ce857e;
  --color-chocolate-explosion-500: #b06862;
  --color-chocolate-explosion-600: #914c47;
  --color-chocolate-explosion-700: #763a36;
  --color-chocolate-explosion-800: #5f2b28;
  --color-chocolate-explosion-900: #4b201d;
  --color-chocolate-explosion-950: #311210;
  --color-mexican-chile: #cd6578;
  --color-mexican-chile-50: #fff2f4;
  --color-mexican-chile-100: #ffe6e8;
  --color-mexican-chile-200: #ffcad1;
  --color-mexican-chile-300: #ffa8b5;
  --color-mexican-chile-400: #e88293;
  --color-mexican-chile-500: #cd6578;
  --color-mexican-chile-600: #ad4a5e;
  --color-mexican-chile-700: #8f3448;
  --color-mexican-chile-800: #742436;
  --color-mexican-chile-900: #5c1728;
  --color-mexican-chile-950: #3c0b17;
  --color-aquamarine: #34e1b4;
  --color-aquamarine-50: #ddfff2;
  --color-aquamarine-100: #b3ffe4;
  --color-aquamarine-200: #88f1ce;
  --color-aquamarine-300: #34e1b4;
  --color-aquamarine-400: #00be96;
  --color-aquamarine-500: #009e7c;
  --color-aquamarine-600: #008063;
  --color-aquamarine-700: #00654e;
  --color-aquamarine-800: #004f3d;
  --color-aquamarine-900: #003d2e;
  --color-aquamarine-950: #00261c;
}