Jedi Night to Sailor Color Palette

About this palette

Jedi Night to Sailor is a 5-color dark, cool, gradient palette: #001510 (Jedi Night), #00212B (Midnight Dreams), #003A3B (Rich Black), #395146 (Hunter), #42587A (Sailor). It mixes black, blue, turquoise, gray tones and feels cool overall. The strongest text pairing is #001510 on #42587A with a contrast ratio of 2.61:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jedi Night	rgb(0, 21, 16)	hsl(166, 100%, 4%)
Midnight Dreams	rgb(0, 33, 43)	hsl(194, 100%, 8%)
Rich Black	rgb(0, 58, 59)	hsl(181, 100%, 12%)
Hunter	rgb(57, 81, 70)	hsl(153, 17%, 27%)
Sailor	rgb(66, 88, 122)	hsl(216, 30%, 37%)

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 Sailor — https://swatchly.xyz/palette/001510-00212b-003a3b-395146-42587a */
:root {
  --jedi-night: #001510;
  --midnight-dreams: #00212b;
  --rich-black: #003a3b;
  --hunter: #395146;
  --sailor: #42587a;
}

Tailwind CSS v4

/* Jedi Night to Sailor — https://swatchly.xyz/palette/001510-00212b-003a3b-395146-42587a */
@theme {
  --color-jedi-night: #001510;
  --color-jedi-night-50: #e9f9f5;
  --color-jedi-night-100: #def0eb;
  --color-jedi-night-200: #c8ddd7;
  --color-jedi-night-300: #afc7c0;
  --color-jedi-night-400: #8ea8a1;
  --color-jedi-night-500: #6f8a82;
  --color-jedi-night-600: #536c65;
  --color-jedi-night-700: #3c524c;
  --color-jedi-night-800: #293b37;
  --color-jedi-night-900: #1b2925;
  --color-jedi-night-950: #001510;
  --color-midnight-dreams: #00212b;
  --color-midnight-dreams-50: #e7f9ff;
  --color-midnight-dreams-100: #d9f0f8;
  --color-midnight-dreams-200: #c2dde7;
  --color-midnight-dreams-300: #a8c7d2;
  --color-midnight-dreams-400: #86a8b4;
  --color-midnight-dreams-500: #6a8c98;
  --color-midnight-dreams-600: #50717c;
  --color-midnight-dreams-700: #3b5963;
  --color-midnight-dreams-800: #2b454e;
  --color-midnight-dreams-900: #1f343c;
  --color-midnight-dreams-950: #00212b;
  --color-rich-black: #003a3b;
  --color-rich-black-50: #dffcfc;
  --color-rich-black-100: #d3f3f3;
  --color-rich-black-200: #bae0e0;
  --color-rich-black-300: #9fcbcb;
  --color-rich-black-400: #7bacac;
  --color-rich-black-500: #5e9091;
  --color-rich-black-600: #447576;
  --color-rich-black-700: #305d5e;
  --color-rich-black-800: #214949;
  --color-rich-black-900: #003a3b;
  --color-rich-black-950: #0a2323;
  --color-hunter: #395146;
  --color-hunter-50: #eaf9f2;
  --color-hunter-100: #dff0e7;
  --color-hunter-200: #c9ddd3;
  --color-hunter-300: #b2c9be;
  --color-hunter-400: #92ac9f;
  --color-hunter-500: #789286;
  --color-hunter-600: #60796d;
  --color-hunter-700: #4b6358;
  --color-hunter-800: #395146;
  --color-hunter-900: #2c3e36;
  --color-hunter-950: #1a2822;
  --color-sailor: #42587a;
  --color-sailor-50: #eff6ff;
  --color-sailor-100: #e0ecff;
  --color-sailor-200: #c6d9f7;
  --color-sailor-300: #adc3e4;
  --color-sailor-400: #8ca4c8;
  --color-sailor-500: #7189ad;
  --color-sailor-600: #586f91;
  --color-sailor-700: #42587a;
  --color-sailor-800: #334560;
  --color-sailor-900: #25344c;
  --color-sailor-950: #152031;
}