Happy Piglets to Maniac Mansion Color Palette

About this palette

Happy Piglets to Maniac Mansion is a 4-color vintage palette: #FFC9C6 (Happy Piglets), #7AB5C9 (Crystal Lake), #83613E (Man Cave), #003E56 (Maniac Mansion). It mixes pink, blue, brown tones and feels balanced overall. The strongest text pairing is #FFC9C6 on #003E56 with a contrast ratio of 7.91:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Happy Piglets	rgb(255, 201, 198)	hsl(3, 100%, 89%)
Crystal Lake	rgb(122, 181, 201)	hsl(195, 42%, 63%)
Man Cave	rgb(131, 97, 62)	hsl(30, 36%, 38%)
Maniac Mansion	rgb(0, 62, 86)	hsl(197, 100%, 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.

Aa7.91:1 Very good#FFC9C6 on #003E56
Aa7.91:1 Very good#003E56 on #FFC9C6
Aa5.09:1 Good#7AB5C9 on #003E56
Aa5.09:1 Good#003E56 on #7AB5C9
Aa3.85:1 Poor#FFC9C6 on #83613E
Aa3.85:1 Poor#83613E on #FFC9C6

Color blindness preview

CSS variables

/* Happy Piglets to Maniac Mansion — https://swatchly.xyz/palette/ffc9c6-7ab5c9-83613e-003e56 */
:root {
  --happy-piglets: #ffc9c6;
  --crystal-lake: #7ab5c9;
  --man-cave: #83613e;
  --maniac-mansion: #003e56;
}

Tailwind CSS v4

/* Happy Piglets to Maniac Mansion — https://swatchly.xyz/palette/ffc9c6-7ab5c9-83613e-003e56 */
@theme {
  --color-happy-piglets: #ffc9c6;
  --color-happy-piglets-50: #fff2f1;
  --color-happy-piglets-100: #ffe5e3;
  --color-happy-piglets-200: #ffc9c6;
  --color-happy-piglets-300: #e2b5b2;
  --color-happy-piglets-400: #c59491;
  --color-happy-piglets-500: #a97876;
  --color-happy-piglets-600: #8c5e5c;
  --color-happy-piglets-700: #724947;
  --color-happy-piglets-800: #5b3736;
  --color-happy-piglets-900: #482928;
  --color-happy-piglets-950: #2e1818;
  --color-crystal-lake: #7ab5c9;
  --color-crystal-lake-50: #effbff;
  --color-crystal-lake-100: #dbf5ff;
  --color-crystal-lake-200: #bde6f4;
  --color-crystal-lake-300: #a2d2e2;
  --color-crystal-lake-400: #7ab5c9;
  --color-crystal-lake-500: #5d97ab;
  --color-crystal-lake-600: #417b8d;
  --color-crystal-lake-700: #2b6172;
  --color-crystal-lake-800: #1b4c5b;
  --color-crystal-lake-900: #0f3a46;
  --color-crystal-lake-950: #05232c;
  --color-man-cave: #83613e;
  --color-man-cave-50: #fff3e7;
  --color-man-cave-100: #fee6ce;
  --color-man-cave-200: #eed1b4;
  --color-man-cave-300: #d9b998;
  --color-man-cave-400: #bb9875;
  --color-man-cave-500: #9f7c58;
  --color-man-cave-600: #83613e;
  --color-man-cave-700: #6a4c2d;
  --color-man-cave-800: #543a1f;
  --color-man-cave-900: #422c15;
  --color-man-cave-950: #2a1b0a;
  --color-maniac-mansion: #003e56;
  --color-maniac-mansion-50: #eaf8ff;
  --color-maniac-mansion-100: #d5f0ff;
  --color-maniac-mansion-200: #b6def4;
  --color-maniac-mansion-300: #9bc8e1;
  --color-maniac-mansion-400: #78abc5;
  --color-maniac-mansion-500: #5b90ab;
  --color-maniac-mansion-600: #427690;
  --color-maniac-mansion-700: #2f6078;
  --color-maniac-mansion-800: #214d62;
  --color-maniac-mansion-900: #003e56;
  --color-maniac-mansion-950: #0a2735;
}