Start generating

Asphalt to Chocolate Explosion color palette

160600Asphalt2C120AShadow Play212F06Darkest Forest453B25Madras5F4000Very Coffee894739Chocolate Explosion
Open in generator Export PNG, PDF, ASE…

About this palette

Asphalt to Chocolate Explosion is a 6-color dark, warm, earthy, gradient palette: #160600 (Asphalt), #2C120A (Shadow Play), #212F06 (Darkest Forest), #453B25 (Madras), #5F4000 (Very Coffee), #894739 (Chocolate Explosion). It mixes black, brown, green, red tones and feels warm overall. The strongest text pairing is #160600 on #894739 with a contrast ratio of 2.85:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Asphaltrgb(22, 6, 0)hsl(16, 100%, 4%)
Shadow Playrgb(44, 18, 10)hsl(14, 63%, 11%)
Darkest Forestrgb(33, 47, 6)hsl(80, 77%, 10%)
Madrasrgb(69, 59, 37)hsl(41, 30%, 21%)
Very Coffeergb(95, 64, 0)hsl(40, 100%, 19%)
Chocolate Explosionrgb(137, 71, 57)hsl(10, 41%, 38%)

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

    • Protanopia
    • Deuteranopia
    • Tritanopia
    • Achromatopsia
    • Dog vision

    CSS variables

    /* Asphalt to Chocolate Explosion — https://swatchly.xyz/palette/160600-2c120a-212f06-453b25-5f4000-894739 */
:root {
  --asphalt: #160600;
  --shadow-play: #2c120a;
  --darkest-forest: #212f06;
  --madras: #453b25;
  --very-coffee: #5f4000;
  --chocolate-explosion: #894739;
}

    Tailwind CSS v4

    /* Asphalt to Chocolate Explosion — https://swatchly.xyz/palette/160600-2c120a-212f06-453b25-5f4000-894739 */
@theme {
  --color-asphalt: #160600;
  --color-asphalt-50: #fff2ea;
  --color-asphalt-100: #f8e8dd;
  --color-asphalt-200: #e7d3c7;
  --color-asphalt-300: #d2bcae;
  --color-asphalt-400: #b49c8d;
  --color-asphalt-500: #947c6d;
  --color-asphalt-600: #745e50;
  --color-asphalt-700: #574438;
  --color-asphalt-800: #3e2f25;
  --color-asphalt-900: #281d16;
  --color-asphalt-950: #160600;
  --color-shadow-play: #2c120a;
  --color-shadow-play-50: #fff2ee;
  --color-shadow-play-100: #fde5de;
  --color-shadow-play-200: #edd0c8;
  --color-shadow-play-300: #d8b9af;
  --color-shadow-play-400: #bb998e;
  --color-shadow-play-500: #9e7c72;
  --color-shadow-play-600: #816157;
  --color-shadow-play-700: #674b42;
  --color-shadow-play-800: #503830;
  --color-shadow-play-900: #3d2923;
  --color-shadow-play-950: #2c120a;
  --color-darkest-forest: #212f06;
  --color-darkest-forest-50: #effae1;
  --color-darkest-forest-100: #e4f1d4;
  --color-darkest-forest-200: #cfdebc;
  --color-darkest-forest-300: #b7c8a2;
  --color-darkest-forest-400: #95a77d;
  --color-darkest-forest-500: #788a5f;
  --color-darkest-forest-600: #5d6d45;
  --color-darkest-forest-700: #465431;
  --color-darkest-forest-800: #333f21;
  --color-darkest-forest-900: #212f06;
  --color-darkest-forest-950: #141b0a;
  --color-madras: #453b25;
  --color-madras-50: #fbf5e6;
  --color-madras-100: #f2eada;
  --color-madras-200: #e0d7c3;
  --color-madras-300: #c9bfa9;
  --color-madras-400: #a99e86;
  --color-madras-500: #8d8269;
  --color-madras-600: #71664f;
  --color-madras-700: #584f3b;
  --color-madras-800: #453b25;
  --color-madras-900: #342d1f;
  --color-madras-950: #201b11;
  --color-very-coffee: #5f4000;
  --color-very-coffee-50: #fff3e2;
  --color-very-coffee-100: #ffe8c6;
  --color-very-coffee-200: #eed3ab;
  --color-very-coffee-300: #dbbd8e;
  --color-very-coffee-400: #bf9d6a;
  --color-very-coffee-500: #a4824d;
  --color-very-coffee-600: #896934;
  --color-very-coffee-700: #715321;
  --color-very-coffee-800: #5f4000;
  --color-very-coffee-900: #483208;
  --color-very-coffee-950: #2f1e02;
  --color-chocolate-explosion: #894739;
  --color-chocolate-explosion-50: #fff2ef;
  --color-chocolate-explosion-100: #ffe4de;
  --color-chocolate-explosion-200: #ffcbbf;
  --color-chocolate-explosion-300: #f2b2a3;
  --color-chocolate-explosion-400: #d79182;
  --color-chocolate-explosion-500: #bd7666;
  --color-chocolate-explosion-600: #a15d4e;
  --color-chocolate-explosion-700: #894739;
  --color-chocolate-explosion-800: #6d362a;
  --color-chocolate-explosion-900: #56281e;
  --color-chocolate-explosion-950: #391710;
}

    Similar palettes