Jedi Night to Philodendron Color Palette

About this palette

Jedi Night to Philodendron is a 4-color dark, cool, gradient palette: #001213 (Jedi Night), #002C52 (Midnight Ocean), #3E3862 (Storm Is Coming), #026756 (Philodendron). It mixes black, blue, purple, turquoise tones and feels cool overall. The strongest text pairing is #001213 on #026756 with a contrast ratio of 2.81:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jedi Night	rgb(0, 18, 19)	hsl(183, 100%, 4%)
Midnight Ocean	rgb(0, 44, 82)	hsl(208, 100%, 16%)
Storm Is Coming	rgb(62, 56, 98)	hsl(249, 27%, 30%)
Philodendron	rgb(2, 103, 86)	hsl(170, 96%, 21%)

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 Philodendron — https://swatchly.xyz/palette/001213-002c52-3e3862-026756 */
:root {
  --jedi-night: #001213;
  --midnight-ocean: #002c52;
  --storm-is-coming: #3e3862;
  --philodendron: #026756;
}

Tailwind CSS v4

/* Jedi Night to Philodendron — https://swatchly.xyz/palette/001213-002c52-3e3862-026756 */
@theme {
  --color-jedi-night: #001213;
  --color-jedi-night-50: #eaf9f9;
  --color-jedi-night-100: #dfefef;
  --color-jedi-night-200: #c9dcdd;
  --color-jedi-night-300: #b0c6c7;
  --color-jedi-night-400: #8fa7a8;
  --color-jedi-night-500: #6f8889;
  --color-jedi-night-600: #536a6b;
  --color-jedi-night-700: #3b4f50;
  --color-jedi-night-800: #29393a;
  --color-jedi-night-900: #1a2627;
  --color-jedi-night-950: #001213;
  --color-midnight-ocean: #002c52;
  --color-midnight-ocean-50: #eef6ff;
  --color-midnight-ocean-100: #ddedff;
  --color-midnight-ocean-200: #badbff;
  --color-midnight-ocean-300: #9fc5ed;
  --color-midnight-ocean-400: #7aa4d0;
  --color-midnight-ocean-500: #5c87b3;
  --color-midnight-ocean-600: #426a94;
  --color-midnight-ocean-700: #2e5277;
  --color-midnight-ocean-800: #1f3e5d;
  --color-midnight-ocean-900: #002c52;
  --color-midnight-ocean-950: #091a2c;
  --color-storm-is-coming: #3e3862;
  --color-storm-is-coming-50: #f4f4ff;
  --color-storm-is-coming-100: #eae8ff;
  --color-storm-is-coming-200: #d6d3f9;
  --color-storm-is-coming-300: #bebae6;
  --color-storm-is-coming-400: #9e9ac9;
  --color-storm-is-coming-500: #827dad;
  --color-storm-is-coming-600: #68638f;
  --color-storm-is-coming-700: #514c74;
  --color-storm-is-coming-800: #3e3862;
  --color-storm-is-coming-900: #2f2c48;
  --color-storm-is-coming-950: #1d1a2f;
  --color-philodendron: #026756;
  --color-philodendron-50: #d9fff4;
  --color-philodendron-100: #c7f7ea;
  --color-philodendron-200: #ace6d6;
  --color-philodendron-300: #8fd2c0;
  --color-philodendron-400: #68b4a1;
  --color-philodendron-500: #489986;
  --color-philodendron-600: #2b7e6c;
  --color-philodendron-700: #026756;
  --color-philodendron-800: #005143;
  --color-philodendron-900: #003e33;
  --color-philodendron-950: #00271f;
}