Black Box to Moon Veil Color Palette

About this palette

Black Box to Moon Veil is a 5-color muted, cool palette: #17262E (Black Box), #B2D3F1 (Frost Fairy), #56476E (Haunted Candelabra), #647287 (Plumbeous), #8E98B4 (Moon Veil). It mixes gray, blue, purple tones and feels cool overall. The strongest text pairing is #17262E on #B2D3F1 with a contrast ratio of 9.96:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Box	rgb(23, 38, 46)	hsl(201, 33%, 14%)
Frost Fairy	rgb(178, 211, 241)	hsl(209, 69%, 82%)
Haunted Candelabra	rgb(86, 71, 110)	hsl(263, 22%, 35%)
Plumbeous	rgb(100, 114, 135)	hsl(216, 15%, 46%)
Moon Veil	rgb(142, 152, 180)	hsl(224, 20%, 63%)

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.

Aa9.96:1 Very good#17262E on #B2D3F1
Aa9.96:1 Very good#B2D3F1 on #17262E
Aa5.40:1 Good#17262E on #8E98B4
Aa5.40:1 Good#8E98B4 on #17262E
Aa5.35:1 Good#B2D3F1 on #56476E
Aa5.35:1 Good#56476E on #B2D3F1
Aa3.18:1 Poor#17262E on #647287
Aa3.18:1 Poor#647287 on #17262E

Color blindness preview

CSS variables

/* Black Box to Moon Veil — https://swatchly.xyz/palette/17262e-b2d3f1-56476e-647287-8e98b4 */
:root {
  --black-box: #17262e;
  --frost-fairy: #b2d3f1;
  --haunted-candelabra: #56476e;
  --plumbeous: #647287;
  --moon-veil: #8e98b4;
}

Tailwind CSS v4

/* Black Box to Moon Veil — https://swatchly.xyz/palette/17262e-b2d3f1-56476e-647287-8e98b4 */
@theme {
  --color-black-box: #17262e;
  --color-black-box-50: #ecf7fd;
  --color-black-box-100: #e1edf4;
  --color-black-box-200: #ccdae2;
  --color-black-box-300: #b4c4cd;
  --color-black-box-400: #93a5ae;
  --color-black-box-500: #798a94;
  --color-black-box-600: #60707a;
  --color-black-box-700: #4b5a63;
  --color-black-box-800: #3a4850;
  --color-black-box-900: #2d393f;
  --color-black-box-950: #17262e;
  --color-frost-fairy: #b2d3f1;
  --color-frost-fairy-50: #e2f1ff;
  --color-frost-fairy-100: #d1e7fb;
  --color-frost-fairy-200: #b2d3f1;
  --color-frost-fairy-300: #a1bdd7;
  --color-frost-fairy-400: #81a0bb;
  --color-frost-fairy-500: #6786a1;
  --color-frost-fairy-600: #4f6d87;
  --color-frost-fairy-700: #3c576f;
  --color-frost-fairy-800: #2d455a;
  --color-frost-fairy-900: #213546;
  --color-frost-fairy-950: #12212d;
  --color-haunted-candelabra: #56476e;
  --color-haunted-candelabra-50: #f7f3ff;
  --color-haunted-candelabra-100: #efe6ff;
  --color-haunted-candelabra-200: #dccff2;
  --color-haunted-candelabra-300: #c5b7de;
  --color-haunted-candelabra-400: #a596c0;
  --color-haunted-candelabra-500: #8979a4;
  --color-haunted-candelabra-600: #6d5e86;
  --color-haunted-candelabra-700: #56476e;
  --color-haunted-candelabra-800: #433756;
  --color-haunted-candelabra-900: #342a43;
  --color-haunted-candelabra-950: #20192b;
  --color-plumbeous: #647287;
  --color-plumbeous-50: #eff6ff;
  --color-plumbeous-100: #e3edfc;
  --color-plumbeous-200: #cfdaec;
  --color-plumbeous-300: #b8c5d8;
  --color-plumbeous-400: #98a6bc;
  --color-plumbeous-500: #7d8ca1;
  --color-plumbeous-600: #647287;
  --color-plumbeous-700: #4e5a6d;
  --color-plumbeous-800: #3b4657;
  --color-plumbeous-900: #2c3644;
  --color-plumbeous-950: #1a212b;
  --color-moon-veil: #8e98b4;
  --color-moon-veil-50: #edf2ff;
  --color-moon-veil-100: #dfe6fa;
  --color-moon-veil-200: #c8d1e8;
  --color-moon-veil-300: #afb9d2;
  --color-moon-veil-400: #8e98b4;
  --color-moon-veil-500: #757e99;
  --color-moon-veil-600: #5d667f;
  --color-moon-veil-700: #495167;
  --color-moon-veil-800: #383f53;
  --color-moon-veil-900: #2b3142;
  --color-moon-veil-950: #1b1f2b;
}