Terminal Black to Bitter Melon color palette

2B3623Terminal Black 4E5C47Muddy Olive 79697ESakura Night 9E8BB8Wizard’s Brew C8D1B1Bitter Melon

About this palette

Terminal Black to Bitter Melon is a 5-color muted, cool, earthy palette: #2B3623 (Terminal Black), #4E5C47 (Muddy Olive), #79697E (Sakura Night), #9E8BB8 (Wizard’s Brew), #C8D1B1 (Bitter Melon). It mixes green, purple tones and feels cool overall. The strongest text pairing is #2B3623 on #C8D1B1 with a contrast ratio of 7.98:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Terminal Black	rgb(43, 54, 35)	hsl(95, 21%, 17%)
Muddy Olive	rgb(78, 92, 71)	hsl(100, 13%, 32%)
Sakura Night	rgb(121, 105, 126)	hsl(286, 9%, 45%)
Wizard’s Brew	rgb(158, 139, 184)	hsl(265, 24%, 63%)
Bitter Melon	rgb(200, 209, 177)	hsl(77, 26%, 76%)

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.

Aa7.98:1 Very good#2B3623 on #C8D1B1
Aa7.98:1 Very good#C8D1B1 on #2B3623
Aa4.48:1 Poor#4E5C47 on #C8D1B1
Aa4.48:1 Poor#C8D1B1 on #4E5C47
Aa4.13:1 Poor#2B3623 on #9E8BB8
Aa4.13:1 Poor#9E8BB8 on #2B3623
Aa3.19:1 Poor#79697E on #C8D1B1
Aa3.19:1 Poor#C8D1B1 on #79697E

Color blindness preview

CSS variables

/* Terminal Black to Bitter Melon — https://swatchly.xyz/palette/2b3623-4e5c47-79697e-9e8bb8-c8d1b1 */
:root {
  --terminal-black: #2b3623;
  --muddy-olive: #4e5c47;
  --sakura-night: #79697e;
  --wizard-s-brew: #9e8bb8;
  --bitter-melon: #c8d1b1;
}

Tailwind CSS v4

/* Terminal Black to Bitter Melon — https://swatchly.xyz/palette/2b3623-4e5c47-79697e-9e8bb8-c8d1b1 */
@theme {
  --color-terminal-black: #2b3623;
  --color-terminal-black-50: #f0f8eb;
  --color-terminal-black-100: #e6efe0;
  --color-terminal-black-200: #d1dcca;
  --color-terminal-black-300: #b9c5b1;
  --color-terminal-black-400: #99a690;
  --color-terminal-black-500: #7e8b75;
  --color-terminal-black-600: #64705b;
  --color-terminal-black-700: #4e5946;
  --color-terminal-black-800: #3c4535;
  --color-terminal-black-900: #2b3623;
  --color-terminal-black-950: #1b2117;
  --color-muddy-olive: #4e5c47;
  --color-muddy-olive-50: #eff9eb;
  --color-muddy-olive-100: #e5efe0;
  --color-muddy-olive-200: #d0dcca;
  --color-muddy-olive-300: #b9c7b2;
  --color-muddy-olive-400: #99a892;
  --color-muddy-olive-500: #7e8d76;
  --color-muddy-olive-600: #64725d;
  --color-muddy-olive-700: #4e5c47;
  --color-muddy-olive-800: #3c4837;
  --color-muddy-olive-900: #2e3729;
  --color-muddy-olive-950: #1c2218;
  --color-sakura-night: #79697e;
  --color-sakura-night-50: #fbf1fe;
  --color-sakura-night-100: #f3e7f6;
  --color-sakura-night-200: #e1d4e5;
  --color-sakura-night-300: #ccbdd1;
  --color-sakura-night-400: #ae9eb3;
  --color-sakura-night-500: #938398;
  --color-sakura-night-600: #79697e;
  --color-sakura-night-700: #615265;
  --color-sakura-night-800: #4c3f50;
  --color-sakura-night-900: #3b303e;
  --color-sakura-night-950: #251d27;
  --color-wizard-s-brew: #9e8bb8;
  --color-wizard-s-brew-50: #f4edff;
  --color-wizard-s-brew-100: #ebdefe;
  --color-wizard-s-brew-200: #d6c7ec;
  --color-wizard-s-brew-300: #beadd7;
  --color-wizard-s-brew-400: #9e8bb8;
  --color-wizard-s-brew-500: #85729e;
  --color-wizard-s-brew-600: #6c5b83;
  --color-wizard-s-brew-700: #57476c;
  --color-wizard-s-brew-800: #453757;
  --color-wizard-s-brew-900: #372b46;
  --color-wizard-s-brew-950: #231a2e;
  --color-bitter-melon: #c8d1b1;
  --color-bitter-melon-50: #ebf0dd;
  --color-bitter-melon-100: #dfe5cf;
  --color-bitter-melon-200: #c8d1b1;
  --color-bitter-melon-300: #b4bca0;
  --color-bitter-melon-400: #979f81;
  --color-bitter-melon-500: #7d8568;
  --color-bitter-melon-600: #656c50;
  --color-bitter-melon-700: #50573e;
  --color-bitter-melon-800: #40452f;
  --color-bitter-melon-900: #303522;
  --color-bitter-melon-950: #1e2113;
}