Jedi Night to Arctic Nights Color Palette

About this palette

Jedi Night to Arctic Nights is a 5-color dark, cool, earthy, gradient palette: #00180A (Jedi Night), #2B2603 (Secret Passage), #2F391F (Graphite), #574C24 (Jungle King), #345D62 (Arctic Nights). It mixes black, brown, green, turquoise tones and feels cool overall. The strongest text pairing is #00180A on #345D62 with a contrast ratio of 2.54:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jedi Night	rgb(0, 24, 10)	hsl(145, 100%, 5%)
Secret Passage	rgb(43, 38, 3)	hsl(53, 87%, 9%)
Graphite	rgb(47, 57, 31)	hsl(83, 30%, 17%)
Jungle King	rgb(87, 76, 36)	hsl(47, 41%, 24%)
Arctic Nights	rgb(52, 93, 98)	hsl(187, 31%, 29%)

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 Arctic Nights — https://swatchly.xyz/palette/00180a-2b2603-2f391f-574c24-345d62 */
:root {
  --jedi-night: #00180a;
  --secret-passage: #2b2603;
  --graphite: #2f391f;
  --jungle-king: #574c24;
  --arctic-nights: #345d62;
}

Tailwind CSS v4

/* Jedi Night to Arctic Nights — https://swatchly.xyz/palette/00180a-2b2603-2f391f-574c24-345d62 */
@theme {
  --color-jedi-night: #00180a;
  --color-jedi-night-50: #e9faef;
  --color-jedi-night-100: #ddf1e4;
  --color-jedi-night-200: #c7decf;
  --color-jedi-night-300: #aec9b7;
  --color-jedi-night-400: #8daa97;
  --color-jedi-night-500: #6e8c79;
  --color-jedi-night-600: #526e5c;
  --color-jedi-night-700: #3c5445;
  --color-jedi-night-800: #2a3e31;
  --color-jedi-night-900: #1b2c21;
  --color-jedi-night-950: #00180a;
  --color-secret-passage: #2b2603;
  --color-secret-passage-50: #f9f6e1;
  --color-secret-passage-100: #efecd4;
  --color-secret-passage-200: #dcd9bc;
  --color-secret-passage-300: #c7c2a2;
  --color-secret-passage-400: #a8a37f;
  --color-secret-passage-500: #8e8965;
  --color-secret-passage-600: #74704d;
  --color-secret-passage-700: #5f5a3a;
  --color-secret-passage-800: #4c482b;
  --color-secret-passage-900: #3d3920;
  --color-secret-passage-950: #2b2603;
  --color-graphite: #2f391f;
  --color-graphite-50: #f1f8e7;
  --color-graphite-100: #e6efdb;
  --color-graphite-200: #d2dcc4;
  --color-graphite-300: #bbc6ab;
  --color-graphite-400: #9ba78a;
  --color-graphite-500: #808c6f;
  --color-graphite-600: #667256;
  --color-graphite-700: #515b42;
  --color-graphite-800: #3f4832;
  --color-graphite-900: #2f391f;
  --color-graphite-950: #1e2315;
  --color-jungle-king: #574c24;
  --color-jungle-king-50: #fcf5dd;
  --color-jungle-king-100: #f3ebd0;
  --color-jungle-king-200: #dfd6b5;
  --color-jungle-king-300: #c8be98;
  --color-jungle-king-400: #a89d74;
  --color-jungle-king-500: #8b8056;
  --color-jungle-king-600: #6f643d;
  --color-jungle-king-700: #574c24;
  --color-jungle-king-800: #433b1d;
  --color-jungle-king-900: #342d14;
  --color-jungle-king-950: #201b09;
  --color-arctic-nights: #345d62;
  --color-arctic-nights-50: #e2fbfe;
  --color-arctic-nights-100: #d6f1f5;
  --color-arctic-nights-200: #bedfe3;
  --color-arctic-nights-300: #a4c9cd;
  --color-arctic-nights-400: #81aaaf;
  --color-arctic-nights-500: #658f94;
  --color-arctic-nights-600: #4b7479;
  --color-arctic-nights-700: #345d62;
  --color-arctic-nights-800: #28494d;
  --color-arctic-nights-900: #1c383b;
  --color-arctic-nights-950: #0f2325;
}