Terminal Black to Malevolent Mauve Color Palette

About this palette

Terminal Black to Malevolent Mauve is a 4-color vintage palette: #273422 (Terminal Black), #D6B0BC (Mauvelous), #3B6A75 (Ocean’s Embrace), #B76A87 (Malevolent Mauve). It mixes green, pink, turquoise tones and feels balanced overall. The strongest text pairing is #273422 on #D6B0BC with a contrast ratio of 6.74:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Terminal Black	rgb(39, 52, 34)	hsl(103, 21%, 17%)
Mauvelous	rgb(214, 176, 188)	hsl(341, 32%, 76%)
Ocean’s Embrace	rgb(59, 106, 117)	hsl(191, 33%, 35%)
Malevolent Mauve	rgb(183, 106, 135)	hsl(337, 35%, 57%)

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.

Aa6.74:1 Good#273422 on #D6B0BC
Aa6.74:1 Good#D6B0BC on #273422
Aa3.39:1 Poor#273422 on #B76A87
Aa3.39:1 Poor#B76A87 on #273422
Aa3.08:1 Poor#D6B0BC on #3B6A75
Aa3.08:1 Poor#3B6A75 on #D6B0BC

Color blindness preview

CSS variables

/* Terminal Black to Malevolent Mauve — https://swatchly.xyz/palette/273422-d6b0bc-3b6a75-b76a87 */
:root {
  --terminal-black: #273422;
  --mauvelous: #d6b0bc;
  --ocean-s-embrace: #3b6a75;
  --malevolent-mauve: #b76a87;
}

Tailwind CSS v4

/* Terminal Black to Malevolent Mauve — https://swatchly.xyz/palette/273422-d6b0bc-3b6a75-b76a87 */
@theme {
  --color-terminal-black: #273422;
  --color-terminal-black-50: #eff8ec;
  --color-terminal-black-100: #e4efe1;
  --color-terminal-black-200: #cfdccb;
  --color-terminal-black-300: #b8c6b3;
  --color-terminal-black-400: #97a691;
  --color-terminal-black-500: #7b8a75;
  --color-terminal-black-600: #616f5b;
  --color-terminal-black-700: #4a5746;
  --color-terminal-black-800: #384334;
  --color-terminal-black-900: #273422;
  --color-terminal-black-950: #181f16;
  --color-mauvelous: #d6b0bc;
  --color-mauvelous-50: #ffedf2;
  --color-mauvelous-100: #fae0e8;
  --color-mauvelous-200: #e8cad3;
  --color-mauvelous-300: #d6b0bc;
  --color-mauvelous-400: #b6929e;
  --color-mauvelous-500: #9b7883;
  --color-mauvelous-600: #805f6a;
  --color-mauvelous-700: #684a54;
  --color-mauvelous-800: #533942;
  --color-mauvelous-900: #422b33;
  --color-mauvelous-950: #2a1a1f;
  --color-ocean-s-embrace: #3b6a75;
  --color-ocean-s-embrace-50: #e4faff;
  --color-ocean-s-embrace-100: #d1f0f8;
  --color-ocean-s-embrace-200: #b6dbe5;
  --color-ocean-s-embrace-300: #99c4ce;
  --color-ocean-s-embrace-400: #74a3af;
  --color-ocean-s-embrace-500: #578692;
  --color-ocean-s-embrace-600: #3b6a75;
  --color-ocean-s-embrace-700: #2b545e;
  --color-ocean-s-embrace-800: #1e424a;
  --color-ocean-s-embrace-900: #15333a;
  --color-ocean-s-embrace-950: #0a2025;
  --color-malevolent-mauve: #b76a87;
  --color-malevolent-mauve-50: #fff1f5;
  --color-malevolent-mauve-100: #ffe2eb;
  --color-malevolent-mauve-200: #ffc4d8;
  --color-malevolent-mauve-300: #f0a9c2;
  --color-malevolent-mauve-400: #d386a2;
  --color-malevolent-mauve-500: #b76a87;
  --color-malevolent-mauve-600: #99506d;
  --color-malevolent-mauve-700: #7e3c56;
  --color-malevolent-mauve-800: #652c43;
  --color-malevolent-mauve-900: #502034;
  --color-malevolent-mauve-950: #341120;
}