Terminal Black to Endive Color Palette

About this palette

Terminal Black to Endive is a 5-color muted, gradient palette: #2B332B (Terminal Black), #5E5A6E (Smoky), #7D7BA2 (Aster), #C89EB0 (Lily), #CFE0C7 (Endive). It mixes gray, purple, pink, green tones and feels cool overall. The strongest text pairing is #2B332B on #CFE0C7 with a contrast ratio of 9.40:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Terminal Black	rgb(43, 51, 43)	hsl(120, 9%, 18%)
Smoky	rgb(94, 90, 110)	hsl(252, 10%, 39%)
Aster	rgb(125, 123, 162)	hsl(243, 17%, 56%)
Lily	rgb(200, 158, 176)	hsl(334, 28%, 70%)
Endive	rgb(207, 224, 199)	hsl(101, 29%, 83%)

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.40:1 Very good#2B332B on #CFE0C7
Aa9.40:1 Very good#CFE0C7 on #2B332B
Aa5.57:1 Good#2B332B on #C89EB0
Aa5.57:1 Good#C89EB0 on #2B332B
Aa4.79:1 Good#5E5A6E on #CFE0C7
Aa4.79:1 Good#CFE0C7 on #5E5A6E
Aa3.24:1 Poor#2B332B on #7D7BA2
Aa3.24:1 Poor#7D7BA2 on #2B332B

Color blindness preview

CSS variables

/* Terminal Black to Endive — https://swatchly.xyz/palette/2b332b-5e5a6e-7d7ba2-c89eb0-cfe0c7 */
:root {
  --terminal-black: #2b332b;
  --smoky: #5e5a6e;
  --aster: #7d7ba2;
  --lily: #c89eb0;
  --endive: #cfe0c7;
}

Tailwind CSS v4

/* Terminal Black to Endive — https://swatchly.xyz/palette/2b332b-5e5a6e-7d7ba2-c89eb0-cfe0c7 */
@theme {
  --color-terminal-black: #2b332b;
  --color-terminal-black-50: #f1f7f1;
  --color-terminal-black-100: #e7ede7;
  --color-terminal-black-200: #d2dad2;
  --color-terminal-black-300: #bbc4bb;
  --color-terminal-black-400: #9ba49b;
  --color-terminal-black-500: #7f887f;
  --color-terminal-black-600: #646d64;
  --color-terminal-black-700: #4e564e;
  --color-terminal-black-800: #3c433c;
  --color-terminal-black-900: #2b332b;
  --color-terminal-black-950: #1b1f1b;
  --color-smoky: #5e5a6e;
  --color-smoky-50: #f5f3ff;
  --color-smoky-100: #ece9f8;
  --color-smoky-200: #d9d6e7;
  --color-smoky-300: #c5c1d4;
  --color-smoky-400: #a7a3b8;
  --color-smoky-500: #8d889e;
  --color-smoky-600: #736f84;
  --color-smoky-700: #5e5a6e;
  --color-smoky-800: #494657;
  --color-smoky-900: #383544;
  --color-smoky-950: #23212b;
  --color-aster: #7d7ba2;
  --color-aster-50: #f3f3ff;
  --color-aster-100: #e7e6ff;
  --color-aster-200: #d1d0f1;
  --color-aster-300: #b9b8dd;
  --color-aster-400: #9997bf;
  --color-aster-500: #7d7ba2;
  --color-aster-600: #646287;
  --color-aster-700: #4f4d6e;
  --color-aster-800: #3e3c58;
  --color-aster-900: #2f2e46;
  --color-aster-950: #1d1c2d;
  --color-lily: #c89eb0;
  --color-lily-50: #fff6fa;
  --color-lily-100: #ffeaf3;
  --color-lily-200: #f4d5e2;
  --color-lily-300: #e2becd;
  --color-lily-400: #c89eb0;
  --color-lily-500: #a98192;
  --color-lily-600: #8c6576;
  --color-lily-700: #714e5d;
  --color-lily-800: #593b48;
  --color-lily-900: #452b37;
  --color-lily-950: #2b1921;
  --color-endive: #cfe0c7;
  --color-endive-50: #f1faec;
  --color-endive-100: #e6f1e2;
  --color-endive-200: #cfe0c7;
  --color-endive-300: #bac8b3;
  --color-endive-400: #99a992;
  --color-endive-500: #7d8d76;
  --color-endive-600: #63725c;
  --color-endive-700: #4d5a47;
  --color-endive-800: #3b4635;
  --color-endive-900: #2c3628;
  --color-endive-950: #1b2217;
}