Green Tea to Genie color palette

B0B18EGreen Tea F8F7E2Diamond 766F9BBureaucracy 444022Madras C1BDE6Viking Diva 474463Genie

About this palette

Green Tea to Genie is a 6-color muted palette: #B0B18E (Green Tea), #F8F7E2 (Diamond), #766F9B (Bureaucracy), #444022 (Madras), #C1BDE6 (Viking Diva), #474463 (Genie). It mixes yellow, white, purple, brown tones and feels cool overall. The strongest text pairing is #F8F7E2 on #444022 with a contrast ratio of 9.69:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Green Tea	rgb(176, 177, 142)	hsl(62, 18%, 63%)
Diamond	rgb(248, 247, 226)	hsl(57, 61%, 93%)
Bureaucracy	rgb(118, 111, 155)	hsl(250, 18%, 52%)
Madras	rgb(68, 64, 34)	hsl(53, 33%, 20%)
Viking Diva	rgb(193, 189, 230)	hsl(246, 45%, 82%)
Genie	rgb(71, 68, 99)	hsl(246, 19%, 33%)

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.69:1 Very good#F8F7E2 on #444022
Aa9.69:1 Very good#444022 on #F8F7E2
Aa8.52:1 Very good#F8F7E2 on #474463
Aa8.52:1 Very good#474463 on #F8F7E2
Aa5.84:1 Good#444022 on #C1BDE6
Aa5.84:1 Good#C1BDE6 on #444022
Aa5.14:1 Good#C1BDE6 on #474463
Aa5.14:1 Good#474463 on #C1BDE6

Color blindness preview

CSS variables

/* Green Tea to Genie — https://swatchly.xyz/palette/b0b18e-f8f7e2-766f9b-444022-c1bde6-474463 */
:root {
  --green-tea: #b0b18e;
  --diamond: #f8f7e2;
  --bureaucracy: #766f9b;
  --madras: #444022;
  --viking-diva: #c1bde6;
  --genie: #474463;
}

Tailwind CSS v4

/* Green Tea to Genie — https://swatchly.xyz/palette/b0b18e-f8f7e2-766f9b-444022-c1bde6-474463 */
@theme {
  --color-green-tea: #b0b18e;
  --color-green-tea-50: #fbfbe8;
  --color-green-tea-100: #f3f4df;
  --color-green-tea-200: #e2e2ca;
  --color-green-tea-300: #cdceb2;
  --color-green-tea-400: #b0b18e;
  --color-green-tea-500: #929371;
  --color-green-tea-600: #757655;
  --color-green-tea-700: #5d5d3f;
  --color-green-tea-800: #48482e;
  --color-green-tea-900: #363620;
  --color-green-tea-950: #202011;
  --color-diamond: #f8f7e2;
  --color-diamond-50: #f8f7e2;
  --color-diamond-100: #edece0;
  --color-diamond-200: #d9d9ca;
  --color-diamond-300: #c3c2b1;
  --color-diamond-400: #a4a390;
  --color-diamond-500: #888775;
  --color-diamond-600: #6e6d5b;
  --color-diamond-700: #575646;
  --color-diamond-800: #444335;
  --color-diamond-900: #343428;
  --color-diamond-950: #202017;
  --color-bureaucracy: #766f9b;
  --color-bureaucracy-50: #f5f4ff;
  --color-bureaucracy-100: #edeaff;
  --color-bureaucracy-200: #dbd6fa;
  --color-bureaucracy-300: #c6c1e9;
  --color-bureaucracy-400: #a9a2ce;
  --color-bureaucracy-500: #8f88b5;
  --color-bureaucracy-600: #766f9b;
  --color-bureaucracy-700: #5e577f;
  --color-bureaucracy-800: #494366;
  --color-bureaucracy-900: #383250;
  --color-bureaucracy-950: #221e34;
  --color-madras: #444022;
  --color-madras-50: #f8f6e3;
  --color-madras-100: #efecd7;
  --color-madras-200: #dcd9bf;
  --color-madras-300: #c5c2a4;
  --color-madras-400: #a6a282;
  --color-madras-500: #8a8665;
  --color-madras-600: #6f6b4c;
  --color-madras-700: #575338;
  --color-madras-800: #444022;
  --color-madras-900: #34311d;
  --color-madras-950: #201e0f;
  --color-viking-diva: #c1bde6;
  --color-viking-diva-50: #f5f5ff;
  --color-viking-diva-100: #ebeaff;
  --color-viking-diva-200: #d8d5f4;
  --color-viking-diva-300: #c1bde6;
  --color-viking-diva-400: #a19ec4;
  --color-viking-diva-500: #8682a8;
  --color-viking-diva-600: #6b678c;
  --color-viking-diva-700: #555172;
  --color-viking-diva-800: #423e5b;
  --color-viking-diva-900: #322f47;
  --color-viking-diva-950: #1f1d2e;
  --color-genie: #474463;
  --color-genie-50: #f4f4ff;
  --color-genie-100: #eae8ff;
  --color-genie-200: #d6d4f0;
  --color-genie-300: #c0bede;
  --color-genie-400: #a29fc2;
  --color-genie-500: #8885a8;
  --color-genie-600: #6e6c8d;
  --color-genie-700: #595675;
  --color-genie-800: #474463;
  --color-genie-900: #37344b;
  --color-genie-950: #222031;
}