Sky to One Minute to Midnight Color Palette

About this palette

Sky to One Minute to Midnight is a 5-color cool, gradient palette: #7FE1FF (Sky), #5DB6DA (Malibu), #5A8AC6 (Marina), #6862A6 (Scampi), #053B84 (One Minute to Midnight). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #7FE1FF on #053B84 with a contrast ratio of 7.18:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sky	rgb(127, 225, 255)	hsl(194, 100%, 75%)
Malibu	rgb(93, 182, 218)	hsl(197, 63%, 61%)
Marina	rgb(90, 138, 198)	hsl(213, 49%, 56%)
Scampi	rgb(104, 98, 166)	hsl(245, 28%, 52%)
One Minute to Midnight	rgb(5, 59, 132)	hsl(214, 93%, 27%)

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.18:1 Very good#7FE1FF on #053B84
Aa7.18:1 Very good#053B84 on #7FE1FF
Aa4.67:1 Good#5DB6DA on #053B84
Aa4.67:1 Good#053B84 on #5DB6DA
Aa3.63:1 Poor#7FE1FF on #6862A6
Aa3.63:1 Poor#6862A6 on #7FE1FF

Color blindness preview

CSS variables

/* Sky to One Minute to Midnight — https://swatchly.xyz/palette/7fe1ff-5db6da-5a8ac6-6862a6-053b84 */
:root {
  --sky: #7fe1ff;
  --malibu: #5db6da;
  --marina: #5a8ac6;
  --scampi: #6862a6;
  --one-minute-to-midnight: #053b84;
}

Tailwind CSS v4

/* Sky to One Minute to Midnight — https://swatchly.xyz/palette/7fe1ff-5db6da-5a8ac6-6862a6-053b84 */
@theme {
  --color-sky: #7fe1ff;
  --color-sky-50: #dcf6ff;
  --color-sky-100: #bfefff;
  --color-sky-200: #7fe1ff;
  --color-sky-300: #76c9e3;
  --color-sky-400: #4cacc7;
  --color-sky-500: #2591ad;
  --color-sky-600: #007690;
  --color-sky-700: #005e73;
  --color-sky-800: #004a5c;
  --color-sky-900: #003947;
  --color-sky-950: #00242e;
  --color-malibu: #5db6da;
  --color-malibu-50: #effaff;
  --color-malibu-100: #dcf4ff;
  --color-malibu-200: #afe7ff;
  --color-malibu-300: #8dd3f1;
  --color-malibu-400: #5db6da;
  --color-malibu-500: #3e98bb;
  --color-malibu-600: #187b9d;
  --color-malibu-700: #00627f;
  --color-malibu-800: #004c64;
  --color-malibu-900: #003a4d;
  --color-malibu-950: #002330;
  --color-marina: #5a8ac6;
  --color-marina-50: #eff6ff;
  --color-marina-100: #dfedff;
  --color-marina-200: #bfdbff;
  --color-marina-300: #9bc5fb;
  --color-marina-400: #77a6e1;
  --color-marina-500: #5a8ac6;
  --color-marina-600: #406fa8;
  --color-marina-700: #2d578b;
  --color-marina-800: #1e4471;
  --color-marina-900: #14345a;
  --color-marina-950: #08203b;
  --color-scampi: #6862a6;
  --color-scampi-50: #f4f4ff;
  --color-scampi-100: #e9e9ff;
  --color-scampi-200: #d4d3ff;
  --color-scampi-300: #bcb9f9;
  --color-scampi-400: #9d98de;
  --color-scampi-500: #827dc3;
  --color-scampi-600: #6862a6;
  --color-scampi-700: #524c89;
  --color-scampi-800: #403a6f;
  --color-scampi-900: #312c58;
  --color-scampi-950: #1e1a3a;
  --color-one-minute-to-midnight: #053b84;
  --color-one-minute-to-midnight-50: #eff6ff;
  --color-one-minute-to-midnight-100: #e0ecff;
  --color-one-minute-to-midnight-200: #c0d9ff;
  --color-one-minute-to-midnight-300: #9ac2ff;
  --color-one-minute-to-midnight-400: #6da1f0;
  --color-one-minute-to-midnight-500: #5084d4;
  --color-one-minute-to-midnight-600: #3768b4;
  --color-one-minute-to-midnight-700: #245195;
  --color-one-minute-to-midnight-800: #053b84;
  --color-one-minute-to-midnight-900: #0d2e60;
  --color-one-minute-to-midnight-950: #051c3f;
}