Terminal Black to Salmon Glow Color Palette

About this palette

Terminal Black to Salmon Glow is a 4-color muted, gradient palette: #2C3225 (Terminal Black), #466469 (Mediterranea), #8B8198 (Mecha Metal), #E8B6AE (Salmon Glow). It mixes gray, turquoise, purple, pink tones and feels cool overall. The strongest text pairing is #2C3225 on #E8B6AE with a contrast ratio of 7.38:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Terminal Black	rgb(44, 50, 37)	hsl(88, 15%, 17%)
Mediterranea	rgb(70, 100, 105)	hsl(189, 20%, 34%)
Mecha Metal	rgb(139, 129, 152)	hsl(266, 10%, 55%)
Salmon Glow	rgb(232, 182, 174)	hsl(8, 56%, 80%)

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.38:1 Very good#2C3225 on #E8B6AE
Aa7.38:1 Very good#E8B6AE on #2C3225
Aa3.58:1 Poor#2C3225 on #8B8198
Aa3.58:1 Poor#8B8198 on #2C3225
Aa3.57:1 Poor#466469 on #E8B6AE
Aa3.57:1 Poor#E8B6AE on #466469

Color blindness preview

CSS variables

/* Terminal Black to Salmon Glow — https://swatchly.xyz/palette/2c3225-466469-8b8198-e8b6ae */
:root {
  --terminal-black: #2c3225;
  --mediterranea: #466469;
  --mecha-metal: #8b8198;
  --salmon-glow: #e8b6ae;
}

Tailwind CSS v4

/* Terminal Black to Salmon Glow — https://swatchly.xyz/palette/2c3225-466469-8b8198-e8b6ae */
@theme {
  --color-terminal-black: #2c3225;
  --color-terminal-black-50: #f2f7ee;
  --color-terminal-black-100: #e8ede3;
  --color-terminal-black-200: #d4dace;
  --color-terminal-black-300: #bdc4b6;
  --color-terminal-black-400: #9da495;
  --color-terminal-black-500: #818879;
  --color-terminal-black-600: #666d5e;
  --color-terminal-black-700: #4f5548;
  --color-terminal-black-800: #3c4237;
  --color-terminal-black-900: #2c3225;
  --color-terminal-black-950: #1b1e17;
  --color-mediterranea: #466469;
  --color-mediterranea-50: #e7f9fc;
  --color-mediterranea-100: #dbf0f3;
  --color-mediterranea-200: #c6dee2;
  --color-mediterranea-300: #afcacf;
  --color-mediterranea-400: #8eadb2;
  --color-mediterranea-500: #749398;
  --color-mediterranea-600: #5b7a7f;
  --color-mediterranea-700: #466469;
  --color-mediterranea-800: #354e53;
  --color-mediterranea-900: #273c40;
  --color-mediterranea-950: #162629;
  --color-mecha-metal: #8b8198;
  --color-mecha-metal-50: #f8f2ff;
  --color-mecha-metal-100: #eee8f8;
  --color-mecha-metal-200: #dbd3e6;
  --color-mecha-metal-300: #c5bcd1;
  --color-mecha-metal-400: #a69cb3;
  --color-mecha-metal-500: #8b8198;
  --color-mecha-metal-600: #70677d;
  --color-mecha-metal-700: #595164;
  --color-mecha-metal-800: #463e50;
  --color-mecha-metal-900: #36303e;
  --color-mecha-metal-950: #211d27;
  --color-salmon-glow: #e8b6ae;
  --color-salmon-glow-50: #fff4f2;
  --color-salmon-glow-100: #ffe7e3;
  --color-salmon-glow-200: #f5d0ca;
  --color-salmon-glow-300: #e8b6ae;
  --color-salmon-glow-400: #c59790;
  --color-salmon-glow-500: #a97b73;
  --color-salmon-glow-600: #8c605a;
  --color-salmon-glow-700: #724a44;
  --color-salmon-glow-800: #5b3833;
  --color-salmon-glow-900: #472a26;
  --color-salmon-glow-950: #2e1916;
}