Reading Tea Leaves to Court-Bouillon color palette

825857Reading Tea Leaves 0D373AElite Teal F4ECFFFoundation White 7D905EFour Leaf Clover C8CA8FCourt-Bouillon

Open in generator Export PNG, PDF, ASE…

About this palette

Reading Tea Leaves to Court-Bouillon is a 5-color muted, vintage palette: #825857 (Reading Tea Leaves), #0D373A (Elite Teal), #F4ECFF (Foundation White), #7D905E (Four Leaf Clover), #C8CA8F (Court-Bouillon). It mixes red, turquoise, white, green, yellow tones and feels balanced overall. The strongest text pairing is #0D373A on #F4ECFF with a contrast ratio of 11.26:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Reading Tea Leaves	rgb(130, 88, 87)	hsl(1, 20%, 43%)
Elite Teal	rgb(13, 55, 58)	hsl(184, 63%, 14%)
Foundation White	rgb(244, 236, 255)	hsl(265, 100%, 96%)
Four Leaf Clover	rgb(125, 144, 94)	hsl(83, 21%, 47%)
Court-Bouillon	rgb(200, 202, 143)	hsl(62, 36%, 68%)

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.

Aa11.26:1 Very good#0D373A on #F4ECFF
Aa11.26:1 Very good#F4ECFF on #0D373A
Aa7.57:1 Very good#0D373A on #C8CA8F
Aa7.57:1 Very good#C8CA8F on #0D373A
Aa5.25:1 Good#825857 on #F4ECFF
Aa5.25:1 Good#F4ECFF on #825857
Aa3.71:1 Poor#0D373A on #7D905E
Aa3.71:1 Poor#7D905E on #0D373A

Color blindness preview

CSS variables

/* Reading Tea Leaves to Court-Bouillon — https://swatchly.xyz/palette/825857-0d373a-f4ecff-7d905e-c8ca8f */
:root {
  --reading-tea-leaves: #825857;
  --elite-teal: #0d373a;
  --foundation-white: #f4ecff;
  --four-leaf-clover: #7d905e;
  --court-bouillon: #c8ca8f;
}

Tailwind CSS v4

/* Reading Tea Leaves to Court-Bouillon — https://swatchly.xyz/palette/825857-0d373a-f4ecff-7d905e-c8ca8f */
@theme {
  --color-reading-tea-leaves: #825857;
  --color-reading-tea-leaves-50: #fff1f1;
  --color-reading-tea-leaves-100: #ffe2e1;
  --color-reading-tea-leaves-200: #f0cac9;
  --color-reading-tea-leaves-300: #dbb1b0;
  --color-reading-tea-leaves-400: #bc908e;
  --color-reading-tea-leaves-500: #9f7372;
  --color-reading-tea-leaves-600: #825857;
  --color-reading-tea-leaves-700: #694444;
  --color-reading-tea-leaves-800: #543434;
  --color-reading-tea-leaves-900: #422727;
  --color-reading-tea-leaves-950: #2a1717;
  --color-elite-teal: #0d373a;
  --color-elite-teal-50: #e3fbfc;
  --color-elite-teal-100: #d7f1f3;
  --color-elite-teal-200: #bfdfe1;
  --color-elite-teal-300: #a5c9cb;
  --color-elite-teal-400: #82aaac;
  --color-elite-teal-500: #658e91;
  --color-elite-teal-600: #4b7275;
  --color-elite-teal-700: #375a5d;
  --color-elite-teal-800: #274649;
  --color-elite-teal-900: #0d373a;
  --color-elite-teal-950: #0e2122;
  --color-foundation-white: #f4ecff;
  --color-foundation-white-50: #fbf8ff;
  --color-foundation-white-100: #f4ecff;
  --color-foundation-white-200: #ded9e6;
  --color-foundation-white-300: #c7c1d0;
  --color-foundation-white-400: #a7a0b1;
  --color-foundation-white-500: #8b8495;
  --color-foundation-white-600: #706979;
  --color-foundation-white-700: #585261;
  --color-foundation-white-800: #45404c;
  --color-foundation-white-900: #35303b;
  --color-foundation-white-950: #211e25;
  --color-four-leaf-clover: #7d905e;
  --color-four-leaf-clover-50: #effbdd;
  --color-four-leaf-clover-100: #e4f2d1;
  --color-four-leaf-clover-200: #d0dfb8;
  --color-four-leaf-clover-300: #b8ca9e;
  --color-four-leaf-clover-400: #98ab7a;
  --color-four-leaf-clover-500: #7d905e;
  --color-four-leaf-clover-600: #637545;
  --color-four-leaf-clover-700: #4d5d31;
  --color-four-leaf-clover-800: #3b4922;
  --color-four-leaf-clover-900: #2d3817;
  --color-four-leaf-clover-950: #1b230b;
  --color-court-bouillon: #c8ca8f;
  --color-court-bouillon-50: #f9fadb;
  --color-court-bouillon-100: #f0f1ce;
  --color-court-bouillon-200: #dddfb4;
  --color-court-bouillon-300: #c8ca8f;
  --color-court-bouillon-400: #a8a973;
  --color-court-bouillon-500: #8c8d54;
  --color-court-bouillon-600: #71723a;
  --color-court-bouillon-700: #595a27;
  --color-court-bouillon-800: #454618;
  --color-court-bouillon-900: #35350e;
  --color-court-bouillon-950: #212105;
}