Asphalt to Reptile Revenge Color Palette

About this palette

Asphalt to Reptile Revenge is a 5-color dark, warm, earthy, gradient palette: #150800 (Asphalt), #122000 (Midnight Pines), #3A3600 (Wasabi Nori), #612F35 (Chocolate Truffle), #5F5B33 (Reptile Revenge). It mixes black, green, brown tones and feels warm overall. The strongest text pairing is #150800 on #5F5B33 with a contrast ratio of 2.84:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Asphalt	rgb(21, 8, 0)	hsl(23, 100%, 4%)
Midnight Pines	rgb(18, 32, 0)	hsl(86, 100%, 6%)
Wasabi Nori	rgb(58, 54, 0)	hsl(56, 100%, 11%)
Chocolate Truffle	rgb(97, 47, 53)	hsl(353, 35%, 28%)
Reptile Revenge	rgb(95, 91, 51)	hsl(55, 30%, 29%)

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 Reptile Revenge — https://swatchly.xyz/palette/150800-122000-3a3600-612f35-5f5b33 */
:root {
  --asphalt: #150800;
  --midnight-pines: #122000;
  --wasabi-nori: #3a3600;
  --chocolate-truffle: #612f35;
  --reptile-revenge: #5f5b33;
}

Tailwind CSS v4

/* Asphalt to Reptile Revenge — https://swatchly.xyz/palette/150800-122000-3a3600-612f35-5f5b33 */
@theme {
  --color-asphalt: #150800;
  --color-asphalt-50: #fef3e8;
  --color-asphalt-100: #f5e9dd;
  --color-asphalt-200: #e4d5c7;
  --color-asphalt-300: #cfbeae;
  --color-asphalt-400: #b09e8d;
  --color-asphalt-500: #907e6d;
  --color-asphalt-600: #716050;
  --color-asphalt-700: #554638;
  --color-asphalt-800: #3c3126;
  --color-asphalt-900: #271f17;
  --color-asphalt-950: #150800;
  --color-midnight-pines: #122000;
  --color-midnight-pines-50: #eefae3;
  --color-midnight-pines-100: #e3f0d7;
  --color-midnight-pines-200: #cedebf;
  --color-midnight-pines-300: #b7c8a6;
  --color-midnight-pines-400: #96a983;
  --color-midnight-pines-500: #7a8d67;
  --color-midnight-pines-600: #5f714d;
  --color-midnight-pines-700: #495938;
  --color-midnight-pines-800: #374428;
  --color-midnight-pines-900: #28331c;
  --color-midnight-pines-950: #122000;
  --color-wasabi-nori: #3a3600;
  --color-wasabi-nori-50: #f8f7da;
  --color-wasabi-nori-100: #efedcd;
  --color-wasabi-nori-200: #dcdab3;
  --color-wasabi-nori-300: #c6c498;
  --color-wasabi-nori-400: #a8a574;
  --color-wasabi-nori-500: #8d8958;
  --color-wasabi-nori-600: #726f3f;
  --color-wasabi-nori-700: #5c592c;
  --color-wasabi-nori-800: #48461e;
  --color-wasabi-nori-900: #3a3600;
  --color-wasabi-nori-950: #232208;
  --color-chocolate-truffle: #612f35;
  --color-chocolate-truffle-50: #fff1f2;
  --color-chocolate-truffle-100: #ffe3e5;
  --color-chocolate-truffle-200: #f9cacd;
  --color-chocolate-truffle-300: #e6b1b5;
  --color-chocolate-truffle-400: #c88f94;
  --color-chocolate-truffle-500: #ac7378;
  --color-chocolate-truffle-600: #8f595e;
  --color-chocolate-truffle-700: #744449;
  --color-chocolate-truffle-800: #612f35;
  --color-chocolate-truffle-900: #492629;
  --color-chocolate-truffle-950: #2f1618;
  --color-reptile-revenge: #5f5b33;
  --color-reptile-revenge-50: #f8f7de;
  --color-reptile-revenge-100: #efedd1;
  --color-reptile-revenge-200: #dddaba;
  --color-reptile-revenge-300: #c8c5a0;
  --color-reptile-revenge-400: #aaa67d;
  --color-reptile-revenge-500: #8f8b62;
  --color-reptile-revenge-600: #757149;
  --color-reptile-revenge-700: #5f5b33;
  --color-reptile-revenge-800: #4a4726;
  --color-reptile-revenge-900: #39361a;
  --color-reptile-revenge-950: #24220d;
}