Start generating

Neon Boneyard to Maniac Mansion color palette

EAC6FFNeon Boneyard61E35AHello Spring48B735Exit LightAC4B00Funky Monkey005980Whale’s Tale003D54Maniac Mansion
Open in generator Export PNG, PDF, ASE…

About this palette

Neon Boneyard to Maniac Mansion is a 6-color cool palette: #EAC6FF (Neon Boneyard), #61E35A (Hello Spring), #48B735 (Exit Light), #AC4B00 (Funky Monkey), #005980 (Whale’s Tale), #003D54 (Maniac Mansion). It mixes purple, green, brown, blue tones and feels cool overall. The strongest text pairing is #EAC6FF on #003D54 with a contrast ratio of 7.81:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Neon Boneyardrgb(234, 198, 255)hsl(278, 100%, 89%)
Hello Springrgb(97, 227, 90)hsl(117, 71%, 62%)
Exit Lightrgb(72, 183, 53)hsl(111, 55%, 46%)
Funky Monkeyrgb(172, 75, 0)hsl(26, 100%, 34%)
Whale’s Talergb(0, 89, 128)hsl(198, 100%, 25%)
Maniac Mansionrgb(0, 61, 84)hsl(196, 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.

  • Aa7.81:1 Very good#EAC6FF on #003D54
  • Aa7.81:1 Very good#003D54 on #EAC6FF
  • Aa7.04:1 Very good#61E35A on #003D54
  • Aa7.04:1 Very good#003D54 on #61E35A
  • Aa5.12:1 Good#EAC6FF on #005980
  • Aa5.12:1 Good#005980 on #EAC6FF
  • Aa4.61:1 Good#61E35A on #005980
  • Aa4.61:1 Good#005980 on #61E35A

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Neon Boneyard to Maniac Mansion — https://swatchly.xyz/palette/eac6ff-61e35a-48b735-ac4b00-005980-003d54 */
:root {
  --neon-boneyard: #eac6ff;
  --hello-spring: #61e35a;
  --exit-light: #48b735;
  --funky-monkey: #ac4b00;
  --whale-s-tale: #005980;
  --maniac-mansion: #003d54;
}

Tailwind CSS v4

/* Neon Boneyard to Maniac Mansion — https://swatchly.xyz/palette/eac6ff-61e35a-48b735-ac4b00-005980-003d54 */
@theme {
  --color-neon-boneyard: #eac6ff;
  --color-neon-boneyard-50: #f9f0ff;
  --color-neon-boneyard-100: #f4e2ff;
  --color-neon-boneyard-200: #eac6ff;
  --color-neon-boneyard-300: #d1b2e2;
  --color-neon-boneyard-400: #b392c6;
  --color-neon-boneyard-500: #9876ab;
  --color-neon-boneyard-600: #7c5c8e;
  --color-neon-boneyard-700: #644774;
  --color-neon-boneyard-800: #50365e;
  --color-neon-boneyard-900: #3e284a;
  --color-neon-boneyard-950: #271830;
  --color-hello-spring: #61e35a;
  --color-hello-spring-50: #e4ffe1;
  --color-hello-spring-100: #c3ffbd;
  --color-hello-spring-200: #99f392;
  --color-hello-spring-300: #61e35a;
  --color-hello-spring-400: #43c03d;
  --color-hello-spring-500: #02a402;
  --color-hello-spring-600: #008400;
  --color-hello-spring-700: #006900;
  --color-hello-spring-800: #005200;
  --color-hello-spring-900: #003f00;
  --color-hello-spring-950: #002800;
  --color-exit-light: #48b735;
  --color-exit-light-50: #dbffd4;
  --color-exit-light-100: #b9fdae;
  --color-exit-light-200: #9aeb8d;
  --color-exit-light-300: #78d669;
  --color-exit-light-400: #48b735;
  --color-exit-light-500: #279b09;
  --color-exit-light-600: #1a7e00;
  --color-exit-light-700: #136400;
  --color-exit-light-800: #0d4f00;
  --color-exit-light-900: #083e00;
  --color-exit-light-950: #032800;
  --color-funky-monkey: #ac4b00;
  --color-funky-monkey-50: #fff2ec;
  --color-funky-monkey-100: #ffe5d9;
  --color-funky-monkey-200: #ffcab0;
  --color-funky-monkey-300: #ffa97d;
  --color-funky-monkey-400: #e7844f;
  --color-funky-monkey-500: #ca672c;
  --color-funky-monkey-600: #ac4b00;
  --color-funky-monkey-700: #8a3a00;
  --color-funky-monkey-800: #6d2d00;
  --color-funky-monkey-900: #552100;
  --color-funky-monkey-950: #371300;
  --color-whale-s-tale: #005980;
  --color-whale-s-tale-50: #ebf7ff;
  --color-whale-s-tale-100: #d7efff;
  --color-whale-s-tale-200: #acdfff;
  --color-whale-s-tale-300: #8cc8ee;
  --color-whale-s-tale-400: #65a9d2;
  --color-whale-s-tale-500: #458cb6;
  --color-whale-s-tale-600: #297198;
  --color-whale-s-tale-700: #005980;
  --color-whale-s-tale-800: #034564;
  --color-whale-s-tale-900: #00354f;
  --color-whale-s-tale-950: #002133;
  --color-maniac-mansion: #003d54;
  --color-maniac-mansion-50: #eaf8ff;
  --color-maniac-mansion-100: #d4f0ff;
  --color-maniac-mansion-200: #b7def3;
  --color-maniac-mansion-300: #9bc8e0;
  --color-maniac-mansion-400: #78aac4;
  --color-maniac-mansion-500: #5c90aa;
  --color-maniac-mansion-600: #43768f;
  --color-maniac-mansion-700: #2f5f76;
  --color-maniac-mansion-800: #214c60;
  --color-maniac-mansion-900: #003d54;
  --color-maniac-mansion-950: #0a2633;
}

Similar palettes