Start generating

Green Tea to Diamond color palette

BABA92Green Tea2F2F20Marshland7F816BWreath5D5D40CypressF5FAE3Diamond
Open in generator Export PNG, PDF, ASE…

About this palette

Green Tea to Diamond is a 5-color muted palette: #BABA92 (Green Tea), #2F2F20 (Marshland), #7F816B (Wreath), #5D5D40 (Cypress), #F5FAE3 (Diamond). It mixes yellow, gray, brown, white tones and feels warm overall. The strongest text pairing is #2F2F20 on #F5FAE3 with a contrast ratio of 12.70:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Green Teargb(186, 186, 146)hsl(60, 22%, 65%)
Marshlandrgb(47, 47, 32)hsl(60, 19%, 15%)
Wreathrgb(127, 129, 107)hsl(65, 9%, 46%)
Cypressrgb(93, 93, 64)hsl(60, 18%, 31%)
Diamondrgb(245, 250, 227)hsl(73, 70%, 94%)

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.

  • Aa12.70:1 Super#2F2F20 on #F5FAE3
  • Aa12.70:1 Super#F5FAE3 on #2F2F20
  • Aa6.80:1 Good#BABA92 on #2F2F20
  • Aa6.80:1 Good#2F2F20 on #BABA92
  • Aa6.33:1 Good#5D5D40 on #F5FAE3
  • Aa6.33:1 Good#F5FAE3 on #5D5D40
  • Aa3.74:1 Poor#7F816B on #F5FAE3
  • Aa3.74:1 Poor#F5FAE3 on #7F816B

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Green Tea to Diamond — https://swatchly.xyz/palette/baba92-2f2f20-7f816b-5d5d40-f5fae3 */
:root {
  --green-tea: #baba92;
  --marshland: #2f2f20;
  --wreath: #7f816b;
  --cypress: #5d5d40;
  --diamond: #f5fae3;
}

Tailwind CSS v4

/* Green Tea to Diamond — https://swatchly.xyz/palette/baba92-2f2f20-7f816b-5d5d40-f5fae3 */
@theme {
  --color-green-tea: #baba92;
  --color-green-tea-50: #f2f2da;
  --color-green-tea-100: #e6e7cb;
  --color-green-tea-200: #d1d2b2;
  --color-green-tea-300: #baba92;
  --color-green-tea-400: #9c9c76;
  --color-green-tea-500: #83835d;
  --color-green-tea-600: #6a6a46;
  --color-green-tea-700: #555534;
  --color-green-tea-800: #434326;
  --color-green-tea-900: #35341b;
  --color-green-tea-950: #21200e;
  --color-marshland: #2f2f20;
  --color-marshland-50: #f6f6eb;
  --color-marshland-100: #ecece0;
  --color-marshland-200: #d8d9cb;
  --color-marshland-300: #c2c2b2;
  --color-marshland-400: #a2a291;
  --color-marshland-500: #858674;
  --color-marshland-600: #6a6a5a;
  --color-marshland-700: #535344;
  --color-marshland-800: #3f3f32;
  --color-marshland-900: #2f2f20;
  --color-marshland-950: #1c1c15;
  --color-wreath: #7f816b;
  --color-wreath-50: #f4f5e8;
  --color-wreath-100: #e8eadb;
  --color-wreath-200: #d3d5c3;
  --color-wreath-300: #bcbea9;
  --color-wreath-400: #9b9d87;
  --color-wreath-500: #7f816b;
  --color-wreath-600: #666853;
  --color-wreath-700: #515340;
  --color-wreath-800: #3f4130;
  --color-wreath-900: #313224;
  --color-wreath-950: #1e1f15;
  --color-cypress: #5d5d40;
  --color-cypress-50: #f6f7e4;
  --color-cypress-100: #ecedd8;
  --color-cypress-200: #dadbc3;
  --color-cypress-300: #c5c5aa;
  --color-cypress-400: #a7a789;
  --color-cypress-500: #8c8d6e;
  --color-cypress-600: #737355;
  --color-cypress-700: #5d5d40;
  --color-cypress-800: #494931;
  --color-cypress-900: #383823;
  --color-cypress-950: #232314;
  --color-diamond: #f5fae3;
  --color-diamond-50: #f5fae3;
  --color-diamond-100: #ebeee1;
  --color-diamond-200: #d7dbca;
  --color-diamond-300: #c0c4b2;
  --color-diamond-400: #a0a590;
  --color-diamond-500: #858974;
  --color-diamond-600: #6a6e5b;
  --color-diamond-700: #545846;
  --color-diamond-800: #414435;
  --color-diamond-900: #323427;
  --color-diamond-950: #1f2017;
}

Similar palettes