Start generating

Balsamico to Reading Tea Leaves color palette

1A0C03Balsamico400015What We Do in the Shadows422600Chocolate Castle654834Buckeye795D61Reading Tea Leaves
Open in generator Export PNG, PDF, ASE…

About this palette

Balsamico to Reading Tea Leaves is a 5-color dark, warm, earthy, gradient palette: #1A0C03 (Balsamico), #400015 (What We Do in the Shadows), #422600 (Chocolate Castle), #654834 (Buckeye), #795D61 (Reading Tea Leaves). It mixes black, brown, red tones and feels warm overall. The strongest text pairing is #1A0C03 on #795D61 with a contrast ratio of 3.23:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Balsamicorgb(26, 12, 3)hsl(23, 79%, 6%)
What We Do in the Shadowsrgb(64, 0, 21)hsl(340, 100%, 13%)
Chocolate Castlergb(66, 38, 0)hsl(35, 100%, 13%)
Buckeyergb(101, 72, 52)hsl(24, 32%, 30%)
Reading Tea Leavesrgb(121, 93, 97)hsl(351, 13%, 42%)

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.23:1 Poor#1A0C03 on #795D61
  • Aa3.23:1 Poor#795D61 on #1A0C03

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Balsamico to Reading Tea Leaves — https://swatchly.xyz/palette/1a0c03-400015-422600-654834-795d61 */
:root {
  --balsamico: #1a0c03;
  --what-we-do-in-the-shadows: #400015;
  --chocolate-castle: #422600;
  --buckeye: #654834;
  --reading-tea-leaves: #795d61;
}

Tailwind CSS v4

/* Balsamico to Reading Tea Leaves — https://swatchly.xyz/palette/1a0c03-400015-422600-654834-795d61 */
@theme {
  --color-balsamico: #1a0c03;
  --color-balsamico-50: #fff3ea;
  --color-balsamico-100: #f6e8df;
  --color-balsamico-200: #e4d4c9;
  --color-balsamico-300: #cfbdb0;
  --color-balsamico-400: #b19d8f;
  --color-balsamico-500: #927f71;
  --color-balsamico-600: #736154;
  --color-balsamico-700: #58483d;
  --color-balsamico-800: #40342a;
  --color-balsamico-900: #2c231b;
  --color-balsamico-950: #1a0c03;
  --color-what-we-do-in-the-shadows: #400015;
  --color-what-we-do-in-the-shadows-50: #fff1f3;
  --color-what-we-do-in-the-shadows-100: #ffe3e7;
  --color-what-we-do-in-the-shadows-200: #ffc6ce;
  --color-what-we-do-in-the-shadows-300: #f0abb6;
  --color-what-we-do-in-the-shadows-400: #d38995;
  --color-what-we-do-in-the-shadows-500: #b76d7a;
  --color-what-we-do-in-the-shadows-600: #995360;
  --color-what-we-do-in-the-shadows-700: #7d3e4b;
  --color-what-we-do-in-the-shadows-800: #652e39;
  --color-what-we-do-in-the-shadows-900: #4f212b;
  --color-what-we-do-in-the-shadows-950: #400015;
  --color-chocolate-castle: #422600;
  --color-chocolate-castle-50: #fff3e6;
  --color-chocolate-castle-100: #fee7cf;
  --color-chocolate-castle-200: #edd2b6;
  --color-chocolate-castle-300: #d9bb9b;
  --color-chocolate-castle-400: #bb9a76;
  --color-chocolate-castle-500: #9e7d59;
  --color-chocolate-castle-600: #81623f;
  --color-chocolate-castle-700: #674b2c;
  --color-chocolate-castle-800: #50381d;
  --color-chocolate-castle-900: #422600;
  --color-chocolate-castle-950: #251808;
  --color-buckeye: #654834;
  --color-buckeye-50: #fff2ea;
  --color-buckeye-100: #fde6d8;
  --color-buckeye-200: #ebd0bf;
  --color-buckeye-300: #d6b8a4;
  --color-buckeye-400: #b79781;
  --color-buckeye-500: #9a7a65;
  --color-buckeye-600: #7d5f4b;
  --color-buckeye-700: #654834;
  --color-buckeye-800: #4f3828;
  --color-buckeye-900: #3d2a1d;
  --color-buckeye-950: #271910;
  --color-reading-tea-leaves: #795d61;
  --color-reading-tea-leaves-50: #fff1f3;
  --color-reading-tea-leaves-100: #f9e4e7;
  --color-reading-tea-leaves-200: #e7ced1;
  --color-reading-tea-leaves-300: #d1b5b9;
  --color-reading-tea-leaves-400: #b29498;
  --color-reading-tea-leaves-500: #95787c;
  --color-reading-tea-leaves-600: #795d61;
  --color-reading-tea-leaves-700: #61494c;
  --color-reading-tea-leaves-800: #4d383b;
  --color-reading-tea-leaves-900: #3c2b2d;
  --color-reading-tea-leaves-950: #261a1b;
}

Similar palettes