Maniac Mansion to Matt Pink color palette

063B53Maniac Mansion 2E4800Treetop Cathedral 417301Forest Empress CD5077Strawberry Moon 6AA6E0Acapulco Dive FFB3C4Matt Pink

Open in generator Export PNG, PDF, ASE…

About this palette

Maniac Mansion to Matt Pink is a 6-color cool palette: #063B53 (Maniac Mansion), #2E4800 (Treetop Cathedral), #417301 (Forest Empress), #CD5077 (Strawberry Moon), #6AA6E0 (Acapulco Dive), #FFB3C4 (Matt Pink). It mixes blue, green, pink tones and feels cool overall. The strongest text pairing is #063B53 on #FFB3C4 with a contrast ratio of 7.11:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Maniac Mansion	rgb(6, 59, 83)	hsl(199, 87%, 17%)
Treetop Cathedral	rgb(46, 72, 0)	hsl(82, 100%, 14%)
Forest Empress	rgb(65, 115, 1)	hsl(86, 98%, 23%)
Strawberry Moon	rgb(205, 80, 119)	hsl(341, 56%, 56%)
Acapulco Dive	rgb(106, 166, 224)	hsl(209, 66%, 65%)
Matt Pink	rgb(255, 179, 196)	hsl(347, 100%, 85%)

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.11:1 Very good#063B53 on #FFB3C4
Aa7.11:1 Very good#FFB3C4 on #063B53
Aa6.12:1 Good#2E4800 on #FFB3C4
Aa6.12:1 Good#FFB3C4 on #2E4800
Aa4.63:1 Good#063B53 on #6AA6E0
Aa4.63:1 Good#6AA6E0 on #063B53
Aa3.99:1 Poor#2E4800 on #6AA6E0
Aa3.99:1 Poor#6AA6E0 on #2E4800

Color blindness preview

CSS variables

/* Maniac Mansion to Matt Pink — https://swatchly.xyz/palette/063b53-2e4800-417301-cd5077-6aa6e0-ffb3c4 */
:root {
  --maniac-mansion: #063b53;
  --treetop-cathedral: #2e4800;
  --forest-empress: #417301;
  --strawberry-moon: #cd5077;
  --acapulco-dive: #6aa6e0;
  --matt-pink: #ffb3c4;
}

Tailwind CSS v4

/* Maniac Mansion to Matt Pink — https://swatchly.xyz/palette/063b53-2e4800-417301-cd5077-6aa6e0-ffb3c4 */
@theme {
  --color-maniac-mansion: #063b53;
  --color-maniac-mansion-50: #ebf7ff;
  --color-maniac-mansion-100: #d6f0ff;
  --color-maniac-mansion-200: #b9def4;
  --color-maniac-mansion-300: #9ec8e1;
  --color-maniac-mansion-400: #7ba9c4;
  --color-maniac-mansion-500: #5f8eaa;
  --color-maniac-mansion-600: #46748e;
  --color-maniac-mansion-700: #325d75;
  --color-maniac-mansion-800: #234a5f;
  --color-maniac-mansion-900: #063b53;
  --color-maniac-mansion-950: #0c2532;
  --color-treetop-cathedral: #2e4800;
  --color-treetop-cathedral-50: #eafdd7;
  --color-treetop-cathedral-100: #dff4c9;
  --color-treetop-cathedral-200: #c9e1af;
  --color-treetop-cathedral-300: #afcb92;
  --color-treetop-cathedral-400: #8eac6c;
  --color-treetop-cathedral-500: #72904f;
  --color-treetop-cathedral-600: #587435;
  --color-treetop-cathedral-700: #425b22;
  --color-treetop-cathedral-800: #2e4800;
  --color-treetop-cathedral-900: #25370b;
  --color-treetop-cathedral-950: #152204;
  --color-forest-empress: #417301;
  --color-forest-empress-50: #e5ffd4;
  --color-forest-empress-100: #d3f7ba;
  --color-forest-empress-200: #b9e49b;
  --color-forest-empress-300: #9dcd79;
  --color-forest-empress-400: #79ad4f;
  --color-forest-empress-500: #5c902d;
  --color-forest-empress-600: #417301;
  --color-forest-empress-700: #325b00;
  --color-forest-empress-800: #264800;
  --color-forest-empress-900: #1c3800;
  --color-forest-empress-950: #102300;
  --color-strawberry-moon: #cd5077;
  --color-strawberry-moon-50: #fff0f3;
  --color-strawberry-moon-100: #ffe1e7;
  --color-strawberry-moon-200: #ffc2d0;
  --color-strawberry-moon-300: #ff9cb5;
  --color-strawberry-moon-400: #eb6f93;
  --color-strawberry-moon-500: #cd5077;
  --color-strawberry-moon-600: #ad365e;
  --color-strawberry-moon-700: #902149;
  --color-strawberry-moon-800: #751238;
  --color-strawberry-moon-900: #5e082b;
  --color-strawberry-moon-950: #3e021a;
  --color-acapulco-dive: #6aa6e0;
  --color-acapulco-dive-50: #edf6ff;
  --color-acapulco-dive-100: #dcedff;
  --color-acapulco-dive-200: #b8dbff;
  --color-acapulco-dive-300: #92c6f9;
  --color-acapulco-dive-400: #6aa6e0;
  --color-acapulco-dive-500: #4f8ac2;
  --color-acapulco-dive-600: #356fa5;
  --color-acapulco-dive-700: #225888;
  --color-acapulco-dive-800: #13456f;
  --color-acapulco-dive-900: #093558;
  --color-acapulco-dive-950: #03203a;
  --color-matt-pink: #ffb3c4;
  --color-matt-pink-50: #fff9fa;
  --color-matt-pink-100: #ffedf1;
  --color-matt-pink-200: #ffd3dc;
  --color-matt-pink-300: #ffb3c4;
  --color-matt-pink-400: #d894a3;
  --color-matt-pink-500: #bb7586;
  --color-matt-pink-600: #9c596a;
  --color-matt-pink-700: #7f4352;
  --color-matt-pink-800: #65313f;
  --color-matt-pink-900: #4e232e;
  --color-matt-pink-950: #33141c;
}