Asphalt to Midnight Pines Color Palette

About this palette

Asphalt to Midnight Pines is a 5-color dark, warm, earthy palette: #140A00 (Asphalt), #3E2D18 (Cola), #42671A (Forestial Outpost), #524302 (Alligator Gladiator), #1E1D00 (Midnight Pines). It mixes black, brown, green tones and feels warm overall. The strongest text pairing is #140A00 on #42671A 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(20, 10, 0)	hsl(30, 100%, 4%)
Cola	rgb(62, 45, 24)	hsl(33, 44%, 17%)
Forestial Outpost	rgb(66, 103, 26)	hsl(89, 60%, 25%)
Alligator Gladiator	rgb(82, 67, 2)	hsl(49, 95%, 16%)
Midnight Pines	rgb(30, 29, 0)	hsl(58, 100%, 6%)

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 Midnight Pines — https://swatchly.xyz/palette/140a00-3e2d18-42671a-524302-1e1d00 */
:root {
  --asphalt: #140a00;
  --cola: #3e2d18;
  --forestial-outpost: #42671a;
  --alligator-gladiator: #524302;
  --midnight-pines: #1e1d00;
}

Tailwind CSS v4

/* Asphalt to Midnight Pines — https://swatchly.xyz/palette/140a00-3e2d18-42671a-524302-1e1d00 */
@theme {
  --color-asphalt: #140a00;
  --color-asphalt-50: #fcf4e8;
  --color-asphalt-100: #f3eadd;
  --color-asphalt-200: #e1d6c6;
  --color-asphalt-300: #cbbfad;
  --color-asphalt-400: #ad9f8c;
  --color-asphalt-500: #8d806d;
  --color-asphalt-600: #6e6250;
  --color-asphalt-700: #534839;
  --color-asphalt-800: #3b3226;
  --color-asphalt-900: #272017;
  --color-asphalt-950: #140a00;
  --color-cola: #3e2d18;
  --color-cola-50: #fff3e5;
  --color-cola-100: #f7e9d9;
  --color-cola-200: #e5d5c2;
  --color-cola-300: #d0bea8;
  --color-cola-400: #b19d86;
  --color-cola-500: #96826a;
  --color-cola-600: #7a6751;
  --color-cola-700: #61503c;
  --color-cola-800: #4c3e2c;
  --color-cola-900: #3e2d18;
  --color-cola-950: #251c11;
  --color-forestial-outpost: #42671a;
  --color-forestial-outpost-50: #e6ffd4;
  --color-forestial-outpost-100: #daf6c5;
  --color-forestial-outpost-200: #c5e5ac;
  --color-forestial-outpost-300: #acd090;
  --color-forestial-outpost-400: #8bb36b;
  --color-forestial-outpost-500: #70984d;
  --color-forestial-outpost-600: #587e34;
  --color-forestial-outpost-700: #42671a;
  --color-forestial-outpost-800: #325110;
  --color-forestial-outpost-900: #253f06;
  --color-forestial-outpost-950: #152801;
  --color-alligator-gladiator: #524302;
  --color-alligator-gladiator-50: #fef5d5;
  --color-alligator-gladiator-100: #f5ebc7;
  --color-alligator-gladiator-200: #e4d8ad;
  --color-alligator-gladiator-300: #cfc190;
  --color-alligator-gladiator-400: #b1a26b;
  --color-alligator-gladiator-500: #97874e;
  --color-alligator-gladiator-600: #7c6c35;
  --color-alligator-gladiator-700: #645622;
  --color-alligator-gladiator-800: #524302;
  --color-alligator-gladiator-900: #3e340a;
  --color-alligator-gladiator-950: #272003;
  --color-midnight-pines: #1e1d00;
  --color-midnight-pines-50: #f6f7e3;
  --color-midnight-pines-100: #ededd6;
  --color-midnight-pines-200: #d9dabf;
  --color-midnight-pines-300: #c3c3a5;
  --color-midnight-pines-400: #a4a483;
  --color-midnight-pines-500: #888866;
  --color-midnight-pines-600: #6d6d4d;
  --color-midnight-pines-700: #555538;
  --color-midnight-pines-800: #424128;
  --color-midnight-pines-900: #31311c;
  --color-midnight-pines-950: #1e1d00;
}