Dark Serpent to Chocolate Rain Color Palette

About this palette

Dark Serpent to Chocolate Rain is a 5-color dark, warm, earthy palette: #00371D (Dark Serpent), #09240F (Nightmare), #190900 (Asphalt), #543F2D (Turtle), #734D2C (Chocolate Rain). It mixes green, black, brown tones and feels warm overall. The strongest text pairing is #190900 on #734D2C with a contrast ratio of 2.62:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Serpent	rgb(0, 55, 29)	hsl(152, 100%, 11%)
Nightmare	rgb(9, 36, 15)	hsl(133, 60%, 9%)
Asphalt	rgb(25, 9, 0)	hsl(22, 100%, 5%)
Turtle	rgb(84, 63, 45)	hsl(28, 30%, 25%)
Chocolate Rain	rgb(115, 77, 44)	hsl(28, 45%, 31%)

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

/* Dark Serpent to Chocolate Rain — https://swatchly.xyz/palette/00371d-09240f-190900-543f2d-734d2c */
:root {
  --dark-serpent: #00371d;
  --nightmare: #09240f;
  --asphalt: #190900;
  --turtle: #543f2d;
  --chocolate-rain: #734d2c;
}

Tailwind CSS v4

/* Dark Serpent to Chocolate Rain — https://swatchly.xyz/palette/00371d-09240f-190900-543f2d-734d2c */
@theme {
  --color-dark-serpent: #00371d;
  --color-dark-serpent-50: #e1feea;
  --color-dark-serpent-100: #d4f5df;
  --color-dark-serpent-200: #bce3c9;
  --color-dark-serpent-300: #a2cdb1;
  --color-dark-serpent-400: #7dae8e;
  --color-dark-serpent-500: #5f9172;
  --color-dark-serpent-600: #457557;
  --color-dark-serpent-700: #305c42;
  --color-dark-serpent-800: #214630;
  --color-dark-serpent-900: #00371d;
  --color-dark-serpent-950: #0a2013;
  --color-nightmare: #09240f;
  --color-nightmare-50: #e9fbeb;
  --color-nightmare-100: #ddf2e0;
  --color-nightmare-200: #c7dfca;
  --color-nightmare-300: #aec9b1;
  --color-nightmare-400: #8dab91;
  --color-nightmare-500: #718f75;
  --color-nightmare-600: #57745b;
  --color-nightmare-700: #425c46;
  --color-nightmare-800: #314834;
  --color-nightmare-900: #243727;
  --color-nightmare-950: #09240f;
  --color-asphalt: #190900;
  --color-asphalt-50: #fff3e9;
  --color-asphalt-100: #f7e8dc;
  --color-asphalt-200: #e6d4c5;
  --color-asphalt-300: #d1bdad;
  --color-asphalt-400: #b39d8b;
  --color-asphalt-500: #947d6c;
  --color-asphalt-600: #74604f;
  --color-asphalt-700: #584738;
  --color-asphalt-800: #403226;
  --color-asphalt-900: #2b2018;
  --color-asphalt-950: #190900;
  --color-turtle: #543f2d;
  --color-turtle-50: #fff3e9;
  --color-turtle-100: #f8e8da;
  --color-turtle-200: #e7d4c4;
  --color-turtle-300: #d2bdab;
  --color-turtle-400: #b59d8a;
  --color-turtle-500: #9a826e;
  --color-turtle-600: #7e6855;
  --color-turtle-700: #665241;
  --color-turtle-800: #543f2d;
  --color-turtle-900: #403124;
  --color-turtle-950: #291e14;
  --color-chocolate-rain: #734d2c;
  --color-chocolate-rain-50: #fff3e9;
  --color-chocolate-rain-100: #ffe6d2;
  --color-chocolate-rain-200: #f2d1b6;
  --color-chocolate-rain-300: #dfb99b;
  --color-chocolate-rain-400: #c29978;
  --color-chocolate-rain-500: #a77d5c;
  --color-chocolate-rain-600: #8a6443;
  --color-chocolate-rain-700: #734d2c;
  --color-chocolate-rain-800: #5a3c21;
  --color-chocolate-rain-900: #472d16;
  --color-chocolate-rain-950: #2e1b0a;
}