Oh Boy! to Midnight Pie color palette

C0D6F9Oh Boy!4DBCF5Megaman 73A8C1Serene Sea 606A9FTwinkle Night 4A427FQueen of the Night Shift 3C2C50Midnight Pie

Open in generator Export PNG, PDF, ASE…

About this palette

Oh Boy! to Midnight Pie is a 6-color cool, gradient palette: #C0D6F9 (Oh Boy!), #4DBCF5 (Megaman), #73A8C1 (Serene Sea), #606A9F (Twinkle Night), #4A427F (Queen of the Night Shift), #3C2C50 (Midnight Pie). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #C0D6F9 on #3C2C50 with a contrast ratio of 8.53:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oh Boy!	rgb(192, 214, 249)	hsl(217, 83%, 86%)
Megaman	rgb(77, 188, 245)	hsl(200, 89%, 63%)
Serene Sea	rgb(115, 168, 193)	hsl(199, 39%, 60%)
Twinkle Night	rgb(96, 106, 159)	hsl(230, 25%, 50%)
Queen of the Night Shift	rgb(74, 66, 127)	hsl(248, 32%, 38%)
Midnight Pie	rgb(60, 44, 80)	hsl(267, 29%, 24%)

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.

Aa8.53:1 Very good#C0D6F9 on #3C2C50
Aa8.53:1 Very good#3C2C50 on #C0D6F9
Aa5.99:1 Good#C0D6F9 on #4A427F
Aa5.99:1 Good#4A427F on #C0D6F9
Aa5.89:1 Good#4DBCF5 on #3C2C50
Aa5.89:1 Good#3C2C50 on #4DBCF5
Aa4.86:1 Good#73A8C1 on #3C2C50
Aa4.86:1 Good#3C2C50 on #73A8C1

Color blindness preview

CSS variables

/* Oh Boy! to Midnight Pie — https://swatchly.xyz/palette/c0d6f9-4dbcf5-73a8c1-606a9f-4a427f-3c2c50 */
:root {
  --oh-boy: #c0d6f9;
  --megaman: #4dbcf5;
  --serene-sea: #73a8c1;
  --twinkle-night: #606a9f;
  --queen-of-the-night-shift: #4a427f;
  --midnight-pie: #3c2c50;
}

Tailwind CSS v4

/* Oh Boy! to Midnight Pie — https://swatchly.xyz/palette/c0d6f9-4dbcf5-73a8c1-606a9f-4a427f-3c2c50 */
@theme {
  --color-oh-boy: #c0d6f9;
  --color-oh-boy-50: #edf4ff;
  --color-oh-boy-100: #dceaff;
  --color-oh-boy-200: #c0d6f9;
  --color-oh-boy-300: #adc0dd;
  --color-oh-boy-400: #8da1c1;
  --color-oh-boy-500: #7286a6;
  --color-oh-boy-600: #596c8a;
  --color-oh-boy-700: #445671;
  --color-oh-boy-800: #34435b;
  --color-oh-boy-900: #273347;
  --color-oh-boy-950: #16202e;
  --color-megaman: #4dbcf5;
  --color-megaman-50: #f5fbff;
  --color-megaman-100: #e6f5ff;
  --color-megaman-200: #c1e8ff;
  --color-megaman-300: #92d7ff;
  --color-megaman-400: #4dbcf5;
  --color-megaman-500: #279dd4;
  --color-megaman-600: #007eaf;
  --color-megaman-700: #00638b;
  --color-megaman-800: #004d6c;
  --color-megaman-900: #003a53;
  --color-megaman-950: #002334;
  --color-serene-sea: #73a8c1;
  --color-serene-sea-50: #e8f7ff;
  --color-serene-sea-100: #d1f0ff;
  --color-serene-sea-200: #b5ddf1;
  --color-serene-sea-300: #99c7dd;
  --color-serene-sea-400: #73a8c1;
  --color-serene-sea-500: #588da5;
  --color-serene-sea-600: #3f7289;
  --color-serene-sea-700: #2c5b70;
  --color-serene-sea-800: #1d475a;
  --color-serene-sea-900: #133747;
  --color-serene-sea-950: #08232e;
  --color-twinkle-night: #606a9f;
  --color-twinkle-night-50: #f2f5ff;
  --color-twinkle-night-100: #e6ebff;
  --color-twinkle-night-200: #cdd6ff;
  --color-twinkle-night-300: #b4bff1;
  --color-twinkle-night-400: #94a0d6;
  --color-twinkle-night-500: #7984bb;
  --color-twinkle-night-600: #606a9f;
  --color-twinkle-night-700: #4b5383;
  --color-twinkle-night-800: #39406a;
  --color-twinkle-night-900: #2b3154;
  --color-twinkle-night-950: #191e37;
  --color-queen-of-the-night-shift: #4a427f;
  --color-queen-of-the-night-shift-50: #f4f4ff;
  --color-queen-of-the-night-shift-100: #e9e9ff;
  --color-queen-of-the-night-shift-200: #d2d0ff;
  --color-queen-of-the-night-shift-300: #b9b5f3;
  --color-queen-of-the-night-shift-400: #9993d5;
  --color-queen-of-the-night-shift-500: #7c76b8;
  --color-queen-of-the-night-shift-600: #615b98;
  --color-queen-of-the-night-shift-700: #4a427f;
  --color-queen-of-the-night-shift-800: #393462;
  --color-queen-of-the-night-shift-900: #2c274e;
  --color-queen-of-the-night-shift-950: #1a1732;
  --color-midnight-pie: #3c2c50;
  --color-midnight-pie-50: #f7f3ff;
  --color-midnight-pie-100: #f0e6ff;
  --color-midnight-pie-200: #ded0f2;
  --color-midnight-pie-300: #c8b9df;
  --color-midnight-pie-400: #aa99c2;
  --color-midnight-pie-500: #8f7ea7;
  --color-midnight-pie-600: #75648c;
  --color-midnight-pie-700: #5e4f73;
  --color-midnight-pie-800: #4a3d5c;
  --color-midnight-pie-900: #3c2c50;
  --color-midnight-pie-950: #251c30;
}