Negroni to Black Box Color Palette

About this palette

Negroni to Black Box is a 5-color cool, vintage palette: #F3CAA7 (Negroni), #67B0C7 (Finnish Fiord), #6C75B7 (Flood), #714727 (Pumpernickel), #072C35 (Black Box). It mixes orange, blue, purple, brown tones and feels cool overall. The strongest text pairing is #F3CAA7 on #072C35 with a contrast ratio of 9.73:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Negroni	rgb(243, 202, 167)	hsl(28, 76%, 80%)
Finnish Fiord	rgb(103, 176, 199)	hsl(194, 46%, 59%)
Flood	rgb(108, 117, 183)	hsl(233, 34%, 57%)
Pumpernickel	rgb(113, 71, 39)	hsl(26, 49%, 30%)
Black Box	rgb(7, 44, 53)	hsl(192, 77%, 12%)

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.73:1 Very good#F3CAA7 on #072C35
Aa9.73:1 Very good#072C35 on #F3CAA7
Aa6.06:1 Good#67B0C7 on #072C35
Aa6.06:1 Good#072C35 on #67B0C7
Aa5.25:1 Good#F3CAA7 on #714727
Aa5.25:1 Good#714727 on #F3CAA7
Aa3.42:1 Poor#6C75B7 on #072C35
Aa3.42:1 Poor#072C35 on #6C75B7

Color blindness preview

CSS variables

/* Negroni to Black Box — https://swatchly.xyz/palette/f3caa7-67b0c7-6c75b7-714727-072c35 */
:root {
  --negroni: #f3caa7;
  --finnish-fiord: #67b0c7;
  --flood: #6c75b7;
  --pumpernickel: #714727;
  --black-box: #072c35;
}

Tailwind CSS v4

/* Negroni to Black Box — https://swatchly.xyz/palette/f3caa7-67b0c7-6c75b7-714727-072c35 */
@theme {
  --color-negroni: #f3caa7;
  --color-negroni-50: #ffefe1;
  --color-negroni-100: #fde2cb;
  --color-negroni-200: #f3caa7;
  --color-negroni-300: #d9b698;
  --color-negroni-400: #bc9676;
  --color-negroni-500: #a17b5b;
  --color-negroni-600: #856243;
  --color-negroni-700: #6d4d30;
  --color-negroni-800: #573b22;
  --color-negroni-900: #452d17;
  --color-negroni-950: #2c1b0b;
  --color-finnish-fiord: #67b0c7;
  --color-finnish-fiord-50: #e9f9ff;
  --color-finnish-fiord-100: #d1f3ff;
  --color-finnish-fiord-200: #afe3f4;
  --color-finnish-fiord-300: #91cee2;
  --color-finnish-fiord-400: #67b0c7;
  --color-finnish-fiord-500: #4a94aa;
  --color-finnish-fiord-600: #2e788d;
  --color-finnish-fiord-700: #176073;
  --color-finnish-fiord-800: #054b5c;
  --color-finnish-fiord-900: #003a48;
  --color-finnish-fiord-950: #00242e;
  --color-flood: #6c75b7;
  --color-flood-50: #f0f2ff;
  --color-flood-100: #e1e6ff;
  --color-flood-200: #c5ceff;
  --color-flood-300: #aab4f3;
  --color-flood-400: #8892d5;
  --color-flood-500: #6c75b7;
  --color-flood-600: #555d9a;
  --color-flood-700: #424980;
  --color-flood-800: #333868;
  --color-flood-900: #272b54;
  --color-flood-950: #171a38;
  --color-pumpernickel: #714727;
  --color-pumpernickel-50: #fff2ea;
  --color-pumpernickel-100: #ffe6d4;
  --color-pumpernickel-200: #f4ceb4;
  --color-pumpernickel-300: #e0b698;
  --color-pumpernickel-400: #c39574;
  --color-pumpernickel-500: #a67958;
  --color-pumpernickel-600: #895e3f;
  --color-pumpernickel-700: #714727;
  --color-pumpernickel-800: #58371e;
  --color-pumpernickel-900: #452914;
  --color-pumpernickel-950: #2d1809;
  --color-black-box: #072c35;
  --color-black-box-50: #e6f9ff;
  --color-black-box-100: #d8f0f7;
  --color-black-box-200: #c1dde6;
  --color-black-box-300: #a7c7d1;
  --color-black-box-400: #85a8b3;
  --color-black-box-500: #6a8f99;
  --color-black-box-600: #527580;
  --color-black-box-700: #3f6069;
  --color-black-box-800: #304d56;
  --color-black-box-900: #243e46;
  --color-black-box-950: #072c35;
}