Terminal Black to Vermicelles color palette

About this palette

Terminal Black to Vermicelles is a 5-color warm, vintage palette: #1D3328 (Terminal Black), #5C4C31 (Black Power), #8E607E (Sunshone Plum), #839DC3 (Sailing), #E1BD7C (Vermicelles). It mixes gray, brown, red, blue, yellow tones and feels warm overall. The strongest text pairing is #1D3328 on #E1BD7C with a contrast ratio of 7.56:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Terminal Blackrgb(29, 51, 40)hsl(150, 28%, 16%)
Black Powerrgb(92, 76, 49)hsl(38, 30%, 28%)
Sunshone Plumrgb(142, 96, 126)hsl(321, 19%, 47%)
Sailingrgb(131, 157, 195)hsl(216, 35%, 64%)
Vermicellesrgb(225, 189, 124)hsl(39, 63%, 68%)

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.56:1 Very good#1D3328 on #E1BD7C
  • Aa7.56:1 Very good#E1BD7C on #1D3328
  • Aa4.87:1 Good#1D3328 on #839DC3
  • Aa4.87:1 Good#839DC3 on #1D3328
  • Aa4.65:1 Good#5C4C31 on #E1BD7C
  • Aa4.65:1 Good#E1BD7C on #5C4C31

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Terminal Black to Vermicelles — https://swatchly.xyz/palette/1d3328-5c4c31-8e607e-839dc3-e1bd7c */
:root {
  --terminal-black: #1d3328;
  --black-power: #5c4c31;
  --sunshone-plum: #8e607e;
  --sailing: #839dc3;
  --vermicelles: #e1bd7c;
}

Tailwind CSS v4

/* Terminal Black to Vermicelles — https://swatchly.xyz/palette/1d3328-5c4c31-8e607e-839dc3-e1bd7c */
@theme {
  --color-terminal-black: #1d3328;
  --color-terminal-black-50: #ebf9f1;
  --color-terminal-black-100: #dff0e7;
  --color-terminal-black-200: #c9ddd2;
  --color-terminal-black-300: #b1c7bb;
  --color-terminal-black-400: #8fa79a;
  --color-terminal-black-500: #728b7e;
  --color-terminal-black-600: #586f63;
  --color-terminal-black-700: #42574c;
  --color-terminal-black-800: #314339;
  --color-terminal-black-900: #1d3328;
  --color-terminal-black-950: #131e18;
  --color-black-power: #5c4c31;
  --color-black-power-50: #fef4e3;
  --color-black-power-100: #f5ead6;
  --color-black-power-200: #e2d4bd;
  --color-black-power-300: #ccbca2;
  --color-black-power-400: #ad9b7f;
  --color-black-power-500: #907f62;
  --color-black-power-600: #746349;
  --color-black-power-700: #5c4c31;
  --color-black-power-800: #473b26;
  --color-black-power-900: #372d1b;
  --color-black-power-950: #231b0f;
  --color-sunshone-plum: #8e607e;
  --color-sunshone-plum-50: #fff0f9;
  --color-sunshone-plum-100: #ffe3f4;
  --color-sunshone-plum-200: #f3cce4;
  --color-sunshone-plum-300: #e0b5d0;
  --color-sunshone-plum-400: #c495b3;
  --color-sunshone-plum-500: #a97998;
  --color-sunshone-plum-600: #8e607e;
  --color-sunshone-plum-700: #734a65;
  --color-sunshone-plum-800: #5c3850;
  --color-sunshone-plum-900: #48293e;
  --color-sunshone-plum-950: #2e1827;
  --color-sailing: #839dc3;
  --color-sailing-50: #ecf4ff;
  --color-sailing-100: #dae9ff;
  --color-sailing-200: #c0d5f4;
  --color-sailing-300: #a6bde0;
  --color-sailing-400: #839dc3;
  --color-sailing-500: #6983a7;
  --color-sailing-600: #52698c;
  --color-sailing-700: #3e5373;
  --color-sailing-800: #2f415c;
  --color-sailing-900: #23334a;
  --color-sailing-950: #142030;
  --color-vermicelles: #e1bd7c;
  --color-vermicelles-50: #fff5e3;
  --color-vermicelles-100: #ffeac4;
  --color-vermicelles-200: #f0d5a6;
  --color-vermicelles-300: #e1bd7c;
  --color-vermicelles-400: #bf9d60;
  --color-vermicelles-500: #a38141;
  --color-vermicelles-600: #876726;
  --color-vermicelles-700: #6e5010;
  --color-vermicelles-800: #573e01;
  --color-vermicelles-900: #442f00;
  --color-vermicelles-950: #2b1c00;
}

Similar palettes