Infinite Night to Minute Mauve color palette

0F103BInfinite Night 004A69Raging Thunderstorm 3974CBFading Night 1AC2FFTractor Beam ECE3FFMinute Mauve

Open in generator Export PNG, PDF, ASE…

About this palette

Infinite Night to Minute Mauve is a 5-color cool, gradient palette: #0F103B (Infinite Night), #004A69 (Raging Thunderstorm), #3974CB (Fading Night), #1AC2FF (Tractor Beam), #ECE3FF (Minute Mauve). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #0F103B on #ECE3FF with a contrast ratio of 14.68:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Infinite Night	rgb(15, 16, 59)	hsl(239, 59%, 15%)
Raging Thunderstorm	rgb(0, 74, 105)	hsl(198, 100%, 21%)
Fading Night	rgb(57, 116, 203)	hsl(216, 58%, 51%)
Tractor Beam	rgb(26, 194, 255)	hsl(196, 100%, 55%)
Minute Mauve	rgb(236, 227, 255)	hsl(259, 100%, 95%)

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.

Aa14.68:1 Super#0F103B on #ECE3FF
Aa14.68:1 Super#ECE3FF on #0F103B
Aa8.82:1 Very good#0F103B on #1AC2FF
Aa8.82:1 Very good#1AC2FF on #0F103B
Aa7.78:1 Very good#004A69 on #ECE3FF
Aa7.78:1 Very good#ECE3FF on #004A69
Aa4.67:1 Good#004A69 on #1AC2FF
Aa4.67:1 Good#1AC2FF on #004A69

Color blindness preview

CSS variables

/* Infinite Night to Minute Mauve — https://swatchly.xyz/palette/0f103b-004a69-3974cb-1ac2ff-ece3ff */
:root {
  --infinite-night: #0f103b;
  --raging-thunderstorm: #004a69;
  --fading-night: #3974cb;
  --tractor-beam: #1ac2ff;
  --minute-mauve: #ece3ff;
}

Tailwind CSS v4

/* Infinite Night to Minute Mauve — https://swatchly.xyz/palette/0f103b-004a69-3974cb-1ac2ff-ece3ff */
@theme {
  --color-infinite-night: #0f103b;
  --color-infinite-night-50: #f2f5ff;
  --color-infinite-night-100: #e5eaff;
  --color-infinite-night-200: #ccd5ff;
  --color-infinite-night-300: #b4beee;
  --color-infinite-night-400: #949ed2;
  --color-infinite-night-500: #7780b5;
  --color-infinite-night-600: #5c6496;
  --color-infinite-night-700: #454d79;
  --color-infinite-night-800: #33395e;
  --color-infinite-night-900: #242947;
  --color-infinite-night-950: #0f103b;
  --color-raging-thunderstorm: #004a69;
  --color-raging-thunderstorm-50: #ebf7ff;
  --color-raging-thunderstorm-100: #d6efff;
  --color-raging-thunderstorm-200: #b1dffa;
  --color-raging-thunderstorm-300: #95c9e8;
  --color-raging-thunderstorm-400: #70aacc;
  --color-raging-thunderstorm-500: #528fb1;
  --color-raging-thunderstorm-600: #387495;
  --color-raging-thunderstorm-700: #245d7b;
  --color-raging-thunderstorm-800: #004a69;
  --color-raging-thunderstorm-900: #0b394f;
  --color-raging-thunderstorm-950: #032333;
  --color-fading-night: #3974cb;
  --color-fading-night-50: #eff6ff;
  --color-fading-night-100: #e3eeff;
  --color-fading-night-200: #c6ddff;
  --color-fading-night-300: #a4c8ff;
  --color-fading-night-400: #70a9ff;
  --color-fading-night-500: #538ee7;
  --color-fading-night-600: #3974cb;
  --color-fading-night-700: #235bab;
  --color-fading-night-800: #13458c;
  --color-fading-night-900: #083471;
  --color-fading-night-950: #02204b;
  --color-tractor-beam: #1ac2ff;
  --color-tractor-beam-50: #d9f2ff;
  --color-tractor-beam-100: #bde9ff;
  --color-tractor-beam-200: #85d7ff;
  --color-tractor-beam-300: #1ac2ff;
  --color-tractor-beam-400: #00a3d9;
  --color-tractor-beam-500: #0089b6;
  --color-tractor-beam-600: #006f94;
  --color-tractor-beam-700: #005978;
  --color-tractor-beam-800: #004760;
  --color-tractor-beam-900: #00384d;
  --color-tractor-beam-950: #002332;
  --color-minute-mauve: #ece3ff;
  --color-minute-mauve-50: #f5f0ff;
  --color-minute-mauve-100: #ece3ff;
  --color-minute-mauve-200: #d8d1e6;
  --color-minute-mauve-300: #c2bbd2;
  --color-minute-mauve-400: #a39bb4;
  --color-minute-mauve-500: #89809a;
  --color-minute-mauve-600: #6f677f;
  --color-minute-mauve-700: #585167;
  --color-minute-mauve-800: #453f51;
  --color-minute-mauve-900: #35303f;
  --color-minute-mauve-950: #211d28;
}