Stroopwafel to Maniac Mansion color palette

AA6B4AStroopwafel 80A16BBuckingham Gardens ECD1FCBubblegum Crisis 883B96Purple Pleasures F0C29ENegroni 004262Maniac Mansion

Open in generator Export PNG, PDF, ASE…

About this palette

Stroopwafel to Maniac Mansion is a 6-color cool palette: #AA6B4A (Stroopwafel), #80A16B (Buckingham Gardens), #ECD1FC (Bubblegum Crisis), #883B96 (Purple Pleasures), #F0C29E (Negroni), #004262 (Maniac Mansion). It mixes orange, green, purple, blue tones and feels cool overall. The strongest text pairing is #ECD1FC on #004262 with a contrast ratio of 7.72:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Stroopwafel	rgb(170, 107, 74)	hsl(21, 39%, 48%)
Buckingham Gardens	rgb(128, 161, 107)	hsl(97, 22%, 53%)
Bubblegum Crisis	rgb(236, 209, 252)	hsl(278, 88%, 90%)
Purple Pleasures	rgb(136, 59, 150)	hsl(291, 44%, 41%)
Negroni	rgb(240, 194, 158)	hsl(26, 73%, 78%)
Maniac Mansion	rgb(0, 66, 98)	hsl(200, 100%, 19%)

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.72:1 Very good#ECD1FC on #004262
Aa7.72:1 Very good#004262 on #ECD1FC
Aa6.60:1 Good#F0C29E on #004262
Aa6.60:1 Good#004262 on #F0C29E
Aa4.85:1 Good#ECD1FC on #883B96
Aa4.85:1 Good#883B96 on #ECD1FC
Aa4.15:1 Poor#883B96 on #F0C29E
Aa4.15:1 Poor#F0C29E on #883B96

Color blindness preview

CSS variables

/* Stroopwafel to Maniac Mansion — https://swatchly.xyz/palette/aa6b4a-80a16b-ecd1fc-883b96-f0c29e-004262 */
:root {
  --stroopwafel: #aa6b4a;
  --buckingham-gardens: #80a16b;
  --bubblegum-crisis: #ecd1fc;
  --purple-pleasures: #883b96;
  --negroni: #f0c29e;
  --maniac-mansion: #004262;
}

Tailwind CSS v4

/* Stroopwafel to Maniac Mansion — https://swatchly.xyz/palette/aa6b4a-80a16b-ecd1fc-883b96-f0c29e-004262 */
@theme {
  --color-stroopwafel: #aa6b4a;
  --color-stroopwafel-50: #fff0e9;
  --color-stroopwafel-100: #ffe1d2;
  --color-stroopwafel-200: #fbc5aa;
  --color-stroopwafel-300: #e7ab8c;
  --color-stroopwafel-400: #c88867;
  --color-stroopwafel-500: #aa6b4a;
  --color-stroopwafel-600: #8e5334;
  --color-stroopwafel-700: #744023;
  --color-stroopwafel-800: #5e3017;
  --color-stroopwafel-900: #4b240e;
  --color-stroopwafel-950: #311506;
  --color-buckingham-gardens: #80a16b;
  --color-buckingham-gardens-50: #e4f9d7;
  --color-buckingham-gardens-100: #d6edc8;
  --color-buckingham-gardens-200: #bdd9ad;
  --color-buckingham-gardens-300: #a3c290;
  --color-buckingham-gardens-400: #80a16b;
  --color-buckingham-gardens-500: #688753;
  --color-buckingham-gardens-600: #516e3d;
  --color-buckingham-gardens-700: #3e592c;
  --color-buckingham-gardens-800: #2f471f;
  --color-buckingham-gardens-900: #243815;
  --color-buckingham-gardens-950: #15240b;
  --color-bubblegum-crisis: #ecd1fc;
  --color-bubblegum-crisis-50: #fcf6ff;
  --color-bubblegum-crisis-100: #f7eaff;
  --color-bubblegum-crisis-200: #ecd1fc;
  --color-bubblegum-crisis-300: #d2bcdf;
  --color-bubblegum-crisis-400: #b29ac1;
  --color-bubblegum-crisis-500: #967da5;
  --color-bubblegum-crisis-600: #7a6388;
  --color-bubblegum-crisis-700: #624c6e;
  --color-bubblegum-crisis-800: #4c3a57;
  --color-bubblegum-crisis-900: #3b2b44;
  --color-bubblegum-crisis-950: #251a2c;
  --color-purple-pleasures: #883b96;
  --color-purple-pleasures-50: #fdf0ff;
  --color-purple-pleasures-100: #fadeff;
  --color-purple-pleasures-200: #f5bcff;
  --color-purple-pleasures-300: #e49cf1;
  --color-purple-pleasures-400: #c577d3;
  --color-purple-pleasures-500: #a658b5;
  --color-purple-pleasures-600: #883b96;
  --color-purple-pleasures-700: #6e2b7a;
  --color-purple-pleasures-800: #581e63;
  --color-purple-pleasures-900: #46144f;
  --color-purple-pleasures-950: #2d0934;
  --color-negroni: #f0c29e;
  --color-negroni-50: #ffe9d8;
  --color-negroni-100: #fbdbc2;
  --color-negroni-200: #f0c29e;
  --color-negroni-300: #d7af8f;
  --color-negroni-400: #bb916f;
  --color-negroni-500: #a17755;
  --color-negroni-600: #865f3e;
  --color-negroni-700: #6f4b2d;
  --color-negroni-800: #5a3a20;
  --color-negroni-900: #472c15;
  --color-negroni-950: #2d1a0a;
  --color-maniac-mansion: #004262;
  --color-maniac-mansion-50: #ecf7ff;
  --color-maniac-mansion-100: #d8efff;
  --color-maniac-mansion-200: #b4defb;
  --color-maniac-mansion-300: #96c7e8;
  --color-maniac-mansion-400: #71a7ca;
  --color-maniac-mansion-500: #538aae;
  --color-maniac-mansion-600: #386e90;
  --color-maniac-mansion-700: #245674;
  --color-maniac-mansion-800: #004262;
  --color-maniac-mansion-900: #0d3248;
  --color-maniac-mansion-950: #051f2e;
}