Maniac Mansion to Cotton Ball Color Palette

About this palette

Maniac Mansion to Cotton Ball is a 5-color cool, monochromatic, gradient palette: #00445D (Maniac Mansion), #006C98 (Hydra), #4697BD (Enchanted Well), #6EC0E5 (Blue Mana), #F1FAFF (Cotton Ball). It mixes blue, white tones and feels cool overall. The strongest text pairing is #00445D on #F1FAFF with a contrast ratio of 10.00:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Maniac Mansion	rgb(0, 68, 93)	hsl(196, 100%, 18%)
Hydra	rgb(0, 108, 152)	hsl(197, 100%, 30%)
Enchanted Well	rgb(70, 151, 189)	hsl(199, 47%, 51%)
Blue Mana	rgb(110, 192, 229)	hsl(199, 70%, 66%)
Cotton Ball	rgb(241, 250, 255)	hsl(201, 100%, 97%)

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.

Aa10.00:1 Very good#00445D on #F1FAFF
Aa10.00:1 Very good#F1FAFF on #00445D
Aa5.52:1 Good#006C98 on #F1FAFF
Aa5.52:1 Good#F1FAFF on #006C98
Aa5.21:1 Good#00445D on #6EC0E5
Aa5.21:1 Good#6EC0E5 on #00445D
Aa3.24:1 Poor#00445D on #4697BD
Aa3.24:1 Poor#4697BD on #00445D

Color blindness preview

CSS variables

/* Maniac Mansion to Cotton Ball — https://swatchly.xyz/palette/00445d-006c98-4697bd-6ec0e5-f1faff */
:root {
  --maniac-mansion: #00445d;
  --hydra: #006c98;
  --enchanted-well: #4697bd;
  --blue-mana: #6ec0e5;
  --cotton-ball: #f1faff;
}

Tailwind CSS v4

/* Maniac Mansion to Cotton Ball — https://swatchly.xyz/palette/00445d-006c98-4697bd-6ec0e5-f1faff */
@theme {
  --color-maniac-mansion: #00445d;
  --color-maniac-mansion-50: #eaf8ff;
  --color-maniac-mansion-100: #d4f0ff;
  --color-maniac-mansion-200: #b4dff5;
  --color-maniac-mansion-300: #97c8e1;
  --color-maniac-mansion-400: #71a8c4;
  --color-maniac-mansion-500: #538ca8;
  --color-maniac-mansion-600: #39708a;
  --color-maniac-mansion-700: #25586f;
  --color-maniac-mansion-800: #00445d;
  --color-maniac-mansion-900: #0d3445;
  --color-maniac-mansion-950: #05202c;
  --color-hydra: #006c98;
  --color-hydra-50: #ebf7ff;
  --color-hydra-100: #d3eeff;
  --color-hydra-200: #a5ddff;
  --color-hydra-300: #7fc6f0;
  --color-hydra-400: #54a6d3;
  --color-hydra-500: #3188b6;
  --color-hydra-600: #006c98;
  --color-hydra-700: #00567a;
  --color-hydra-800: #004360;
  --color-hydra-900: #00344c;
  --color-hydra-950: #002031;
  --color-enchanted-well: #4697bd;
  --color-enchanted-well-50: #edf8ff;
  --color-enchanted-well-100: #daf2ff;
  --color-enchanted-well-200: #b0e4ff;
  --color-enchanted-well-300: #8fd0f1;
  --color-enchanted-well-400: #67b2d7;
  --color-enchanted-well-500: #4697bd;
  --color-enchanted-well-600: #267a9f;
  --color-enchanted-well-700: #096283;
  --color-enchanted-well-800: #004c68;
  --color-enchanted-well-900: #003a50;
  --color-enchanted-well-950: #002433;
  --color-blue-mana: #6ec0e5;
  --color-blue-mana-50: #dbf3ff;
  --color-blue-mana-100: #bfeaff;
  --color-blue-mana-200: #97d7f5;
  --color-blue-mana-300: #6ec0e5;
  --color-blue-mana-400: #52a2c5;
  --color-blue-mana-500: #3489ac;
  --color-blue-mana-600: #176f91;
  --color-blue-mana-700: #005a77;
  --color-blue-mana-800: #004760;
  --color-blue-mana-900: #00384c;
  --color-blue-mana-950: #002331;
  --color-cotton-ball: #f1faff;
  --color-cotton-ball-50: #f1faff;
  --color-cotton-ball-100: #e9eff2;
  --color-cotton-ball-200: #d4dbde;
  --color-cotton-ball-300: #bcc4c8;
  --color-cotton-ball-400: #9ca4a8;
  --color-cotton-ball-500: #80888c;
  --color-cotton-ball-600: #656d71;
  --color-cotton-ball-700: #50565a;
  --color-cotton-ball-800: #3d4347;
  --color-cotton-ball-900: #2f3436;
  --color-cotton-ball-950: #1c2022;
}