Narwhal Grey to Chill of the Night color palette

About this palette

Narwhal Grey to Chill of the Night is a 5-color dark, cool palette: #050816 (Narwhal Grey), #2C4962 (Stay the Night), #003C54 (Maniac Mansion), #2F1243 (Dark Purple), #1A6D8E (Chill of the Night). It mixes black, blue, purple tones and feels cool overall. The strongest text pairing is #050816 on #1A6D8E with a contrast ratio of 3.44:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Narwhal Greyrgb(5, 8, 22)hsl(229, 63%, 5%)
Stay the Nightrgb(44, 73, 98)hsl(208, 38%, 28%)
Maniac Mansionrgb(0, 60, 84)hsl(197, 100%, 16%)
Dark Purplergb(47, 18, 67)hsl(276, 58%, 17%)
Chill of the Nightrgb(26, 109, 142)hsl(197, 69%, 33%)

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.

  • Aa3.44:1 Poor#050816 on #1A6D8E
  • Aa3.44:1 Poor#1A6D8E on #050816

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Narwhal Grey to Chill of the Night — https://swatchly.xyz/palette/050816-2c4962-003c54-2f1243-1a6d8e */
:root {
  --narwhal-grey: #050816;
  --stay-the-night: #2c4962;
  --maniac-mansion: #003c54;
  --dark-purple: #2f1243;
  --chill-of-the-night: #1a6d8e;
}

Tailwind CSS v4

/* Narwhal Grey to Chill of the Night — https://swatchly.xyz/palette/050816-2c4962-003c54-2f1243-1a6d8e */
@theme {
  --color-narwhal-grey: #050816;
  --color-narwhal-grey-50: #f1f5ff;
  --color-narwhal-grey-100: #e6ebf9;
  --color-narwhal-grey-200: #d1d7e8;
  --color-narwhal-grey-300: #bac0d3;
  --color-narwhal-grey-400: #9aa1b5;
  --color-narwhal-grey-500: #7a8195;
  --color-narwhal-grey-600: #5b6274;
  --color-narwhal-grey-700: #424757;
  --color-narwhal-grey-800: #2c313d;
  --color-narwhal-grey-900: #1b1e27;
  --color-narwhal-grey-950: #050816;
  --color-stay-the-night: #2c4962;
  --color-stay-the-night-50: #edf6ff;
  --color-stay-the-night-100: #dbeeff;
  --color-stay-the-night-200: #c2dbf1;
  --color-stay-the-night-300: #aac5df;
  --color-stay-the-night-400: #88a7c2;
  --color-stay-the-night-500: #6d8ca8;
  --color-stay-the-night-600: #54728d;
  --color-stay-the-night-700: #405c74;
  --color-stay-the-night-800: #2c4962;
  --color-stay-the-night-900: #23384a;
  --color-stay-the-night-950: #142330;
  --color-maniac-mansion: #003c54;
  --color-maniac-mansion-50: #eaf7ff;
  --color-maniac-mansion-100: #d5f0ff;
  --color-maniac-mansion-200: #b7def4;
  --color-maniac-mansion-300: #9bc8e1;
  --color-maniac-mansion-400: #78aac5;
  --color-maniac-mansion-500: #5c8fab;
  --color-maniac-mansion-600: #43758f;
  --color-maniac-mansion-700: #2f5e76;
  --color-maniac-mansion-800: #204b60;
  --color-maniac-mansion-900: #003c54;
  --color-maniac-mansion-950: #0a2533;
  --color-dark-purple: #2f1243;
  --color-dark-purple-50: #f9f2ff;
  --color-dark-purple-100: #f2e5ff;
  --color-dark-purple-200: #e4ccfa;
  --color-dark-purple-300: #cfb4e8;
  --color-dark-purple-400: #b193cb;
  --color-dark-purple-500: #9678b1;
  --color-dark-purple-600: #7c5e95;
  --color-dark-purple-700: #654a7b;
  --color-dark-purple-800: #513964;
  --color-dark-purple-900: #402b51;
  --color-dark-purple-950: #2f1243;
  --color-chill-of-the-night: #1a6d8e;
  --color-chill-of-the-night-50: #eaf8ff;
  --color-chill-of-the-night-100: #d1efff;
  --color-chill-of-the-night-200: #a6defa;
  --color-chill-of-the-night-300: #86c7e6;
  --color-chill-of-the-night-400: #5da6c9;
  --color-chill-of-the-night-500: #3c89ab;
  --color-chill-of-the-night-600: #1a6d8e;
  --color-chill-of-the-night-700: #085773;
  --color-chill-of-the-night-800: #00445c;
  --color-chill-of-the-night-900: #003548;
  --color-chill-of-the-night-950: #00212f;
}

Similar palettes