Glossy Black to Forestial Outpost Color Palette

About this palette

Glossy Black to Forestial Outpost is a 4-color dark, warm, gradient palette: #160109 (Glossy Black), #500D27 (What We Do in the Shadows), #533700 (Pineapple), #5C6100 (Forestial Outpost). It mixes black, red, brown, green tones and feels warm overall. The strongest text pairing is #160109 on #5C6100 with a contrast ratio of 3.04:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Glossy Black	rgb(22, 1, 9)	hsl(337, 91%, 5%)
What We Do in the Shadows	rgb(80, 13, 39)	hsl(337, 72%, 18%)
Pineapple	rgb(83, 55, 0)	hsl(40, 100%, 16%)
Forestial Outpost	rgb(92, 97, 0)	hsl(63, 100%, 19%)

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.

Aa3.04:1 Poor#160109 on #5C6100
Aa3.04:1 Poor#5C6100 on #160109

Color blindness preview

CSS variables

/* Glossy Black to Forestial Outpost — https://swatchly.xyz/palette/160109-500d27-533700-5c6100 */
:root {
  --glossy-black: #160109;
  --what-we-do-in-the-shadows: #500d27;
  --pineapple: #533700;
  --forestial-outpost: #5c6100;
}

Tailwind CSS v4

/* Glossy Black to Forestial Outpost — https://swatchly.xyz/palette/160109-500d27-533700-5c6100 */
@theme {
  --color-glossy-black: #160109;
  --color-glossy-black-50: #fff1f6;
  --color-glossy-black-100: #fde3ec;
  --color-glossy-black-200: #ecced9;
  --color-glossy-black-300: #d8b6c2;
  --color-glossy-black-400: #ba96a3;
  --color-glossy-black-500: #9a7582;
  --color-glossy-black-600: #785763;
  --color-glossy-black-700: #5a3e48;
  --color-glossy-black-800: #3f2931;
  --color-glossy-black-900: #28181e;
  --color-glossy-black-950: #160109;
  --color-what-we-do-in-the-shadows: #500d27;
  --color-what-we-do-in-the-shadows-50: #fff1f4;
  --color-what-we-do-in-the-shadows-100: #ffe3e9;
  --color-what-we-do-in-the-shadows-200: #ffc6d3;
  --color-what-we-do-in-the-shadows-300: #f0aabc;
  --color-what-we-do-in-the-shadows-400: #d2869b;
  --color-what-we-do-in-the-shadows-500: #b4697e;
  --color-what-we-do-in-the-shadows-600: #954e62;
  --color-what-we-do-in-the-shadows-700: #77394b;
  --color-what-we-do-in-the-shadows-800: #5d2838;
  --color-what-we-do-in-the-shadows-900: #500d27;
  --color-what-we-do-in-the-shadows-950: #2c0e17;
  --color-pineapple: #533700;
  --color-pineapple-50: #fff3e3;
  --color-pineapple-100: #fde8c9;
  --color-pineapple-200: #edd3af;
  --color-pineapple-300: #d8bb91;
  --color-pineapple-400: #b99a6c;
  --color-pineapple-500: #9d7d4e;
  --color-pineapple-600: #806234;
  --color-pineapple-700: #664c21;
  --color-pineapple-800: #533700;
  --color-pineapple-900: #3e2b0b;
  --color-pineapple-950: #271904;
  --color-forestial-outpost: #5c6100;
  --color-forestial-outpost-50: #f5face;
  --color-forestial-outpost-100: #ebf1bf;
  --color-forestial-outpost-200: #d8dfa4;
  --color-forestial-outpost-300: #c3ca86;
  --color-forestial-outpost-400: #a5ac5f;
  --color-forestial-outpost-500: #8b9141;
  --color-forestial-outpost-600: #717725;
  --color-forestial-outpost-700: #5c6100;
  --color-forestial-outpost-800: #484c00;
  --color-forestial-outpost-900: #373a00;
  --color-forestial-outpost-950: #222400;
}