Jovial Jade to Alienated Color Palette

About this palette

Jovial Jade to Alienated is a 5-color cool, monochromatic palette: #8BE4A6 (Jovial Jade), #003019 (Haunted Forest), #009654 (Militant Vegan), #005736 (Moor-Monster), #00C662 (Alienated). It mixes green tones and feels cool overall. The strongest text pairing is #8BE4A6 on #003019 with a contrast ratio of 9.57:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jovial Jade	rgb(139, 228, 166)	hsl(138, 62%, 72%)
Haunted Forest	rgb(0, 48, 25)	hsl(151, 100%, 9%)
Militant Vegan	rgb(0, 150, 84)	hsl(154, 100%, 29%)
Moor-Monster	rgb(0, 87, 54)	hsl(157, 100%, 17%)
Alienated	rgb(0, 198, 98)	hsl(150, 100%, 39%)

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.

Aa9.57:1 Very good#8BE4A6 on #003019
Aa9.57:1 Very good#003019 on #8BE4A6
Aa6.44:1 Good#003019 on #00C662
Aa6.44:1 Good#00C662 on #003019
Aa5.69:1 Good#8BE4A6 on #005736
Aa5.69:1 Good#005736 on #8BE4A6
Aa3.83:1 Poor#005736 on #00C662
Aa3.83:1 Poor#00C662 on #005736

Color blindness preview

CSS variables

/* Jovial Jade to Alienated — https://swatchly.xyz/palette/8be4a6-003019-009654-005736-00c662 */
:root {
  --jovial-jade: #8be4a6;
  --haunted-forest: #003019;
  --militant-vegan: #009654;
  --moor-monster: #005736;
  --alienated: #00c662;
}

Tailwind CSS v4

/* Jovial Jade to Alienated — https://swatchly.xyz/palette/8be4a6-003019-009654-005736-00c662 */
@theme {
  --color-jovial-jade: #8be4a6;
  --color-jovial-jade-50: #c9fdd6;
  --color-jovial-jade-100: #b8f3c8;
  --color-jovial-jade-200: #8be4a6;
  --color-jovial-jade-300: #7fcd96;
  --color-jovial-jade-400: #5ab076;
  --color-jovial-jade-500: #3c965d;
  --color-jovial-jade-600: #207c45;
  --color-jovial-jade-700: #056533;
  --color-jovial-jade-800: #005127;
  --color-jovial-jade-900: #003e1d;
  --color-jovial-jade-950: #002710;
  --color-haunted-forest: #003019;
  --color-haunted-forest-50: #e3fdeb;
  --color-haunted-forest-100: #d6f4e0;
  --color-haunted-forest-200: #bfe2cb;
  --color-haunted-forest-300: #a4ccb2;
  --color-haunted-forest-400: #82ae92;
  --color-haunted-forest-500: #679478;
  --color-haunted-forest-600: #4f7a5f;
  --color-haunted-forest-700: #3b644b;
  --color-haunted-forest-800: #2c513b;
  --color-haunted-forest-900: #21422e;
  --color-haunted-forest-950: #003019;
  --color-militant-vegan: #009654;
  --color-militant-vegan-50: #d8ffe4;
  --color-militant-vegan-100: #b6fbcc;
  --color-militant-vegan-200: #95e9b2;
  --color-militant-vegan-300: #70d395;
  --color-militant-vegan-400: #3eb371;
  --color-militant-vegan-500: #009654;
  --color-militant-vegan-600: #007943;
  --color-militant-vegan-700: #006034;
  --color-militant-vegan-800: #004c28;
  --color-militant-vegan-900: #003b1e;
  --color-militant-vegan-950: #002611;
  --color-moor-monster: #005736;
  --color-moor-monster-50: #ddffeb;
  --color-moor-monster-100: #ccf8de;
  --color-moor-monster-200: #b1e6c8;
  --color-moor-monster-300: #96d2b0;
  --color-moor-monster-400: #71b590;
  --color-moor-monster-500: #549b76;
  --color-moor-monster-600: #3a805d;
  --color-moor-monster-700: #256949;
  --color-moor-monster-800: #005736;
  --color-moor-monster-900: #0a432a;
  --color-moor-monster-950: #022b19;
  --color-alienated: #00c662;
  --color-alienated-50: #e4ffe9;
  --color-alienated-100: #c2ffd0;
  --color-alienated-200: #90f5ab;
  --color-alienated-300: #68e28d;
  --color-alienated-400: #00c662;
  --color-alienated-500: #00a550;
  --color-alienated-600: #00853f;
  --color-alienated-700: #006931;
  --color-alienated-800: #005225;
  --color-alienated-900: #003f1b;
  --color-alienated-950: #00270e;
}