Black Box to Snow White color palette

002A34Black Box 9370A8Crown Jewels F2A57DFlaming Cauldron 563E57Nightly Walk EDFFE7Snow White

About this palette

Black Box to Snow White is a 5-color cool palette: #002A34 (Black Box), #9370A8 (Crown Jewels), #F2A57D (Flaming Cauldron), #563E57 (Nightly Walk), #EDFFE7 (Snow White). It mixes blue, purple, orange, white tones and feels cool overall. The strongest text pairing is #002A34 on #EDFFE7 with a contrast ratio of 14.53:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Box	rgb(0, 42, 52)	hsl(192, 100%, 10%)
Crown Jewels	rgb(147, 112, 168)	hsl(278, 24%, 55%)
Flaming Cauldron	rgb(242, 165, 125)	hsl(21, 82%, 72%)
Nightly Walk	rgb(86, 62, 87)	hsl(298, 17%, 29%)
Snow White	rgb(237, 255, 231)	hsl(105, 100%, 95%)

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.

Aa14.53:1 Super#002A34 on #EDFFE7
Aa14.53:1 Super#EDFFE7 on #002A34
Aa9.03:1 Very good#563E57 on #EDFFE7
Aa9.03:1 Very good#EDFFE7 on #563E57
Aa7.57:1 Very good#002A34 on #F2A57D
Aa7.57:1 Very good#F2A57D on #002A34
Aa4.70:1 Good#F2A57D on #563E57
Aa4.70:1 Good#563E57 on #F2A57D

Color blindness preview

CSS variables

/* Black Box to Snow White — https://swatchly.xyz/palette/002a34-9370a8-f2a57d-563e57-edffe7 */
:root {
  --black-box: #002a34;
  --crown-jewels: #9370a8;
  --flaming-cauldron: #f2a57d;
  --nightly-walk: #563e57;
  --snow-white: #edffe7;
}

Tailwind CSS v4

/* Black Box to Snow White — https://swatchly.xyz/palette/002a34-9370a8-f2a57d-563e57-edffe7 */
@theme {
  --color-black-box: #002a34;
  --color-black-box-50: #e6f9ff;
  --color-black-box-100: #d7f0f8;
  --color-black-box-200: #bfdee7;
  --color-black-box-300: #a5c8d2;
  --color-black-box-400: #82a9b5;
  --color-black-box-500: #678f9a;
  --color-black-box-600: #4e7580;
  --color-black-box-700: #3b5f69;
  --color-black-box-800: #2c4c55;
  --color-black-box-900: #203c44;
  --color-black-box-950: #002a34;
  --color-crown-jewels: #9370a8;
  --color-crown-jewels-50: #f9f0ff;
  --color-crown-jewels-100: #f3e1ff;
  --color-crown-jewels-200: #e4c8f6;
  --color-crown-jewels-300: #ceaee2;
  --color-crown-jewels-400: #af8cc5;
  --color-crown-jewels-500: #9370a8;
  --color-crown-jewels-600: #79578c;
  --color-crown-jewels-700: #614373;
  --color-crown-jewels-800: #4d335c;
  --color-crown-jewels-900: #3d2649;
  --color-crown-jewels-950: #271730;
  --color-flaming-cauldron: #f2a57d;
  --color-flaming-cauldron-50: #ffede5;
  --color-flaming-cauldron-100: #ffdfcf;
  --color-flaming-cauldron-200: #ffc2a3;
  --color-flaming-cauldron-300: #f2a57d;
  --color-flaming-cauldron-400: #d08862;
  --color-flaming-cauldron-500: #b56d46;
  --color-flaming-cauldron-600: #98542e;
  --color-flaming-cauldron-700: #7e401d;
  --color-flaming-cauldron-800: #663010;
  --color-flaming-cauldron-900: #522407;
  --color-flaming-cauldron-950: #351402;
  --color-nightly-walk: #563e57;
  --color-nightly-walk-50: #ffefff;
  --color-nightly-walk-100: #f7e4f7;
  --color-nightly-walk-200: #e5cfe6;
  --color-nightly-walk-300: #d1b9d2;
  --color-nightly-walk-400: #b499b5;
  --color-nightly-walk-500: #9a7f9a;
  --color-nightly-walk-600: #7f6680;
  --color-nightly-walk-700: #685169;
  --color-nightly-walk-800: #563e57;
  --color-nightly-walk-900: #423042;
  --color-nightly-walk-950: #2a1d2b;
  --color-snow-white: #edffe7;
  --color-snow-white-50: #edffe7;
  --color-snow-white-100: #e7f2e4;
  --color-snow-white-200: #d1decd;
  --color-snow-white-300: #b9c8b4;
  --color-snow-white-400: #98a893;
  --color-snow-white-500: #7c8c77;
  --color-snow-white-600: #62715d;
  --color-snow-white-700: #4c5a48;
  --color-snow-white-800: #3a4636;
  --color-snow-white-900: #2c3629;
  --color-snow-white-950: #1a2218;
}