Maniac Mansion to Young Apricot color palette

004356Maniac Mansion 666C44Bancha 4C90ACEnchanted Well ACA6CCImperial Lilac FFD2AFYoung Apricot

About this palette

Maniac Mansion to Young Apricot is a 5-color cool palette: #004356 (Maniac Mansion), #666C44 (Bancha), #4C90AC (Enchanted Well), #ACA6CC (Imperial Lilac), #FFD2AF (Young Apricot). It mixes blue, green, purple, orange tones and feels cool overall. The strongest text pairing is #004356 on #FFD2AF with a contrast ratio of 7.79:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Maniac Mansion	rgb(0, 67, 86)	hsl(193, 100%, 17%)
Bancha	rgb(102, 108, 68)	hsl(69, 23%, 35%)
Enchanted Well	rgb(76, 144, 172)	hsl(198, 39%, 49%)
Imperial Lilac	rgb(172, 166, 204)	hsl(249, 27%, 73%)
Young Apricot	rgb(255, 210, 175)	hsl(26, 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.

Aa7.79:1 Very good#004356 on #FFD2AF
Aa7.79:1 Very good#FFD2AF on #004356
Aa4.69:1 Good#004356 on #ACA6CC
Aa4.69:1 Good#ACA6CC on #004356
Aa3.98:1 Poor#666C44 on #FFD2AF
Aa3.98:1 Poor#FFD2AF on #666C44
Aa3.04:1 Poor#004356 on #4C90AC
Aa3.04:1 Poor#4C90AC on #004356

Color blindness preview

CSS variables

/* Maniac Mansion to Young Apricot — https://swatchly.xyz/palette/004356-666c44-4c90ac-aca6cc-ffd2af */
:root {
  --maniac-mansion: #004356;
  --bancha: #666c44;
  --enchanted-well: #4c90ac;
  --imperial-lilac: #aca6cc;
  --young-apricot: #ffd2af;
}

Tailwind CSS v4

/* Maniac Mansion to Young Apricot — https://swatchly.xyz/palette/004356-666c44-4c90ac-aca6cc-ffd2af */
@theme {
  --color-maniac-mansion: #004356;
  --color-maniac-mansion-50: #e8f8ff;
  --color-maniac-mansion-100: #d0f1ff;
  --color-maniac-mansion-200: #b5dff0;
  --color-maniac-mansion-300: #98c8dc;
  --color-maniac-mansion-400: #72a8bd;
  --color-maniac-mansion-500: #548ba1;
  --color-maniac-mansion-600: #396f83;
  --color-maniac-mansion-700: #255769;
  --color-maniac-mansion-800: #004356;
  --color-maniac-mansion-900: #0d333f;
  --color-maniac-mansion-950: #051f28;
  --color-bancha: #666c44;
  --color-bancha-50: #f4f8e0;
  --color-bancha-100: #e9eed2;
  --color-bancha-200: #d4dab9;
  --color-bancha-300: #bdc39e;
  --color-bancha-400: #9da37b;
  --color-bancha-500: #81875e;
  --color-bancha-600: #666c44;
  --color-bancha-700: #515632;
  --color-bancha-800: #3f4324;
  --color-bancha-900: #303419;
  --color-bancha-950: #1d200d;
  --color-enchanted-well: #4c90ac;
  --color-enchanted-well-50: #e9f8ff;
  --color-enchanted-well-100: #d2f1ff;
  --color-enchanted-well-200: #aee0f6;
  --color-enchanted-well-300: #91cbe4;
  --color-enchanted-well-400: #6bacc7;
  --color-enchanted-well-500: #4c90ac;
  --color-enchanted-well-600: #31758f;
  --color-enchanted-well-700: #1c5d75;
  --color-enchanted-well-800: #0c495e;
  --color-enchanted-well-900: #03384a;
  --color-enchanted-well-950: #002330;
  --color-imperial-lilac: #aca6cc;
  --color-imperial-lilac-50: #f9f8ff;
  --color-imperial-lilac-100: #f1eeff;
  --color-imperial-lilac-200: #dfdbf7;
  --color-imperial-lilac-300: #cac5e5;
  --color-imperial-lilac-400: #aca6cc;
  --color-imperial-lilac-500: #8f89ad;
  --color-imperial-lilac-600: #736d90;
  --color-imperial-lilac-700: #5a5575;
  --color-imperial-lilac-800: #46415c;
  --color-imperial-lilac-900: #353048;
  --color-imperial-lilac-950: #201d2d;
  --color-young-apricot: #ffd2af;
  --color-young-apricot-50: #fff6f0;
  --color-young-apricot-100: #ffebdc;
  --color-young-apricot-200: #ffd2af;
  --color-young-apricot-300: #e1bca0;
  --color-young-apricot-400: #c49b7b;
  --color-young-apricot-500: #a77f5e;
  --color-young-apricot-600: #8a6444;
  --color-young-apricot-700: #704d30;
  --color-young-apricot-800: #593b21;
  --color-young-apricot-900: #462c17;
  --color-young-apricot-950: #2d1a0b;
}