Into the Night to Voila! Color Palette

About this palette

Into the Night to Voila! is a 5-color muted, warm, vintage palette: #1B373E (Into the Night), #926B81 (Fruit of Passion), #B7D5DF (Pale Whale), #4E4A2B (Jungle King), #AE89A6 (Voila!). It mixes blue, red, gray, brown, pink tones and feels warm overall. The strongest text pairing is #1B373E on #B7D5DF with a contrast ratio of 8.18:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Into the Night	rgb(27, 55, 62)	hsl(192, 39%, 17%)
Fruit of Passion	rgb(146, 107, 129)	hsl(326, 15%, 50%)
Pale Whale	rgb(183, 213, 223)	hsl(195, 38%, 80%)
Jungle King	rgb(78, 74, 43)	hsl(53, 29%, 24%)
Voila!	rgb(174, 137, 166)	hsl(313, 19%, 61%)

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.

Aa8.18:1 Very good#1B373E on #B7D5DF
Aa8.18:1 Very good#B7D5DF on #1B373E
Aa5.81:1 Good#B7D5DF on #4E4A2B
Aa5.81:1 Good#4E4A2B on #B7D5DF
Aa4.17:1 Poor#1B373E on #AE89A6
Aa4.17:1 Poor#AE89A6 on #1B373E

Color blindness preview

CSS variables

/* Into the Night to Voila! — https://swatchly.xyz/palette/1b373e-926b81-b7d5df-4e4a2b-ae89a6 */
:root {
  --into-the-night: #1b373e;
  --fruit-of-passion: #926b81;
  --pale-whale: #b7d5df;
  --jungle-king: #4e4a2b;
  --voila: #ae89a6;
}

Tailwind CSS v4

/* Into the Night to Voila! — https://swatchly.xyz/palette/1b373e-926b81-b7d5df-4e4a2b-ae89a6 */
@theme {
  --color-into-the-night: #1b373e;
  --color-into-the-night-50: #e7f9fe;
  --color-into-the-night-100: #dbeff5;
  --color-into-the-night-200: #c5dce3;
  --color-into-the-night-300: #abc6ce;
  --color-into-the-night-400: #8aa7af;
  --color-into-the-night-500: #6e8c94;
  --color-into-the-night-600: #547179;
  --color-into-the-night-700: #405a61;
  --color-into-the-night-800: #2f464c;
  --color-into-the-night-900: #1b373e;
  --color-into-the-night-950: #132125;
  --color-fruit-of-passion: #926b81;
  --color-fruit-of-passion-50: #fff0f8;
  --color-fruit-of-passion-100: #ffe5f3;
  --color-fruit-of-passion-200: #f1d2e3;
  --color-fruit-of-passion-300: #e0bcd0;
  --color-fruit-of-passion-400: #c59db3;
  --color-fruit-of-passion-500: #ac839a;
  --color-fruit-of-passion-600: #926b81;
  --color-fruit-of-passion-700: #775367;
  --color-fruit-of-passion-800: #5e3f51;
  --color-fruit-of-passion-900: #492f3e;
  --color-fruit-of-passion-950: #2f1c27;
  --color-pale-whale: #b7d5df;
  --color-pale-whale-50: #e1f3f9;
  --color-pale-whale-100: #d4e8ef;
  --color-pale-whale-200: #b7d5df;
  --color-pale-whale-300: #a5bfc8;
  --color-pale-whale-400: #86a2ab;
  --color-pale-whale-500: #6c8891;
  --color-pale-whale-600: #546e77;
  --color-pale-whale-700: #405960;
  --color-pale-whale-800: #31464d;
  --color-pale-whale-900: #24363c;
  --color-pale-whale-950: #142226;
  --color-jungle-king: #4e4a2b;
  --color-jungle-king-50: #f8f6e2;
  --color-jungle-king-100: #efecd6;
  --color-jungle-king-200: #dcd9bf;
  --color-jungle-king-300: #c7c4a6;
  --color-jungle-king-400: #a9a685;
  --color-jungle-king-500: #8f8b6a;
  --color-jungle-king-600: #767252;
  --color-jungle-king-700: #605c3e;
  --color-jungle-king-800: #4e4a2b;
  --color-jungle-king-900: #3c3922;
  --color-jungle-king-950: #262413;
  --color-voila: #ae89a6;
  --color-voila-50: #ffeafa;
  --color-voila-100: #f7dcf0;
  --color-voila-200: #e4c5dd;
  --color-voila-300: #ceabc6;
  --color-voila-400: #ae89a6;
  --color-voila-500: #94708c;
  --color-voila-600: #7a5873;
  --color-voila-700: #63455d;
  --color-voila-800: #4f354a;
  --color-voila-900: #3f293b;
  --color-voila-950: #291926;
}