Jedi Night to Pine Scented Lagoon Color Palette

About this palette

Jedi Night to Pine Scented Lagoon is a 5-color dark, cool, gradient palette: #00140A (Jedi Night), #24290C (Lindworm Green), #073139 (Elite Teal), #1A5744 (Evergreen), #006D67 (Pine Scented Lagoon). It mixes black, green, turquoise tones and feels cool overall. The strongest text pairing is #00140A on #006D67 with a contrast ratio of 3.06:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jedi Night	rgb(0, 20, 10)	hsl(150, 100%, 4%)
Lindworm Green	rgb(36, 41, 12)	hsl(70, 55%, 10%)
Elite Teal	rgb(7, 49, 57)	hsl(190, 78%, 13%)
Evergreen	rgb(26, 87, 68)	hsl(161, 54%, 22%)
Pine Scented Lagoon	rgb(0, 109, 103)	hsl(177, 100%, 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.

Aa3.06:1 Poor#00140A on #006D67
Aa3.06:1 Poor#006D67 on #00140A

Color blindness preview

CSS variables

/* Jedi Night to Pine Scented Lagoon — https://swatchly.xyz/palette/00140a-24290c-073139-1a5744-006d67 */
:root {
  --jedi-night: #00140a;
  --lindworm-green: #24290c;
  --elite-teal: #073139;
  --evergreen: #1a5744;
  --pine-scented-lagoon: #006d67;
}

Tailwind CSS v4

/* Jedi Night to Pine Scented Lagoon — https://swatchly.xyz/palette/00140a-24290c-073139-1a5744-006d67 */
@theme {
  --color-jedi-night: #00140a;
  --color-jedi-night-50: #eafaf1;
  --color-jedi-night-100: #def0e6;
  --color-jedi-night-200: #c8ddd2;
  --color-jedi-night-300: #b0c8bb;
  --color-jedi-night-400: #8fa99b;
  --color-jedi-night-500: #6f8a7c;
  --color-jedi-night-600: #536c5f;
  --color-jedi-night-700: #3c5146;
  --color-jedi-night-800: #293b32;
  --color-jedi-night-900: #1a2821;
  --color-jedi-night-950: #00140a;
  --color-lindworm-green: #24290c;
  --color-lindworm-green-50: #f3f8e5;
  --color-lindworm-green-100: #e9eed9;
  --color-lindworm-green-200: #d5dbc1;
  --color-lindworm-green-300: #bec5a8;
  --color-lindworm-green-400: #9fa686;
  --color-lindworm-green-500: #858c6c;
  --color-lindworm-green-600: #6c7254;
  --color-lindworm-green-700: #575d40;
  --color-lindworm-green-800: #454b31;
  --color-lindworm-green-900: #373c25;
  --color-lindworm-green-950: #24290c;
  --color-elite-teal: #073139;
  --color-elite-teal-50: #e4faff;
  --color-elite-teal-100: #d7f1f7;
  --color-elite-teal-200: #bfdee5;
  --color-elite-teal-300: #a5c8d0;
  --color-elite-teal-400: #81a8b1;
  --color-elite-teal-500: #638b94;
  --color-elite-teal-600: #496e77;
  --color-elite-teal-700: #34565e;
  --color-elite-teal-800: #244147;
  --color-elite-teal-900: #073139;
  --color-elite-teal-950: #0c1c20;
  --color-evergreen: #1a5744;
  --color-evergreen-50: #ddfef0;
  --color-evergreen-100: #d0f5e6;
  --color-evergreen-200: #b7e3d1;
  --color-evergreen-300: #9dd0bc;
  --color-evergreen-400: #7bb39d;
  --color-evergreen-500: #5f9983;
  --color-evergreen-600: #467f6b;
  --color-evergreen-700: #326956;
  --color-evergreen-800: #1a5744;
  --color-evergreen-900: #174334;
  --color-evergreen-950: #0a2b20;
  --color-pine-scented-lagoon: #006d67;
  --color-pine-scented-lagoon-50: #d6fffa;
  --color-pine-scented-lagoon-100: #c5f7f2;
  --color-pine-scented-lagoon-200: #abe7e1;
  --color-pine-scented-lagoon-300: #8ed4cd;
  --color-pine-scented-lagoon-400: #67b7b0;
  --color-pine-scented-lagoon-500: #479d96;
  --color-pine-scented-lagoon-600: #2a837d;
  --color-pine-scented-lagoon-700: #006d67;
  --color-pine-scented-lagoon-800: #005551;
  --color-pine-scented-lagoon-900: #00423e;
  --color-pine-scented-lagoon-950: #002a27;
}