Violet Heaven to Maniac Mansion Color Palette

About this palette

Violet Heaven to Maniac Mansion is a 4-color vintage palette: #C4BEFF (Violet Heaven), #AE9E62 (Kathmandu), #876D41 (Sneaky Sesame), #023D56 (Maniac Mansion). It mixes purple, yellow, brown, blue tones and feels balanced overall. The strongest text pairing is #C4BEFF on #023D56 with a contrast ratio of 6.74:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Violet Heaven	rgb(196, 190, 255)	hsl(246, 100%, 87%)
Kathmandu	rgb(174, 158, 98)	hsl(47, 32%, 53%)
Sneaky Sesame	rgb(135, 109, 65)	hsl(38, 35%, 39%)
Maniac Mansion	rgb(2, 61, 86)	hsl(198, 95%, 17%)

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.74:1 Good#C4BEFF on #023D56
Aa6.74:1 Good#023D56 on #C4BEFF
Aa4.36:1 Poor#AE9E62 on #023D56
Aa4.36:1 Poor#023D56 on #AE9E62

Color blindness preview

CSS variables

/* Violet Heaven to Maniac Mansion — https://swatchly.xyz/palette/c4beff-ae9e62-876d41-023d56 */
:root {
  --violet-heaven: #c4beff;
  --kathmandu: #ae9e62;
  --sneaky-sesame: #876d41;
  --maniac-mansion: #023d56;
}

Tailwind CSS v4

/* Violet Heaven to Maniac Mansion — https://swatchly.xyz/palette/c4beff-ae9e62-876d41-023d56 */
@theme {
  --color-violet-heaven: #c4beff;
  --color-violet-heaven-50: #f8f7ff;
  --color-violet-heaven-100: #eeedff;
  --color-violet-heaven-200: #dad8ff;
  --color-violet-heaven-300: #c4beff;
  --color-violet-heaven-400: #a49eda;
  --color-violet-heaven-500: #8881be;
  --color-violet-heaven-600: #6c669f;
  --color-violet-heaven-700: #554f83;
  --color-violet-heaven-800: #423c69;
  --color-violet-heaven-900: #322c53;
  --color-violet-heaven-950: #1f1b36;
  --color-kathmandu: #ae9e62;
  --color-kathmandu-50: #fdf4d2;
  --color-kathmandu-100: #f4eac3;
  --color-kathmandu-200: #e2d5a8;
  --color-kathmandu-300: #ccbe8a;
  --color-kathmandu-400: #ae9e62;
  --color-kathmandu-500: #938348;
  --color-kathmandu-600: #78692f;
  --color-kathmandu-700: #61531c;
  --color-kathmandu-800: #4d410f;
  --color-kathmandu-900: #3c3206;
  --color-kathmandu-950: #261f02;
  --color-sneaky-sesame: #876d41;
  --color-sneaky-sesame-50: #fff4e1;
  --color-sneaky-sesame-100: #fceacd;
  --color-sneaky-sesame-200: #ecd7b5;
  --color-sneaky-sesame-300: #d8c19a;
  --color-sneaky-sesame-400: #bca176;
  --color-sneaky-sesame-500: #a1875a;
  --color-sneaky-sesame-600: #876d41;
  --color-sneaky-sesame-700: #6d562d;
  --color-sneaky-sesame-800: #57421e;
  --color-sneaky-sesame-900: #443213;
  --color-sneaky-sesame-950: #2b1e08;
  --color-maniac-mansion: #023d56;
  --color-maniac-mansion-50: #ebf7ff;
  --color-maniac-mansion-100: #d6f0ff;
  --color-maniac-mansion-200: #b7def5;
  --color-maniac-mansion-300: #9bc8e2;
  --color-maniac-mansion-400: #79aac6;
  --color-maniac-mansion-500: #5c8fac;
  --color-maniac-mansion-600: #437591;
  --color-maniac-mansion-700: #305f78;
  --color-maniac-mansion-800: #214c62;
  --color-maniac-mansion-900: #023d56;
  --color-maniac-mansion-950: #0a2634;
}