Balsamico to Olivary color palette

120B00Balsamico 623440Chocolate Truffle 341D03Close but No Cigar 343516Wasabi Nori 705C2COlivary

About this palette

Balsamico to Olivary is a 5-color dark, warm, earthy palette: #120B00 (Balsamico), #623440 (Chocolate Truffle), #341D03 (Close but No Cigar), #343516 (Wasabi Nori), #705C2C (Olivary). It mixes black, red, brown tones and feels warm overall. The strongest text pairing is #120B00 on #705C2C with a contrast ratio of 3.03:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Balsamico	rgb(18, 11, 0)	hsl(37, 100%, 4%)
Chocolate Truffle	rgb(98, 52, 64)	hsl(344, 31%, 29%)
Close but No Cigar	rgb(52, 29, 3)	hsl(32, 89%, 11%)
Wasabi Nori	rgb(52, 53, 22)	hsl(62, 41%, 15%)
Olivary	rgb(112, 92, 44)	hsl(42, 44%, 31%)

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.

Aa3.03:1 Poor#120B00 on #705C2C
Aa3.03:1 Poor#705C2C on #120B00

Color blindness preview

CSS variables

/* Balsamico to Olivary — https://swatchly.xyz/palette/120b00-623440-341d03-343516-705c2c */
:root {
  --balsamico: #120b00;
  --chocolate-truffle: #623440;
  --close-but-no-cigar: #341d03;
  --wasabi-nori: #343516;
  --olivary: #705c2c;
}

Tailwind CSS v4

/* Balsamico to Olivary — https://swatchly.xyz/palette/120b00-623440-341d03-343516-705c2c */
@theme {
  --color-balsamico: #120b00;
  --color-balsamico-50: #faf5e8;
  --color-balsamico-100: #f1ebdd;
  --color-balsamico-200: #ded7c6;
  --color-balsamico-300: #c8c0ae;
  --color-balsamico-400: #aaa18c;
  --color-balsamico-500: #8a816d;
  --color-balsamico-600: #6b6350;
  --color-balsamico-700: #504939;
  --color-balsamico-800: #393326;
  --color-balsamico-900: #252117;
  --color-balsamico-950: #120b00;
  --color-chocolate-truffle: #623440;
  --color-chocolate-truffle-50: #fff1f4;
  --color-chocolate-truffle-100: #ffe3e9;
  --color-chocolate-truffle-200: #f6cad4;
  --color-chocolate-truffle-300: #e3b2bd;
  --color-chocolate-truffle-400: #c6929d;
  --color-chocolate-truffle-500: #ab7682;
  --color-chocolate-truffle-600: #8e5d69;
  --color-chocolate-truffle-700: #754853;
  --color-chocolate-truffle-800: #623440;
  --color-chocolate-truffle-900: #4a2931;
  --color-chocolate-truffle-950: #30181e;
  --color-close-but-no-cigar: #341d03;
  --color-close-but-no-cigar-50: #fff3e7;
  --color-close-but-no-cigar-100: #fbe7d5;
  --color-close-but-no-cigar-200: #ead3bd;
  --color-close-but-no-cigar-300: #d6bca3;
  --color-close-but-no-cigar-400: #b89c81;
  --color-close-but-no-cigar-500: #9d8165;
  --color-close-but-no-cigar-600: #83674d;
  --color-close-but-no-cigar-700: #6b523a;
  --color-close-but-no-cigar-800: #56402b;
  --color-close-but-no-cigar-900: #45321f;
  --color-close-but-no-cigar-950: #341d03;
  --color-wasabi-nori: #343516;
  --color-wasabi-nori-50: #f6f7e3;
  --color-wasabi-nori-100: #ecedd7;
  --color-wasabi-nori-200: #d8dabf;
  --color-wasabi-nori-300: #c2c4a5;
  --color-wasabi-nori-400: #a2a583;
  --color-wasabi-nori-500: #878967;
  --color-wasabi-nori-600: #6d6f4e;
  --color-wasabi-nori-700: #56583a;
  --color-wasabi-nori-800: #43442b;
  --color-wasabi-nori-900: #343516;
  --color-wasabi-nori-950: #202011;
  --color-olivary: #705c2c;
  --color-olivary-50: #fff4dc;
  --color-olivary-100: #f8eacb;
  --color-olivary-200: #e8d8b3;
  --color-olivary-300: #d5c399;
  --color-olivary-400: #b9a576;
  --color-olivary-500: #9f8a5a;
  --color-olivary-600: #867142;
  --color-olivary-700: #705c2c;
  --color-olivary-800: #58481f;
  --color-olivary-900: #453713;
  --color-olivary-950: #2c2207;
}