Asphalt to Forestial Outpost Color Palette

About this palette

Asphalt to Forestial Outpost is a 5-color dark, warm, earthy, gradient palette: #1A0800 (Asphalt), #002712 (Nightmare), #432600 (Chocolate Castle), #534F3A (Kelp), #606100 (Forestial Outpost). It mixes black, green, brown, gray tones and feels warm overall. The strongest text pairing is #1A0800 on #606100 with a contrast ratio of 2.97:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Asphalt	rgb(26, 8, 0)	hsl(18, 100%, 5%)
Nightmare	rgb(0, 39, 18)	hsl(148, 100%, 8%)
Chocolate Castle	rgb(67, 38, 0)	hsl(34, 100%, 13%)
Kelp	rgb(83, 79, 58)	hsl(50, 18%, 28%)
Forestial Outpost	rgb(96, 97, 0)	hsl(61, 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.

Color blindness preview

CSS variables

/* Asphalt to Forestial Outpost — https://swatchly.xyz/palette/1a0800-002712-432600-534f3a-606100 */
:root {
  --asphalt: #1a0800;
  --nightmare: #002712;
  --chocolate-castle: #432600;
  --kelp: #534f3a;
  --forestial-outpost: #606100;
}

Tailwind CSS v4

/* Asphalt to Forestial Outpost — https://swatchly.xyz/palette/1a0800-002712-432600-534f3a-606100 */
@theme {
  --color-asphalt: #1a0800;
  --color-asphalt-50: #fff2ea;
  --color-asphalt-100: #f9e7dc;
  --color-asphalt-200: #e8d3c6;
  --color-asphalt-300: #d3bcad;
  --color-asphalt-400: #b59c8b;
  --color-asphalt-500: #967c6c;
  --color-asphalt-600: #765f4f;
  --color-asphalt-700: #5a4638;
  --color-asphalt-800: #413126;
  --color-asphalt-900: #2c2017;
  --color-asphalt-950: #1a0800;
  --color-nightmare: #002712;
  --color-nightmare-50: #e5fcec;
  --color-nightmare-100: #d9f3e1;
  --color-nightmare-200: #c2e1cb;
  --color-nightmare-300: #a8cbb3;
  --color-nightmare-400: #86ac92;
  --color-nightmare-500: #6a9177;
  --color-nightmare-600: #50765d;
  --color-nightmare-700: #3c5e48;
  --color-nightmare-800: #2c4a37;
  --color-nightmare-900: #203929;
  --color-nightmare-950: #002712;
  --color-chocolate-castle: #432600;
  --color-chocolate-castle-50: #fff3e7;
  --color-chocolate-castle-100: #fee7cf;
  --color-chocolate-castle-200: #eed2b6;
  --color-chocolate-castle-300: #dabb9b;
  --color-chocolate-castle-400: #bc9976;
  --color-chocolate-castle-500: #9f7d59;
  --color-chocolate-castle-600: #82623f;
  --color-chocolate-castle-700: #684b2c;
  --color-chocolate-castle-800: #51381d;
  --color-chocolate-castle-900: #432600;
  --color-chocolate-castle-950: #261808;
  --color-kelp: #534f3a;
  --color-kelp-50: #f8f6e8;
  --color-kelp-100: #eeecdc;
  --color-kelp-200: #dad7c4;
  --color-kelp-300: #c3bfaa;
  --color-kelp-400: #a39e88;
  --color-kelp-500: #86826b;
  --color-kelp-600: #6a6651;
  --color-kelp-700: #534f3a;
  --color-kelp-800: #403d2d;
  --color-kelp-900: #322f21;
  --color-kelp-950: #1e1d13;
  --color-forestial-outpost: #606100;
  --color-forestial-outpost-50: #f7f9cd;
  --color-forestial-outpost-100: #edf0be;
  --color-forestial-outpost-200: #dbdea4;
  --color-forestial-outpost-300: #c6c986;
  --color-forestial-outpost-400: #a9ab5f;
  --color-forestial-outpost-500: #8f9141;
  --color-forestial-outpost-600: #757725;
  --color-forestial-outpost-700: #606100;
  --color-forestial-outpost-800: #4b4c00;
  --color-forestial-outpost-900: #3a3a00;
  --color-forestial-outpost-950: #242400;
}