Midnight Mirage to Cotton Ball color palette

03213BMidnight Mirage 2C5480Slumber 4F8DD6Magical Merlin 84C0F6Electric Eel F2F9FFCotton Ball

About this palette

Midnight Mirage to Cotton Ball is a 5-color cool, monochromatic, gradient palette: #03213B (Midnight Mirage), #2C5480 (Slumber), #4F8DD6 (Magical Merlin), #84C0F6 (Electric Eel), #F2F9FF (Cotton Ball). It mixes blue, white tones and feels cool overall. The strongest text pairing is #03213B on #F2F9FF with a contrast ratio of 15.39:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Mirage	rgb(3, 33, 59)	hsl(208, 90%, 12%)
Slumber	rgb(44, 84, 128)	hsl(211, 49%, 34%)
Magical Merlin	rgb(79, 141, 214)	hsl(212, 62%, 57%)
Electric Eel	rgb(132, 192, 246)	hsl(208, 86%, 74%)
Cotton Ball	rgb(242, 249, 255)	hsl(208, 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.

Aa15.39:1 Super#03213B on #F2F9FF
Aa15.39:1 Super#F2F9FF on #03213B
Aa8.45:1 Very good#03213B on #84C0F6
Aa8.45:1 Very good#84C0F6 on #03213B
Aa7.36:1 Very good#2C5480 on #F2F9FF
Aa7.36:1 Very good#F2F9FF on #2C5480
Aa4.76:1 Good#03213B on #4F8DD6
Aa4.76:1 Good#4F8DD6 on #03213B

Color blindness preview

CSS variables

/* Midnight Mirage to Cotton Ball — https://swatchly.xyz/palette/03213b-2c5480-4f8dd6-84c0f6-f2f9ff */
:root {
  --midnight-mirage: #03213b;
  --slumber: #2c5480;
  --magical-merlin: #4f8dd6;
  --electric-eel: #84c0f6;
  --cotton-ball: #f2f9ff;
}

Tailwind CSS v4

/* Midnight Mirage to Cotton Ball — https://swatchly.xyz/palette/03213b-2c5480-4f8dd6-84c0f6-f2f9ff */
@theme {
  --color-midnight-mirage: #03213b;
  --color-midnight-mirage-50: #eef6ff;
  --color-midnight-mirage-100: #dcedff;
  --color-midnight-mirage-200: #c1dbf5;
  --color-midnight-mirage-300: #a7c4e2;
  --color-midnight-mirage-400: #85a5c5;
  --color-midnight-mirage-500: #698aaa;
  --color-midnight-mirage-600: #506f8d;
  --color-midnight-mirage-700: #3c5874;
  --color-midnight-mirage-800: #2c455d;
  --color-midnight-mirage-900: #203549;
  --color-midnight-mirage-950: #03213b;
  --color-slumber: #2c5480;
  --color-slumber-50: #eef6ff;
  --color-slumber-100: #deedff;
  --color-slumber-200: #badaff;
  --color-slumber-300: #9ec3ef;
  --color-slumber-400: #7aa3d2;
  --color-slumber-500: #5d87b6;
  --color-slumber-600: #446c98;
  --color-slumber-700: #2c5480;
  --color-slumber-800: #224164;
  --color-slumber-900: #17324f;
  --color-slumber-950: #0b1f34;
  --color-magical-merlin: #4f8dd6;
  --color-magical-merlin-50: #f0f7ff;
  --color-magical-merlin-100: #e1eeff;
  --color-magical-merlin-200: #c1ddff;
  --color-magical-merlin-300: #9ac8ff;
  --color-magical-merlin-400: #6da9f0;
  --color-magical-merlin-500: #4f8dd6;
  --color-magical-merlin-600: #3471b7;
  --color-magical-merlin-700: #1f5998;
  --color-magical-merlin-800: #10447c;
  --color-magical-merlin-900: #063463;
  --color-magical-merlin-950: #012042;
  --color-electric-eel: #84c0f6;
  --color-electric-eel-50: #e7f3ff;
  --color-electric-eel-100: #d2e9ff;
  --color-electric-eel-200: #abd7ff;
  --color-electric-eel-300: #84c0f6;
  --color-electric-eel-400: #68a1d4;
  --color-electric-eel-500: #4c87ba;
  --color-electric-eel-600: #346d9d;
  --color-electric-eel-700: #225782;
  --color-electric-eel-800: #14446a;
  --color-electric-eel-900: #0b3556;
  --color-electric-eel-950: #042138;
  --color-cotton-ball: #f2f9ff;
  --color-cotton-ball-50: #f2f9ff;
  --color-cotton-ball-100: #eaeef2;
  --color-cotton-ball-200: #d5dade;
  --color-cotton-ball-300: #bdc3c8;
  --color-cotton-ball-400: #9da3a9;
  --color-cotton-ball-500: #81878d;
  --color-cotton-ball-600: #676d72;
  --color-cotton-ball-700: #51565b;
  --color-cotton-ball-800: #3e4347;
  --color-cotton-ball-900: #2f3337;
  --color-cotton-ball-950: #1d2022;
}