Fading Night to Infrared Color Palette

About this palette

Fading Night to Infrared is a 5-color vibrant, warm palette: #0071D3 (Fading Night), #D054A6 (Sugar Rush), #B4A4FF (Diva), #FF9498 (Mad Pinker), #FF4E72 (Infrared). It mixes blue, pink, purple, red tones and feels warm overall. The strongest text pairing is #0071D3 on #FF9498 with a contrast ratio of 2.31:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fading Night	rgb(0, 113, 211)	hsl(208, 100%, 41%)
Sugar Rush	rgb(208, 84, 166)	hsl(320, 57%, 57%)
Diva	rgb(180, 164, 255)	hsl(251, 100%, 82%)
Mad Pinker	rgb(255, 148, 152)	hsl(358, 100%, 79%)
Infrared	rgb(255, 78, 114)	hsl(348, 100%, 65%)

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.

Color blindness preview

CSS variables

/* Fading Night to Infrared — https://swatchly.xyz/palette/0071d3-d054a6-b4a4ff-ff9498-ff4e72 */
:root {
  --fading-night: #0071d3;
  --sugar-rush: #d054a6;
  --diva: #b4a4ff;
  --mad-pinker: #ff9498;
  --infrared: #ff4e72;
}

Tailwind CSS v4

/* Fading Night to Infrared — https://swatchly.xyz/palette/0071d3-d054a6-b4a4ff-ff9498-ff4e72 */
@theme {
  --color-fading-night: #0071d3;
  --color-fading-night-50: #eff6ff;
  --color-fading-night-100: #e0eeff;
  --color-fading-night-200: #c1ddff;
  --color-fading-night-300: #9bc8ff;
  --color-fading-night-400: #5fa9ff;
  --color-fading-night-500: #2f8cf0;
  --color-fading-night-600: #0071d3;
  --color-fading-night-700: #0059a9;
  --color-fading-night-800: #004586;
  --color-fading-night-900: #003569;
  --color-fading-night-950: #002145;
  --color-sugar-rush: #d054a6;
  --color-sugar-rush-50: #fff1f9;
  --color-sugar-rush-100: #ffe3f3;
  --color-sugar-rush-200: #ffc6e7;
  --color-sugar-rush-300: #ffa0da;
  --color-sugar-rush-400: #ec73c1;
  --color-sugar-rush-500: #d054a6;
  --color-sugar-rush-600: #b03789;
  --color-sugar-rush-700: #922070;
  --color-sugar-rush-800: #760e59;
  --color-sugar-rush-900: #5e0345;
  --color-sugar-rush-950: #3d002c;
  --color-diva: #b4a4ff;
  --color-diva-50: #eeebff;
  --color-diva-100: #e1ddff;
  --color-diva-200: #ccc3ff;
  --color-diva-300: #b4a4ff;
  --color-diva-400: #9787de;
  --color-diva-500: #7f6ec4;
  --color-diva-600: #6756a7;
  --color-diva-700: #53438c;
  --color-diva-800: #423374;
  --color-diva-900: #34275f;
  --color-diva-950: #20173f;
  --color-mad-pinker: #ff9498;
  --color-mad-pinker-50: #ffebea;
  --color-mad-pinker-100: #ffdada;
  --color-mad-pinker-200: #ffbbbc;
  --color-mad-pinker-300: #ff9498;
  --color-mad-pinker-400: #dd777c;
  --color-mad-pinker-500: #c15d63;
  --color-mad-pinker-600: #a3444b;
  --color-mad-pinker-700: #873139;
  --color-mad-pinker-800: #6f232b;
  --color-mad-pinker-900: #5a1820;
  --color-mad-pinker-950: #3b0c11;
  --color-infrared: #ff4e72;
  --color-infrared-50: #ffedee;
  --color-infrared-100: #ffdcdf;
  --color-infrared-200: #ffbdc3;
  --color-infrared-300: #ff96a2;
  --color-infrared-400: #ff4e72;
  --color-infrared-500: #e02c59;
  --color-infrared-600: #be0043;
  --color-infrared-700: #990035;
  --color-infrared-800: #7b0028;
  --color-infrared-900: #62001e;
  --color-infrared-950: #420012;
}