Jungle King to Shadow Play Color Palette

About this palette

Jungle King to Shadow Play is a 5-color dark, warm, earthy palette: #5A492A (Jungle King), #363114 (Secret Passage), #0E0600 (Blackout), #7D5E00 (Hot Curry), #2E1500 (Shadow Play). It mixes brown, black tones and feels warm overall. The strongest text pairing is #0E0600 on #7D5E00 with a contrast ratio of 3.32:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jungle King	rgb(90, 73, 42)	hsl(39, 36%, 26%)
Secret Passage	rgb(54, 49, 20)	hsl(51, 46%, 15%)
Blackout	rgb(14, 6, 0)	hsl(26, 100%, 3%)
Hot Curry	rgb(125, 94, 0)	hsl(45, 100%, 25%)
Shadow Play	rgb(46, 21, 0)	hsl(27, 100%, 9%)

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.

Aa3.32:1 Poor#0E0600 on #7D5E00
Aa3.32:1 Poor#7D5E00 on #0E0600

Color blindness preview

CSS variables

/* Jungle King to Shadow Play — https://swatchly.xyz/palette/5a492a-363114-0e0600-7d5e00-2e1500 */
:root {
  --jungle-king: #5a492a;
  --secret-passage: #363114;
  --blackout: #0e0600;
  --hot-curry: #7d5e00;
  --shadow-play: #2e1500;
}

Tailwind CSS v4

/* Jungle King to Shadow Play — https://swatchly.xyz/palette/5a492a-363114-0e0600-7d5e00-2e1500 */
@theme {
  --color-jungle-king: #5a492a;
  --color-jungle-king-50: #fff4e0;
  --color-jungle-king-100: #f6ead4;
  --color-jungle-king-200: #e3d4ba;
  --color-jungle-king-300: #ccbb9d;
  --color-jungle-king-400: #ac9a79;
  --color-jungle-king-500: #8f7d5c;
  --color-jungle-king-600: #726142;
  --color-jungle-king-700: #5a492a;
  --color-jungle-king-800: #463921;
  --color-jungle-king-900: #362b17;
  --color-jungle-king-950: #221a0c;
  --color-secret-passage: #363114;
  --color-secret-passage-50: #f9f6e3;
  --color-secret-passage-100: #efecd7;
  --color-secret-passage-200: #dcd8bf;
  --color-secret-passage-300: #c6c2a6;
  --color-secret-passage-400: #a7a283;
  --color-secret-passage-500: #8b8667;
  --color-secret-passage-600: #706b4d;
  --color-secret-passage-700: #595439;
  --color-secret-passage-800: #454129;
  --color-secret-passage-900: #363114;
  --color-secret-passage-950: #201e10;
  --color-blackout: #0e0600;
  --color-blackout-50: #fbf4ea;
  --color-blackout-100: #f2eadf;
  --color-blackout-200: #e0d6c9;
  --color-blackout-300: #cabfb0;
  --color-blackout-400: #ac9f90;
  --color-blackout-500: #8b7f6f;
  --color-blackout-600: #6b6051;
  --color-blackout-700: #4e4538;
  --color-blackout-800: #362e25;
  --color-blackout-900: #211c15;
  --color-blackout-950: #0e0600;
  --color-hot-curry: #7d5e00;
  --color-hot-curry-50: #fff4dd;
  --color-hot-curry-100: #fde7b9;
  --color-hot-curry-200: #ebd199;
  --color-hot-curry-300: #d6b978;
  --color-hot-curry-400: #b7974e;
  --color-hot-curry-500: #9a7a2c;
  --color-hot-curry-600: #7d5e00;
  --color-hot-curry-700: #634a00;
  --color-hot-curry-800: #4e3a00;
  --color-hot-curry-900: #3d2c00;
  --color-hot-curry-950: #271b00;
  --color-shadow-play: #2e1500;
  --color-shadow-play-50: #fff3e9;
  --color-shadow-play-100: #fde7d6;
  --color-shadow-play-200: #ecd2be;
  --color-shadow-play-300: #d8bba4;
  --color-shadow-play-400: #ba9a82;
  --color-shadow-play-500: #9e7e65;
  --color-shadow-play-600: #82644c;
  --color-shadow-play-700: #684d38;
  --color-shadow-play-800: #523b28;
  --color-shadow-play-900: #3f2b1c;
  --color-shadow-play-950: #2e1500;
}