Jedi Night to Black Forest color palette

00130EJedi Night 002927Swamp Thing 233800Melancholia 45311CCafé Noir 5D4C00Ayahuasca Vine 596653Black Forest

Open in generator Export PNG, PDF, ASE…

About this palette

Jedi Night to Black Forest is a 6-color dark palette: #00130E (Jedi Night), #002927 (Swamp Thing), #233800 (Melancholia), #45311C (Café Noir), #5D4C00 (Ayahuasca Vine), #596653 (Black Forest). It mixes black, turquoise, green, brown, gray tones and feels balanced overall. The strongest text pairing is #00130E on #596653 with a contrast ratio of 3.14:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jedi Night	rgb(0, 19, 14)	hsl(164, 100%, 4%)
Swamp Thing	rgb(0, 41, 39)	hsl(177, 100%, 8%)
Melancholia	rgb(35, 56, 0)	hsl(82, 100%, 11%)
Café Noir	rgb(69, 49, 28)	hsl(31, 42%, 19%)
Ayahuasca Vine	rgb(93, 76, 0)	hsl(49, 100%, 18%)
Black Forest	rgb(89, 102, 83)	hsl(101, 10%, 36%)

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.14:1 Poor#00130E on #596653
Aa3.14:1 Poor#596653 on #00130E

Color blindness preview

CSS variables

/* Jedi Night to Black Forest — https://swatchly.xyz/palette/00130e-002927-233800-45311c-5d4c00-596653 */
:root {
  --jedi-night: #00130e;
  --swamp-thing: #002927;
  --melancholia: #233800;
  --caf-noir: #45311c;
  --ayahuasca-vine: #5d4c00;
  --black-forest: #596653;
}

Tailwind CSS v4

/* Jedi Night to Black Forest — https://swatchly.xyz/palette/00130e-002927-233800-45311c-5d4c00-596653 */
@theme {
  --color-jedi-night: #00130e;
  --color-jedi-night-50: #eaf9f4;
  --color-jedi-night-100: #dff0ea;
  --color-jedi-night-200: #c9ddd7;
  --color-jedi-night-300: #b0c7c0;
  --color-jedi-night-400: #8fa8a0;
  --color-jedi-night-500: #6f8981;
  --color-jedi-night-600: #536b64;
  --color-jedi-night-700: #3c504a;
  --color-jedi-night-800: #293a35;
  --color-jedi-night-900: #1a2723;
  --color-jedi-night-950: #00130e;
  --color-swamp-thing: #002927;
  --color-swamp-thing-50: #e4fbf9;
  --color-swamp-thing-100: #d8f1ef;
  --color-swamp-thing-200: #c0dfdc;
  --color-swamp-thing-300: #a6c9c6;
  --color-swamp-thing-400: #84aaa7;
  --color-swamp-thing-500: #68908c;
  --color-swamp-thing-600: #4f7572;
  --color-swamp-thing-700: #3c5f5c;
  --color-swamp-thing-800: #2c4b49;
  --color-swamp-thing-900: #203b39;
  --color-swamp-thing-950: #002927;
  --color-melancholia: #233800;
  --color-melancholia-50: #ecfcdc;
  --color-melancholia-100: #e1f3cf;
  --color-melancholia-200: #cbe0b6;
  --color-melancholia-300: #b3ca9a;
  --color-melancholia-400: #92ab76;
  --color-melancholia-500: #768f59;
  --color-melancholia-600: #5c7440;
  --color-melancholia-700: #465c2c;
  --color-melancholia-800: #35471e;
  --color-melancholia-900: #233800;
  --color-melancholia-950: #172209;
  --color-caf-noir: #45311c;
  --color-caf-noir-50: #fff3e7;
  --color-caf-noir-100: #f8e8d8;
  --color-caf-noir-200: #e7d4c1;
  --color-caf-noir-300: #d2bda8;
  --color-caf-noir-400: #b59d87;
  --color-caf-noir-500: #9a826b;
  --color-caf-noir-600: #7f6952;
  --color-caf-noir-700: #67533f;
  --color-caf-noir-800: #53412f;
  --color-caf-noir-900: #45311c;
  --color-caf-noir-950: #2a1f14;
  --color-ayahuasca-vine: #5d4c00;
  --color-ayahuasca-vine-50: #fff5d3;
  --color-ayahuasca-vine-100: #f7ebc3;
  --color-ayahuasca-vine-200: #e4d6a6;
  --color-ayahuasca-vine-300: #cdbe86;
  --color-ayahuasca-vine-400: #ae9d5f;
  --color-ayahuasca-vine-500: #918040;
  --color-ayahuasca-vine-600: #756425;
  --color-ayahuasca-vine-700: #5d4c00;
  --color-ayahuasca-vine-800: #483b05;
  --color-ayahuasca-vine-900: #382d01;
  --color-ayahuasca-vine-950: #231b00;
  --color-black-forest: #596653;
  --color-black-forest-50: #f0f8ec;
  --color-black-forest-100: #e3eddf;
  --color-black-forest-200: #ccd8c7;
  --color-black-forest-300: #b3c0ad;
  --color-black-forest-400: #919f8b;
  --color-black-forest-500: #74826e;
  --color-black-forest-600: #596653;
  --color-black-forest-700: #465141;
  --color-black-forest-800: #363f31;
  --color-black-forest-900: #293125;
  --color-black-forest-950: #191e16;
}