Beige to Maniac Mansion Color Palette

About this palette

Beige to Maniac Mansion is a 5-color warm, vintage palette: #E2D9A4 (Beige), #6E483F (Cappuccino), #9F5E52 (Chutney), #759FB6 (Lake Lucerne), #003B54 (Maniac Mansion). It mixes yellow, red, blue tones and feels warm overall. The strongest text pairing is #E2D9A4 on #003B54 with a contrast ratio of 8.38:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beige	rgb(226, 217, 164)	hsl(51, 52%, 76%)
Cappuccino	rgb(110, 72, 63)	hsl(11, 27%, 34%)
Chutney	rgb(159, 94, 82)	hsl(9, 32%, 47%)
Lake Lucerne	rgb(117, 159, 182)	hsl(201, 31%, 59%)
Maniac Mansion	rgb(0, 59, 84)	hsl(198, 100%, 16%)

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.

Aa8.38:1 Very good#E2D9A4 on #003B54
Aa8.38:1 Very good#003B54 on #E2D9A4
Aa5.52:1 Good#E2D9A4 on #6E483F
Aa5.52:1 Good#6E483F on #E2D9A4
Aa4.21:1 Poor#759FB6 on #003B54
Aa4.21:1 Poor#003B54 on #759FB6
Aa3.50:1 Poor#E2D9A4 on #9F5E52
Aa3.50:1 Poor#9F5E52 on #E2D9A4

Color blindness preview

CSS variables

/* Beige to Maniac Mansion — https://swatchly.xyz/palette/e2d9a4-6e483f-9f5e52-759fb6-003b54 */
:root {
  --beige: #e2d9a4;
  --cappuccino: #6e483f;
  --chutney: #9f5e52;
  --lake-lucerne: #759fb6;
  --maniac-mansion: #003b54;
}

Tailwind CSS v4

/* Beige to Maniac Mansion — https://swatchly.xyz/palette/e2d9a4-6e483f-9f5e52-759fb6-003b54 */
@theme {
  --color-beige: #e2d9a4;
  --color-beige-50: #fbf6d9;
  --color-beige-100: #f2eccc;
  --color-beige-200: #e2d9a4;
  --color-beige-300: #cac296;
  --color-beige-400: #aba372;
  --color-beige-500: #908755;
  --color-beige-600: #756d3c;
  --color-beige-700: #5e5629;
  --color-beige-800: #4a431b;
  --color-beige-900: #393311;
  --color-beige-950: #242007;
  --color-cappuccino: #6e483f;
  --color-cappuccino-50: #fff2ef;
  --color-cappuccino-100: #ffe4de;
  --color-cappuccino-200: #f1cec6;
  --color-cappuccino-300: #ddb6ac;
  --color-cappuccino-400: #bf958b;
  --color-cappuccino-500: #a3796f;
  --color-cappuccino-600: #865f56;
  --color-cappuccino-700: #6e483f;
  --color-cappuccino-800: #563831;
  --color-cappuccino-900: #442a24;
  --color-cappuccino-950: #2b1915;
  --color-chutney: #9f5e52;
  --color-chutney-50: #fff2ef;
  --color-chutney-100: #ffe6e1;
  --color-chutney-200: #ffccc2;
  --color-chutney-300: #f0b3a7;
  --color-chutney-400: #d59386;
  --color-chutney-500: #bb786b;
  --color-chutney-600: #9f5e52;
  --color-chutney-700: #82483d;
  --color-chutney-800: #69352c;
  --color-chutney-900: #532720;
  --color-chutney-950: #361611;
  --color-lake-lucerne: #759fb6;
  --color-lake-lucerne-50: #e3f5ff;
  --color-lake-lucerne-100: #cfebfb;
  --color-lake-lucerne-200: #b5d7ea;
  --color-lake-lucerne-300: #99bfd4;
  --color-lake-lucerne-400: #759fb6;
  --color-lake-lucerne-500: #5c859b;
  --color-lake-lucerne-600: #456c81;
  --color-lake-lucerne-700: #325669;
  --color-lake-lucerne-800: #244455;
  --color-lake-lucerne-900: #1a3543;
  --color-lake-lucerne-950: #0e222c;
  --color-maniac-mansion: #003b54;
  --color-maniac-mansion-50: #ebf7ff;
  --color-maniac-mansion-100: #d6f0ff;
  --color-maniac-mansion-200: #b7def5;
  --color-maniac-mansion-300: #9cc8e2;
  --color-maniac-mansion-400: #78aac6;
  --color-maniac-mansion-500: #5c8fab;
  --color-maniac-mansion-600: #43748f;
  --color-maniac-mansion-700: #2f5d76;
  --color-maniac-mansion-800: #204a60;
  --color-maniac-mansion-900: #003b54;
  --color-maniac-mansion-950: #0a2532;
}