Jedi Night to After the Storm color palette

001410Jedi Night 072400Midnight Pines 00372FPitch-Black Forests 544A0AAlligator Gladiator 356162After the Storm

Open in generator Export PNG, PDF, ASE…

About this palette

Jedi Night to After the Storm is a 5-color dark, cool, gradient palette: #001410 (Jedi Night), #072400 (Midnight Pines), #00372F (Pitch-Black Forests), #544A0A (Alligator Gladiator), #356162 (After the Storm). It mixes black, green, turquoise, brown tones and feels cool overall. The strongest text pairing is #001410 on #356162 with a contrast ratio of 2.74:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jedi Night	rgb(0, 20, 16)	hsl(168, 100%, 4%)
Midnight Pines	rgb(7, 36, 0)	hsl(108, 100%, 7%)
Pitch-Black Forests	rgb(0, 55, 47)	hsl(171, 100%, 11%)
Alligator Gladiator	rgb(84, 74, 10)	hsl(52, 79%, 18%)
After the Storm	rgb(53, 97, 98)	hsl(181, 30%, 30%)

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

/* Jedi Night to After the Storm — https://swatchly.xyz/palette/001410-072400-00372f-544a0a-356162 */
:root {
  --jedi-night: #001410;
  --midnight-pines: #072400;
  --pitch-black-forests: #00372f;
  --alligator-gladiator: #544a0a;
  --after-the-storm: #356162;
}

Tailwind CSS v4

/* Jedi Night to After the Storm — https://swatchly.xyz/palette/001410-072400-00372f-544a0a-356162 */
@theme {
  --color-jedi-night: #001410;
  --color-jedi-night-50: #eaf9f5;
  --color-jedi-night-100: #def0eb;
  --color-jedi-night-200: #c8ddd8;
  --color-jedi-night-300: #afc7c1;
  --color-jedi-night-400: #8ea8a2;
  --color-jedi-night-500: #6f8983;
  --color-jedi-night-600: #536b66;
  --color-jedi-night-700: #3c514c;
  --color-jedi-night-800: #293b37;
  --color-jedi-night-900: #1a2825;
  --color-jedi-night-950: #001410;
  --color-midnight-pines: #072400;
  --color-midnight-pines-50: #e8fce3;
  --color-midnight-pines-100: #ddf3d6;
  --color-midnight-pines-200: #c6e1bf;
  --color-midnight-pines-300: #adcba5;
  --color-midnight-pines-400: #8cac83;
  --color-midnight-pines-500: #709066;
  --color-midnight-pines-600: #56754d;
  --color-midnight-pines-700: #415d39;
  --color-midnight-pines-800: #304829;
  --color-midnight-pines-900: #22371d;
  --color-midnight-pines-950: #072400;
  --color-pitch-black-forests: #00372f;
  --color-pitch-black-forests-50: #e1fcf6;
  --color-pitch-black-forests-100: #d4f3ec;
  --color-pitch-black-forests-200: #bce1d8;
  --color-pitch-black-forests-300: #a1cbc2;
  --color-pitch-black-forests-400: #7daca1;
  --color-pitch-black-forests-500: #5f9085;
  --color-pitch-black-forests-600: #45746a;
  --color-pitch-black-forests-700: #305b53;
  --color-pitch-black-forests-800: #21463f;
  --color-pitch-black-forests-900: #00372f;
  --color-pitch-black-forests-950: #0a201c;
  --color-alligator-gladiator: #544a0a;
  --color-alligator-gladiator-50: #fcf6d5;
  --color-alligator-gladiator-100: #f3edc7;
  --color-alligator-gladiator-200: #e0d9ad;
  --color-alligator-gladiator-300: #ccc492;
  --color-alligator-gladiator-400: #afa66e;
  --color-alligator-gladiator-500: #958b51;
  --color-alligator-gladiator-600: #7c7239;
  --color-alligator-gladiator-700: #665c26;
  --color-alligator-gladiator-800: #544a0a;
  --color-alligator-gladiator-900: #40390d;
  --color-alligator-gladiator-950: #292404;
  --color-after-the-storm: #356162;
  --color-after-the-storm-50: #e1fbfb;
  --color-after-the-storm-100: #d5f2f2;
  --color-after-the-storm-200: #bee0e0;
  --color-after-the-storm-300: #a4cbcb;
  --color-after-the-storm-400: #81adad;
  --color-after-the-storm-500: #659293;
  --color-after-the-storm-600: #4c7778;
  --color-after-the-storm-700: #356162;
  --color-after-the-storm-800: #284c4d;
  --color-after-the-storm-900: #1c3b3b;
  --color-after-the-storm-950: #0e2525;
}