Start generating

Jedi Night to Moonlit Forest color palette

001110Jedi Night130054Ravenclaw002B2EBlack Box003F4ASunken Harbour006246Midori39706AMoonlit Forest
Open in generator Export PNG, PDF, ASE…

About this palette

Jedi Night to Moonlit Forest is a 6-color dark, cool, gradient palette: #001110 (Jedi Night), #130054 (Ravenclaw), #002B2E (Black Box), #003F4A (Sunken Harbour), #006246 (Midori), #39706A (Moonlit Forest). It mixes black, purple, turquoise tones and feels cool overall. The strongest text pairing is #001110 on #39706A with a contrast ratio of 3.40:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Jedi Nightrgb(0, 17, 16)hsl(176, 100%, 3%)
Ravenclawrgb(19, 0, 84)hsl(254, 100%, 16%)
Black Boxrgb(0, 43, 46)hsl(184, 100%, 9%)
Sunken Harbourrgb(0, 63, 74)hsl(189, 100%, 15%)
Midorirgb(0, 98, 70)hsl(163, 100%, 19%)
Moonlit Forestrgb(57, 112, 106)hsl(173, 33%, 33%)

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.40:1 Poor#001110 on #39706A
  • Aa3.40:1 Poor#39706A on #001110
  • Aa3.20:1 Poor#130054 on #39706A
  • Aa3.20:1 Poor#39706A on #130054

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Jedi Night to Moonlit Forest — https://swatchly.xyz/palette/001110-130054-002b2e-003f4a-006246-39706a */
:root {
  --jedi-night: #001110;
  --ravenclaw: #130054;
  --black-box: #002b2e;
  --sunken-harbour: #003f4a;
  --midori: #006246;
  --moonlit-forest: #39706a;
}

Tailwind CSS v4

/* Jedi Night to Moonlit Forest — https://swatchly.xyz/palette/001110-130054-002b2e-003f4a-006246-39706a */
@theme {
  --color-jedi-night: #001110;
  --color-jedi-night-50: #eaf9f7;
  --color-jedi-night-100: #dfefee;
  --color-jedi-night-200: #c9dcda;
  --color-jedi-night-300: #b0c6c4;
  --color-jedi-night-400: #8fa7a5;
  --color-jedi-night-500: #708886;
  --color-jedi-night-600: #536968;
  --color-jedi-night-700: #3b4f4d;
  --color-jedi-night-800: #283837;
  --color-jedi-night-900: #192524;
  --color-jedi-night-950: #001110;
  --color-ravenclaw: #130054;
  --color-ravenclaw-50: #f2f4ff;
  --color-ravenclaw-100: #e6eaff;
  --color-ravenclaw-200: #cdd5ff;
  --color-ravenclaw-300: #b1bbff;
  --color-ravenclaw-400: #8e99f0;
  --color-ravenclaw-500: #727bd3;
  --color-ravenclaw-600: #585fb3;
  --color-ravenclaw-700: #434893;
  --color-ravenclaw-800: #323575;
  --color-ravenclaw-900: #24265b;
  --color-ravenclaw-950: #130054;
  --color-black-box: #002b2e;
  --color-black-box-50: #e3fafc;
  --color-black-box-100: #d7f1f3;
  --color-black-box-200: #bfdee1;
  --color-black-box-300: #a5c9cb;
  --color-black-box-400: #82aaad;
  --color-black-box-500: #679093;
  --color-black-box-600: #4f7679;
  --color-black-box-700: #3b6062;
  --color-black-box-800: #2c4d4f;
  --color-black-box-900: #213d3f;
  --color-black-box-950: #002b2e;
  --color-sunken-harbour: #003f4a;
  --color-sunken-harbour-50: #e4faff;
  --color-sunken-harbour-100: #d0f2fa;
  --color-sunken-harbour-200: #b7e0e9;
  --color-sunken-harbour-300: #9ccad5;
  --color-sunken-harbour-400: #79acb8;
  --color-sunken-harbour-500: #5c929e;
  --color-sunken-harbour-600: #437783;
  --color-sunken-harbour-700: #30616c;
  --color-sunken-harbour-800: #214d57;
  --color-sunken-harbour-900: #003f4a;
  --color-sunken-harbour-950: #0a272d;
  --color-midori: #006246;
  --color-midori-50: #dbffee;
  --color-midori-100: #c9f8e2;
  --color-midori-200: #ade6cc;
  --color-midori-300: #8ed1b4;
  --color-midori-400: #67b293;
  --color-midori-500: #479677;
  --color-midori-600: #2a7a5d;
  --color-midori-700: #006246;
  --color-midori-800: #034c36;
  --color-midori-900: #003b29;
  --color-midori-950: #002518;
  --color-moonlit-forest: #39706a;
  --color-moonlit-forest-50: #defdf8;
  --color-moonlit-forest-100: #cff2ee;
  --color-moonlit-forest-200: #b5dfd9;
  --color-moonlit-forest-300: #98c8c2;
  --color-moonlit-forest-400: #73a9a2;
  --color-moonlit-forest-500: #558c85;
  --color-moonlit-forest-600: #39706a;
  --color-moonlit-forest-700: #295954;
  --color-moonlit-forest-800: #1b4642;
  --color-moonlit-forest-900: #123733;
  --color-moonlit-forest-950: #082220;
}

Similar palettes