Black Box to Negroni Color Palette

About this palette

Black Box to Negroni is a 5-color cool palette: #112733 (Black Box), #533459 (Purple Prose), #56846A (Clouded Pine), #8BB5CF (Juvie), #F1C9A1 (Negroni). It mixes blue, purple, green, orange tones and feels cool overall. The strongest text pairing is #112733 on #F1C9A1 with a contrast ratio of 9.99:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Box	rgb(17, 39, 51)	hsl(201, 50%, 13%)
Purple Prose	rgb(83, 52, 89)	hsl(290, 26%, 28%)
Clouded Pine	rgb(86, 132, 106)	hsl(146, 21%, 43%)
Juvie	rgb(139, 181, 207)	hsl(203, 41%, 68%)
Negroni	rgb(241, 201, 161)	hsl(30, 74%, 79%)

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.99:1 Very good#112733 on #F1C9A1
Aa9.99:1 Very good#F1C9A1 on #112733
Aa7.06:1 Very good#112733 on #8BB5CF
Aa7.06:1 Very good#8BB5CF on #112733
Aa6.79:1 Good#533459 on #F1C9A1
Aa6.79:1 Good#F1C9A1 on #533459
Aa4.80:1 Good#533459 on #8BB5CF
Aa4.80:1 Good#8BB5CF on #533459

Color blindness preview

CSS variables

/* Black Box to Negroni — https://swatchly.xyz/palette/112733-533459-56846a-8bb5cf-f1c9a1 */
:root {
  --black-box: #112733;
  --purple-prose: #533459;
  --clouded-pine: #56846a;
  --juvie: #8bb5cf;
  --negroni: #f1c9a1;
}

Tailwind CSS v4

/* Black Box to Negroni — https://swatchly.xyz/palette/112733-533459-56846a-8bb5cf-f1c9a1 */
@theme {
  --color-black-box: #112733;
  --color-black-box-50: #ebf7ff;
  --color-black-box-100: #deeef8;
  --color-black-box-200: #c7dbe7;
  --color-black-box-300: #afc5d2;
  --color-black-box-400: #8da6b4;
  --color-black-box-500: #738b9a;
  --color-black-box-600: #5a7280;
  --color-black-box-700: #465c68;
  --color-black-box-800: #364954;
  --color-black-box-900: #293a44;
  --color-black-box-950: #112733;
  --color-purple-prose: #533459;
  --color-purple-prose-50: #fdf0ff;
  --color-purple-prose-100: #fae2fe;
  --color-purple-prose-200: #e8cdee;
  --color-purple-prose-300: #d4b4da;
  --color-purple-prose-400: #b693bc;
  --color-purple-prose-500: #9a78a1;
  --color-purple-prose-600: #7e5e85;
  --color-purple-prose-700: #66486b;
  --color-purple-prose-800: #533459;
  --color-purple-prose-900: #3f2943;
  --color-purple-prose-950: #28182b;
  --color-clouded-pine: #56846a;
  --color-clouded-pine-50: #e2fdec;
  --color-clouded-pine-100: #d9f6e4;
  --color-clouded-pine-200: #c3e6d1;
  --color-clouded-pine-300: #abd3bb;
  --color-clouded-pine-400: #8ab69c;
  --color-clouded-pine-500: #6f9d82;
  --color-clouded-pine-600: #56846a;
  --color-clouded-pine-700: #3f6a52;
  --color-clouded-pine-800: #2d533e;
  --color-clouded-pine-900: #1f402e;
  --color-clouded-pine-950: #10281c;
  --color-juvie: #8bb5cf;
  --color-juvie-50: #f4fbff;
  --color-juvie-100: #e5f5ff;
  --color-juvie-200: #c8e6f8;
  --color-juvie-300: #b0d2e7;
  --color-juvie-400: #8bb5cf;
  --color-juvie-500: #6e97b0;
  --color-juvie-600: #527a92;
  --color-juvie-700: #3b6076;
  --color-juvie-800: #2a4a5e;
  --color-juvie-900: #1c3848;
  --color-juvie-950: #0e222d;
  --color-negroni: #f1c9a1;
  --color-negroni-50: #ffeedd;
  --color-negroni-100: #fbe1c7;
  --color-negroni-200: #f1c9a1;
  --color-negroni-300: #d7b593;
  --color-negroni-400: #ba9671;
  --color-negroni-500: #a07b56;
  --color-negroni-600: #85623e;
  --color-negroni-700: #6c4d2c;
  --color-negroni-800: #573c1e;
  --color-negroni-900: #442d14;
  --color-negroni-950: #2c1b09;
}