Go to Hell Black to Delicate Cloud color palette

302D18Go to Hell Black 564A2AJungle King 85805BMushroom Forest AEB9CFEthereal Mist DCDDEDDelicate Cloud

Open in generator Export PNG, PDF, ASE…

About this palette

Go to Hell Black to Delicate Cloud is a 5-color muted, gradient palette: #302D18 (Go to Hell Black), #564A2A (Jungle King), #85805B (Mushroom Forest), #AEB9CF (Ethereal Mist), #DCDDED (Delicate Cloud). It mixes gray, brown, yellow tones and feels warm overall. The strongest text pairing is #302D18 on #DCDDED with a contrast ratio of 10.31:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Go to Hell Black	rgb(48, 45, 24)	hsl(53, 33%, 14%)
Jungle King	rgb(86, 74, 42)	hsl(44, 34%, 25%)
Mushroom Forest	rgb(133, 128, 91)	hsl(53, 19%, 44%)
Ethereal Mist	rgb(174, 185, 207)	hsl(220, 26%, 75%)
Delicate Cloud	rgb(220, 221, 237)	hsl(236, 32%, 90%)

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.

Aa10.31:1 Very good#302D18 on #DCDDED
Aa10.31:1 Very good#DCDDED on #302D18
Aa7.03:1 Very good#302D18 on #AEB9CF
Aa7.03:1 Very good#AEB9CF on #302D18
Aa6.48:1 Good#564A2A on #DCDDED
Aa6.48:1 Good#DCDDED on #564A2A
Aa4.42:1 Poor#564A2A on #AEB9CF
Aa4.42:1 Poor#AEB9CF on #564A2A

Color blindness preview

CSS variables

/* Go to Hell Black to Delicate Cloud — https://swatchly.xyz/palette/302d18-564a2a-85805b-aeb9cf-dcdded */
:root {
  --go-to-hell-black: #302d18;
  --jungle-king: #564a2a;
  --mushroom-forest: #85805b;
  --ethereal-mist: #aeb9cf;
  --delicate-cloud: #dcdded;
}

Tailwind CSS v4

/* Go to Hell Black to Delicate Cloud — https://swatchly.xyz/palette/302d18-564a2a-85805b-aeb9cf-dcdded */
@theme {
  --color-go-to-hell-black: #302d18;
  --color-go-to-hell-black-50: #f8f6e7;
  --color-go-to-hell-black-100: #eeecdc;
  --color-go-to-hell-black-200: #dbd8c5;
  --color-go-to-hell-black-300: #c5c2ac;
  --color-go-to-hell-black-400: #a4a189;
  --color-go-to-hell-black-500: #88856d;
  --color-go-to-hell-black-600: #6c6952;
  --color-go-to-hell-black-700: #54513d;
  --color-go-to-hell-black-800: #403d2c;
  --color-go-to-hell-black-900: #302d18;
  --color-go-to-hell-black-950: #1c1b11;
  --color-jungle-king: #564a2a;
  --color-jungle-king-50: #fcf5e1;
  --color-jungle-king-100: #f3ebd4;
  --color-jungle-king-200: #e1d7bc;
  --color-jungle-king-300: #cdc2a4;
  --color-jungle-king-400: #b1a483;
  --color-jungle-king-500: #978a68;
  --color-jungle-king-600: #7e7150;
  --color-jungle-king-700: #685c3d;
  --color-jungle-king-800: #564a2a;
  --color-jungle-king-900: #423921;
  --color-jungle-king-950: #2a2412;
  --color-mushroom-forest: #85805b;
  --color-mushroom-forest-50: #f8f5de;
  --color-mushroom-forest-100: #edead0;
  --color-mushroom-forest-200: #d9d5b7;
  --color-mushroom-forest-300: #c1bd9b;
  --color-mushroom-forest-400: #a19c78;
  --color-mushroom-forest-500: #85805b;
  --color-mushroom-forest-600: #6c6744;
  --color-mushroom-forest-700: #565232;
  --color-mushroom-forest-800: #444024;
  --color-mushroom-forest-900: #35311a;
  --color-mushroom-forest-950: #211f0e;
  --color-ethereal-mist: #aeb9cf;
  --color-ethereal-mist-50: #eaf1fe;
  --color-ethereal-mist-100: #dee6f5;
  --color-ethereal-mist-200: #c8d1e2;
  --color-ethereal-mist-300: #aeb9cf;
  --color-ethereal-mist-400: #919bb0;
  --color-ethereal-mist-500: #778196;
  --color-ethereal-mist-600: #5f687c;
  --color-ethereal-mist-700: #4a5364;
  --color-ethereal-mist-800: #3a4151;
  --color-ethereal-mist-900: #2c3340;
  --color-ethereal-mist-950: #1b1f29;
  --color-delicate-cloud: #dcdded;
  --color-delicate-cloud-50: #f9f9ff;
  --color-delicate-cloud-100: #f0f0fa;
  --color-delicate-cloud-200: #dcdded;
  --color-delicate-cloud-300: #c5c5d2;
  --color-delicate-cloud-400: #a4a5b3;
  --color-delicate-cloud-500: #878897;
  --color-delicate-cloud-600: #6c6d7a;
  --color-delicate-cloud-700: #545562;
  --color-delicate-cloud-800: #41414c;
  --color-delicate-cloud-900: #31323b;
  --color-delicate-cloud-950: #1e1f25;
}