Midnight Edition to Berry Jam Color Palette

About this palette

Midnight Edition to Berry Jam is a 5-color dark, gradient palette: #091320 (Midnight Edition), #31062B (Vienna Roast), #372F42 (Shuriken), #3A455C (Stay the Night), #685986 (Berry Jam). It mixes black, purple, gray, blue tones and feels cool overall. The strongest text pairing is #091320 on #685986 with a contrast ratio of 2.99:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Edition	rgb(9, 19, 32)	hsl(214, 56%, 8%)
Vienna Roast	rgb(49, 6, 43)	hsl(308, 78%, 11%)
Shuriken	rgb(55, 47, 66)	hsl(265, 17%, 22%)
Stay the Night	rgb(58, 69, 92)	hsl(221, 23%, 29%)
Berry Jam	rgb(104, 89, 134)	hsl(260, 20%, 44%)

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

/* Midnight Edition to Berry Jam — https://swatchly.xyz/palette/091320-31062b-372f42-3a455c-685986 */
:root {
  --midnight-edition: #091320;
  --vienna-roast: #31062b;
  --shuriken: #372f42;
  --stay-the-night: #3a455c;
  --berry-jam: #685986;
}

Tailwind CSS v4

/* Midnight Edition to Berry Jam — https://swatchly.xyz/palette/091320-31062b-372f42-3a455c-685986 */
@theme {
  --color-midnight-edition: #091320;
  --color-midnight-edition-50: #eff6ff;
  --color-midnight-edition-100: #e3ecf8;
  --color-midnight-edition-200: #ced9e7;
  --color-midnight-edition-300: #b6c2d2;
  --color-midnight-edition-400: #96a3b4;
  --color-midnight-edition-500: #778596;
  --color-midnight-edition-600: #5b6878;
  --color-midnight-edition-700: #444f5d;
  --color-midnight-edition-800: #313945;
  --color-midnight-edition-900: #212831;
  --color-midnight-edition-950: #091320;
  --color-vienna-roast: #31062b;
  --color-vienna-roast-50: #fff0fb;
  --color-vienna-roast-100: #ffe1f8;
  --color-vienna-roast-200: #f2c9e9;
  --color-vienna-roast-300: #dfb0d4;
  --color-vienna-roast-400: #c18fb6;
  --color-vienna-roast-500: #a5729a;
  --color-vienna-roast-600: #88577e;
  --color-vienna-roast-700: #6d4265;
  --color-vienna-roast-800: #56314e;
  --color-vienna-roast-900: #42233c;
  --color-vienna-roast-950: #31062b;
  --color-shuriken: #372f42;
  --color-shuriken-50: #f7f2ff;
  --color-shuriken-100: #eee8f7;
  --color-shuriken-200: #dbd4e6;
  --color-shuriken-300: #c5bdd1;
  --color-shuriken-400: #a69db3;
  --color-shuriken-500: #8b8298;
  --color-shuriken-600: #70677d;
  --color-shuriken-700: #595165;
  --color-shuriken-800: #463f50;
  --color-shuriken-900: #372f42;
  --color-shuriken-950: #221d28;
  --color-stay-the-night: #3a455c;
  --color-stay-the-night-50: #f0f5ff;
  --color-stay-the-night-100: #e3ebfd;
  --color-stay-the-night-200: #cdd8ed;
  --color-stay-the-night-300: #b6c2d9;
  --color-stay-the-night-400: #96a3bc;
  --color-stay-the-night-500: #7b88a2;
  --color-stay-the-night-600: #626e86;
  --color-stay-the-night-700: #4d586e;
  --color-stay-the-night-800: #3a455c;
  --color-stay-the-night-900: #2d3546;
  --color-stay-the-night-950: #1b212d;
  --color-berry-jam: #685986;
  --color-berry-jam-50: #f6f3ff;
  --color-berry-jam-100: #ece5ff;
  --color-berry-jam-200: #d8cdf4;
  --color-berry-jam-300: #c1b3df;
  --color-berry-jam-400: #a091c1;
  --color-berry-jam-500: #8475a3;
  --color-berry-jam-600: #685986;
  --color-berry-jam-700: #53466c;
  --color-berry-jam-800: #413557;
  --color-berry-jam-900: #322945;
  --color-berry-jam-950: #1f182d;
}