Jedi Night to Succulents color palette

001409Jedi Night 002025Midnight Dreams 32331EGraphite 004044Rich Black 1F506DSeafarer 007648Succulents

Open in generator Export PNG, PDF, ASE…

About this palette

Jedi Night to Succulents is a 6-color dark, cool palette: #001409 (Jedi Night), #002025 (Midnight Dreams), #32331E (Graphite), #004044 (Rich Black), #1F506D (Seafarer), #007648 (Succulents). It mixes black, turquoise, gray, blue, green tones and feels cool overall. The strongest text pairing is #001409 on #007648 with a contrast ratio of 3.34:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jedi Night	rgb(0, 20, 9)	hsl(147, 100%, 4%)
Midnight Dreams	rgb(0, 32, 37)	hsl(188, 100%, 7%)
Graphite	rgb(50, 51, 30)	hsl(63, 26%, 16%)
Rich Black	rgb(0, 64, 68)	hsl(184, 100%, 13%)
Seafarer	rgb(31, 80, 109)	hsl(202, 56%, 27%)
Succulents	rgb(0, 118, 72)	hsl(157, 100%, 23%)

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.34:1 Poor#001409 on #007648
Aa3.34:1 Poor#007648 on #001409

Color blindness preview

CSS variables

/* Jedi Night to Succulents — https://swatchly.xyz/palette/001409-002025-32331e-004044-1f506d-007648 */
:root {
  --jedi-night: #001409;
  --midnight-dreams: #002025;
  --graphite: #32331e;
  --rich-black: #004044;
  --seafarer: #1f506d;
  --succulents: #007648;
}

Tailwind CSS v4

/* Jedi Night to Succulents — https://swatchly.xyz/palette/001409-002025-32331e-004044-1f506d-007648 */
@theme {
  --color-jedi-night: #001409;
  --color-jedi-night-50: #eafaf0;
  --color-jedi-night-100: #def0e6;
  --color-jedi-night-200: #c8ded1;
  --color-jedi-night-300: #b0c8b9;
  --color-jedi-night-400: #8fa999;
  --color-jedi-night-500: #6f8a7b;
  --color-jedi-night-600: #536c5d;
  --color-jedi-night-700: #3c5145;
  --color-jedi-night-800: #293b31;
  --color-jedi-night-900: #1a2820;
  --color-jedi-night-950: #001409;
  --color-midnight-dreams: #002025;
  --color-midnight-dreams-50: #e6f9fd;
  --color-midnight-dreams-100: #daf0f4;
  --color-midnight-dreams-200: #c3dde2;
  --color-midnight-dreams-300: #a9c7cc;
  --color-midnight-dreams-400: #87a8ae;
  --color-midnight-dreams-500: #6b8c92;
  --color-midnight-dreams-600: #517076;
  --color-midnight-dreams-700: #3c595e;
  --color-midnight-dreams-800: #2b4449;
  --color-midnight-dreams-900: #1e3337;
  --color-midnight-dreams-950: #002025;
  --color-graphite: #32331e;
  --color-graphite-50: #f5f7e8;
  --color-graphite-100: #ebeddd;
  --color-graphite-200: #d8d9c6;
  --color-graphite-300: #c1c3ad;
  --color-graphite-400: #a2a38c;
  --color-graphite-500: #868870;
  --color-graphite-600: #6c6d56;
  --color-graphite-700: #555641;
  --color-graphite-800: #424331;
  --color-graphite-900: #32331e;
  --color-graphite-950: #1e1f14;
  --color-rich-black: #004044;
  --color-rich-black-50: #defcfe;
  --color-rich-black-100: #d1f3f5;
  --color-rich-black-200: #b8e0e3;
  --color-rich-black-300: #9ccbce;
  --color-rich-black-400: #79adb1;
  --color-rich-black-500: #5d9397;
  --color-rich-black-600: #44787c;
  --color-rich-black-700: #306265;
  --color-rich-black-800: #214e52;
  --color-rich-black-900: #004044;
  --color-rich-black-950: #0a282a;
  --color-seafarer: #1f506d;
  --color-seafarer-50: #ecf7ff;
  --color-seafarer-100: #d8efff;
  --color-seafarer-200: #b8ddf7;
  --color-seafarer-300: #9fc9e6;
  --color-seafarer-400: #7cabcb;
  --color-seafarer-500: #6191b1;
  --color-seafarer-600: #487897;
  --color-seafarer-700: #35627e;
  --color-seafarer-800: #1f506d;
  --color-seafarer-900: #1a3e53;
  --color-seafarer-950: #0c2737;
  --color-succulents: #007648;
  --color-succulents-50: #ddffea;
  --color-succulents-100: #c1f9d7;
  --color-succulents-200: #a2e6be;
  --color-succulents-300: #81d0a3;
  --color-succulents-400: #56b080;
  --color-succulents-500: #329363;
  --color-succulents-600: #007648;
  --color-succulents-700: #005e38;
  --color-succulents-800: #004a2b;
  --color-succulents-900: #003920;
  --color-succulents-950: #002413;
}