Maniac Mansion to Icy Plains color palette

0A4257Maniac Mansion 0077A0Pristine Seas 9A91CBEaster Egg 9BC1FFPastel Blue CDDDFFIcy Plains

About this palette

Maniac Mansion to Icy Plains is a 5-color cool, gradient palette: #0A4257 (Maniac Mansion), #0077A0 (Pristine Seas), #9A91CB (Easter Egg), #9BC1FF (Pastel Blue), #CDDDFF (Icy Plains). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #0A4257 on #CDDDFF with a contrast ratio of 7.97:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Maniac Mansion	rgb(10, 66, 87)	hsl(196, 79%, 19%)
Pristine Seas	rgb(0, 119, 160)	hsl(195, 100%, 31%)
Easter Egg	rgb(154, 145, 203)	hsl(249, 36%, 68%)
Pastel Blue	rgb(155, 193, 255)	hsl(217, 100%, 80%)
Icy Plains	rgb(205, 221, 255)	hsl(221, 100%, 90%)

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.97:1 Very good#0A4257 on #CDDDFF
Aa7.97:1 Very good#CDDDFF on #0A4257
Aa5.94:1 Good#0A4257 on #9BC1FF
Aa5.94:1 Good#9BC1FF on #0A4257
Aa3.78:1 Poor#0A4257 on #9A91CB
Aa3.78:1 Poor#9A91CB on #0A4257
Aa3.71:1 Poor#0077A0 on #CDDDFF
Aa3.71:1 Poor#CDDDFF on #0077A0

Color blindness preview

CSS variables

/* Maniac Mansion to Icy Plains — https://swatchly.xyz/palette/0a4257-0077a0-9a91cb-9bc1ff-cdddff */
:root {
  --maniac-mansion: #0a4257;
  --pristine-seas: #0077a0;
  --easter-egg: #9a91cb;
  --pastel-blue: #9bc1ff;
  --icy-plains: #cdddff;
}

Tailwind CSS v4

/* Maniac Mansion to Icy Plains — https://swatchly.xyz/palette/0a4257-0077a0-9a91cb-9bc1ff-cdddff */
@theme {
  --color-maniac-mansion: #0a4257;
  --color-maniac-mansion-50: #e9f8ff;
  --color-maniac-mansion-100: #d3f1ff;
  --color-maniac-mansion-200: #b8def1;
  --color-maniac-mansion-300: #9bc7dd;
  --color-maniac-mansion-400: #76a7be;
  --color-maniac-mansion-500: #588aa2;
  --color-maniac-mansion-600: #3e6e84;
  --color-maniac-mansion-700: #29566a;
  --color-maniac-mansion-800: #0a4257;
  --color-maniac-mansion-900: #113240;
  --color-maniac-mansion-950: #071e28;
  --color-pristine-seas: #0077a0;
  --color-pristine-seas-50: #eaf8ff;
  --color-pristine-seas-100: #d5f0ff;
  --color-pristine-seas-200: #a8e1ff;
  --color-pristine-seas-300: #81cdf3;
  --color-pristine-seas-400: #56aed7;
  --color-pristine-seas-500: #3292bc;
  --color-pristine-seas-600: #0077a0;
  --color-pristine-seas-700: #005e80;
  --color-pristine-seas-800: #004a65;
  --color-pristine-seas-900: #00394f;
  --color-pristine-seas-950: #002333;
  --color-easter-egg: #9a91cb;
  --color-easter-egg-50: #f2f0ff;
  --color-easter-egg-100: #e7e3ff;
  --color-easter-egg-200: #d2cbfb;
  --color-easter-egg-300: #bab3e8;
  --color-easter-egg-400: #9a91cb;
  --color-easter-egg-500: #8077af;
  --color-easter-egg-600: #675e93;
  --color-easter-egg-700: #524a79;
  --color-easter-egg-800: #413962;
  --color-easter-egg-900: #322b4f;
  --color-easter-egg-950: #201b34;
  --color-pastel-blue: #9bc1ff;
  --color-pastel-blue-50: #eff5ff;
  --color-pastel-blue-100: #dfebff;
  --color-pastel-blue-200: #c0d8ff;
  --color-pastel-blue-300: #9bc1ff;
  --color-pastel-blue-400: #7ea1db;
  --color-pastel-blue-500: #6286c0;
  --color-pastel-blue-600: #4a6ba2;
  --color-pastel-blue-700: #365587;
  --color-pastel-blue-800: #27426d;
  --color-pastel-blue-900: #1c3257;
  --color-pastel-blue-950: #0f1f39;
  --color-icy-plains: #cdddff;
  --color-icy-plains-50: #f6f9ff;
  --color-icy-plains-100: #e9f0ff;
  --color-icy-plains-200: #cdddff;
  --color-icy-plains-300: #b8c5e1;
  --color-icy-plains-400: #97a5c4;
  --color-icy-plains-500: #7a89a8;
  --color-icy-plains-600: #606d8b;
  --color-icy-plains-700: #4a5670;
  --color-icy-plains-800: #384259;
  --color-icy-plains-900: #2a3346;
  --color-icy-plains-950: #191f2d;
}