Maniac Mansion to Fresh Gum Color Palette

About this palette

Maniac Mansion to Fresh Gum is a 5-color warm palette: #003C4F (Maniac Mansion), #93007C (Persian Luxury Purple), #0092A3 (Oasis), #C8A900 (Hot Sand), #FFABD8 (Fresh Gum). It mixes blue, pink, turquoise, yellow tones and feels warm overall. The strongest text pairing is #003C4F on #FFABD8 with a contrast ratio of 6.86:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Maniac Mansion	rgb(0, 60, 79)	hsl(194, 100%, 15%)
Persian Luxury Purple	rgb(147, 0, 124)	hsl(309, 100%, 29%)
Oasis	rgb(0, 146, 163)	hsl(186, 100%, 32%)
Hot Sand	rgb(200, 169, 0)	hsl(51, 100%, 39%)
Fresh Gum	rgb(255, 171, 216)	hsl(328, 100%, 84%)

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#003C4F on #FFABD8
Aa6.86:1 Good#FFABD8 on #003C4F
Aa5.19:1 Good#003C4F on #C8A900
Aa5.19:1 Good#C8A900 on #003C4F
Aa4.77:1 Good#93007C on #FFABD8
Aa4.77:1 Good#FFABD8 on #93007C
Aa3.61:1 Poor#93007C on #C8A900
Aa3.61:1 Poor#C8A900 on #93007C

Color blindness preview

CSS variables

/* Maniac Mansion to Fresh Gum — https://swatchly.xyz/palette/003c4f-93007c-0092a3-c8a900-ffabd8 */
:root {
  --maniac-mansion: #003c4f;
  --persian-luxury-purple: #93007c;
  --oasis: #0092a3;
  --hot-sand: #c8a900;
  --fresh-gum: #ffabd8;
}

Tailwind CSS v4

/* Maniac Mansion to Fresh Gum — https://swatchly.xyz/palette/003c4f-93007c-0092a3-c8a900-ffabd8 */
@theme {
  --color-maniac-mansion: #003c4f;
  --color-maniac-mansion-50: #e9f8ff;
  --color-maniac-mansion-100: #d2f1ff;
  --color-maniac-mansion-200: #b8dff0;
  --color-maniac-mansion-300: #9cc9dc;
  --color-maniac-mansion-400: #79aac0;
  --color-maniac-mansion-500: #5c90a5;
  --color-maniac-mansion-600: #43758a;
  --color-maniac-mansion-700: #2f5e71;
  --color-maniac-mansion-800: #214b5c;
  --color-maniac-mansion-900: #003c4f;
  --color-maniac-mansion-950: #0a2530;
  --color-persian-luxury-purple: #93007c;
  --color-persian-luxury-purple-50: #fff0fa;
  --color-persian-luxury-purple-100: #ffe1f6;
  --color-persian-luxury-purple-200: #ffc1ed;
  --color-persian-luxury-purple-300: #ff98e5;
  --color-persian-luxury-purple-400: #e96bcc;
  --color-persian-luxury-purple-500: #cc4bb1;
  --color-persian-luxury-purple-600: #ad2d94;
  --color-persian-luxury-purple-700: #93007c;
  --color-persian-luxury-purple-800: #740162;
  --color-persian-luxury-purple-900: #5b004c;
  --color-persian-luxury-purple-950: #3b0031;
  --color-oasis: #0092a3;
  --color-oasis-50: #dffaff;
  --color-oasis-100: #bcf5ff;
  --color-oasis-200: #96e4f1;
  --color-oasis-300: #72cedd;
  --color-oasis-400: #40afbf;
  --color-oasis-500: #0092a3;
  --color-oasis-600: #007684;
  --color-oasis-700: #005d69;
  --color-oasis-800: #004953;
  --color-oasis-900: #003940;
  --color-oasis-950: #002429;
  --color-hot-sand: #c8a900;
  --color-hot-sand-50: #fff9e0;
  --color-hot-sand-100: #fff1b7;
  --color-hot-sand-200: #f3de8a;
  --color-hot-sand-300: #e1c863;
  --color-hot-sand-400: #c8a900;
  --color-hot-sand-500: #a68c00;
  --color-hot-sand-600: #867000;
  --color-hot-sand-700: #6a5800;
  --color-hot-sand-800: #524400;
  --color-hot-sand-900: #3f3300;
  --color-hot-sand-950: #261f00;
  --color-fresh-gum: #ffabd8;
  --color-fresh-gum-50: #fff7fb;
  --color-fresh-gum-100: #ffeaf4;
  --color-fresh-gum-200: #ffcee7;
  --color-fresh-gum-300: #ffabd8;
  --color-fresh-gum-400: #d98cb6;
  --color-fresh-gum-500: #bc6e99;
  --color-fresh-gum-600: #9d527d;
  --color-fresh-gum-700: #803d63;
  --color-fresh-gum-800: #662b4e;
  --color-fresh-gum-900: #501e3b;
  --color-fresh-gum-950: #341025;
}