Hyper Blue to Memorial Black Color Palette

About this palette

Hyper Blue to Memorial Black is a 4-color dark, cool, gradient palette: #005D91 (Hyper Blue), #004F5E (Raging Thunderstorm), #00333B (Elite Teal), #0D1600 (Memorial Black). It mixes blue, turquoise, black tones and feels cool overall. The strongest text pairing is #005D91 on #0D1600 with a contrast ratio of 2.63:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hyper Blue	rgb(0, 93, 145)	hsl(202, 100%, 28%)
Raging Thunderstorm	rgb(0, 79, 94)	hsl(190, 100%, 18%)
Elite Teal	rgb(0, 51, 59)	hsl(188, 100%, 12%)
Memorial Black	rgb(13, 22, 0)	hsl(85, 100%, 4%)

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

/* Hyper Blue to Memorial Black — https://swatchly.xyz/palette/005d91-004f5e-00333b-0d1600 */
:root {
  --hyper-blue: #005d91;
  --raging-thunderstorm: #004f5e;
  --elite-teal: #00333b;
  --memorial-black: #0d1600;
}

Tailwind CSS v4

/* Hyper Blue to Memorial Black — https://swatchly.xyz/palette/005d91-004f5e-00333b-0d1600 */
@theme {
  --color-hyper-blue: #005d91;
  --color-hyper-blue-50: #edf7ff;
  --color-hyper-blue-100: #daeeff;
  --color-hyper-blue-200: #b5deff;
  --color-hyper-blue-300: #8bc9fb;
  --color-hyper-blue-400: #64aae1;
  --color-hyper-blue-500: #448fc6;
  --color-hyper-blue-600: #2874a9;
  --color-hyper-blue-700: #005d91;
  --color-hyper-blue-800: #004973;
  --color-hyper-blue-900: #00385a;
  --color-hyper-blue-950: #00233b;
  --color-raging-thunderstorm: #004f5e;
  --color-raging-thunderstorm-50: #e5f9ff;
  --color-raging-thunderstorm-100: #ccf3fe;
  --color-raging-thunderstorm-200: #b2e1ee;
  --color-raging-thunderstorm-300: #96ccda;
  --color-raging-thunderstorm-400: #71aebe;
  --color-raging-thunderstorm-500: #5393a3;
  --color-raging-thunderstorm-600: #397988;
  --color-raging-thunderstorm-700: #256270;
  --color-raging-thunderstorm-800: #004f5e;
  --color-raging-thunderstorm-900: #0b3c47;
  --color-raging-thunderstorm-950: #03262e;
  --color-elite-teal: #00333b;
  --color-elite-teal-50: #e3faff;
  --color-elite-teal-100: #d4f1f7;
  --color-elite-teal-200: #bcdfe6;
  --color-elite-teal-300: #a1c9d1;
  --color-elite-teal-400: #7da9b2;
  --color-elite-teal-500: #5f8c95;
  --color-elite-teal-600: #447079;
  --color-elite-teal-700: #30585f;
  --color-elite-teal-800: #204349;
  --color-elite-teal-900: #00333b;
  --color-elite-teal-950: #0a1e21;
  --color-memorial-black: #0d1600;
  --color-memorial-black-50: #f0f9e6;
  --color-memorial-black-100: #e6efda;
  --color-memorial-black-200: #d1dcc4;
  --color-memorial-black-300: #bac6aa;
  --color-memorial-black-400: #9aa789;
  --color-memorial-black-500: #7c896a;
  --color-memorial-black-600: #606c4f;
  --color-memorial-black-700: #485239;
  --color-memorial-black-800: #343c27;
  --color-memorial-black-900: #232a1a;
  --color-memorial-black-950: #0d1600;
}