Jedi Night to June Ivy Color Palette

About this palette

Jedi Night to June Ivy is a 5-color dark, cool, earthy palette: #001614 (Jedi Night), #754000 (Hazelnut Chocolate), #13290F (Lindworm Green), #144026 (Queen of Trees), #486450 (June Ivy). It mixes black, brown, green tones and feels cool overall. The strongest text pairing is #001614 on #486450 with a contrast ratio of 2.86:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jedi Night	rgb(0, 22, 20)	hsl(175, 100%, 4%)
Hazelnut Chocolate	rgb(117, 64, 0)	hsl(33, 100%, 23%)
Lindworm Green	rgb(19, 41, 15)	hsl(111, 46%, 11%)
Queen of Trees	rgb(20, 64, 38)	hsl(145, 52%, 16%)
June Ivy	rgb(72, 100, 80)	hsl(137, 16%, 34%)

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 June Ivy — https://swatchly.xyz/palette/001614-754000-13290f-144026-486450 */
:root {
  --jedi-night: #001614;
  --hazelnut-chocolate: #754000;
  --lindworm-green: #13290f;
  --queen-of-trees: #144026;
  --june-ivy: #486450;
}

Tailwind CSS v4

/* Jedi Night to June Ivy — https://swatchly.xyz/palette/001614-754000-13290f-144026-486450 */
@theme {
  --color-jedi-night: #001614;
  --color-jedi-night-50: #e9f9f7;
  --color-jedi-night-100: #def0ed;
  --color-jedi-night-200: #c7ddda;
  --color-jedi-night-300: #aec7c4;
  --color-jedi-night-400: #8da8a5;
  --color-jedi-night-500: #6e8a86;
  --color-jedi-night-600: #526c69;
  --color-jedi-night-700: #3c5250;
  --color-jedi-night-800: #293c3a;
  --color-jedi-night-900: #1b2a28;
  --color-jedi-night-950: #001614;
  --color-hazelnut-chocolate: #754000;
  --color-hazelnut-chocolate-50: #fff3e9;
  --color-hazelnut-chocolate-100: #ffe6d2;
  --color-hazelnut-chocolate-200: #fbcca5;
  --color-hazelnut-chocolate-300: #e7b286;
  --color-hazelnut-chocolate-400: #ca905e;
  --color-hazelnut-chocolate-500: #ac733f;
  --color-hazelnut-chocolate-600: #8e5825;
  --color-hazelnut-chocolate-700: #754000;
  --color-hazelnut-chocolate-800: #5b3204;
  --color-hazelnut-chocolate-900: #482500;
  --color-hazelnut-chocolate-950: #2e1600;
  --color-lindworm-green: #13290f;
  --color-lindworm-green-50: #ebfbe8;
  --color-lindworm-green-100: #e0f1dc;
  --color-lindworm-green-200: #cadfc6;
  --color-lindworm-green-300: #b1c9ad;
  --color-lindworm-green-400: #90aa8c;
  --color-lindworm-green-500: #768f71;
  --color-lindworm-green-600: #5d7558;
  --color-lindworm-green-700: #485f44;
  --color-lindworm-green-800: #374b34;
  --color-lindworm-green-900: #2a3b27;
  --color-lindworm-green-950: #13290f;
  --color-queen-of-trees: #144026;
  --color-queen-of-trees-50: #e3fdea;
  --color-queen-of-trees-100: #d7f4df;
  --color-queen-of-trees-200: #bfe2c9;
  --color-queen-of-trees-300: #a5ccb1;
  --color-queen-of-trees-400: #83ae90;
  --color-queen-of-trees-500: #679475;
  --color-queen-of-trees-600: #4e795c;
  --color-queen-of-trees-700: #3a6248;
  --color-queen-of-trees-800: #2b4e37;
  --color-queen-of-trees-900: #144026;
  --color-queen-of-trees-950: #112719;
  --color-june-ivy: #486450;
  --color-june-ivy-50: #e9faed;
  --color-june-ivy-100: #def1e2;
  --color-june-ivy-200: #c9e0cf;
  --color-june-ivy-300: #b1cbb8;
  --color-june-ivy-400: #91ae99;
  --color-june-ivy-500: #76947e;
  --color-june-ivy-600: #5d7a65;
  --color-june-ivy-700: #486450;
  --color-june-ivy-800: #374e3e;
  --color-june-ivy-900: #293d2e;
  --color-june-ivy-950: #18261c;
}