Jovial Jade to Aegean Blue Color Palette

About this palette

Jovial Jade to Aegean Blue is a 5-color cool, earthy palette: #83E2A2 (Jovial Jade), #002B0D (Haunted Forest), #914F8B (Grape Candy), #D67226 (Chocolate), #13456E (Aegean Blue). It mixes green, pink, orange, blue tones and feels cool overall. The strongest text pairing is #83E2A2 on #002B0D with a contrast ratio of 9.89:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jovial Jade	rgb(131, 226, 162)	hsl(140, 62%, 70%)
Haunted Forest	rgb(0, 43, 13)	hsl(138, 100%, 8%)
Grape Candy	rgb(145, 79, 139)	hsl(305, 29%, 44%)
Chocolate	rgb(214, 114, 38)	hsl(26, 70%, 49%)
Aegean Blue	rgb(19, 69, 110)	hsl(207, 71%, 25%)

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.89:1 Very good#83E2A2 on #002B0D
Aa9.89:1 Very good#002B0D on #83E2A2
Aa6.35:1 Good#83E2A2 on #13456E
Aa6.35:1 Good#13456E on #83E2A2
Aa4.66:1 Good#002B0D on #D67226
Aa4.66:1 Good#D67226 on #002B0D
Aa3.62:1 Poor#83E2A2 on #914F8B
Aa3.62:1 Poor#914F8B on #83E2A2

Color blindness preview

CSS variables

/* Jovial Jade to Aegean Blue — https://swatchly.xyz/palette/83e2a2-002b0d-914f8b-d67226-13456e */
:root {
  --jovial-jade: #83e2a2;
  --haunted-forest: #002b0d;
  --grape-candy: #914f8b;
  --chocolate: #d67226;
  --aegean-blue: #13456e;
}

Tailwind CSS v4

/* Jovial Jade to Aegean Blue — https://swatchly.xyz/palette/83e2a2-002b0d-914f8b-d67226-13456e */
@theme {
  --color-jovial-jade: #83e2a2;
  --color-jovial-jade-50: #eefff2;
  --color-jovial-jade-100: #d0ffdd;
  --color-jovial-jade-200: #b1f1c3;
  --color-jovial-jade-300: #83e2a2;
  --color-jovial-jade-400: #67bf84;
  --color-jovial-jade-500: #42a266;
  --color-jovial-jade-600: #1e844b;
  --color-jovial-jade-700: #006a37;
  --color-jovial-jade-800: #005229;
  --color-jovial-jade-900: #003e1e;
  --color-jovial-jade-950: #002710;
  --color-haunted-forest: #002b0d;
  --color-haunted-forest-50: #e4fde7;
  --color-haunted-forest-100: #d8f4dc;
  --color-haunted-forest-200: #c0e2c5;
  --color-haunted-forest-300: #a6ccac;
  --color-haunted-forest-400: #84ae8a;
  --color-haunted-forest-500: #68936f;
  --color-haunted-forest-600: #4f7957;
  --color-haunted-forest-700: #3c6142;
  --color-haunted-forest-800: #2c4e32;
  --color-haunted-forest-900: #203d26;
  --color-haunted-forest-950: #002b0d;
  --color-grape-candy: #914f8b;
  --color-grape-candy-50: #fff0fd;
  --color-grape-candy-100: #ffe0fb;
  --color-grape-candy-200: #fac2f3;
  --color-grape-candy-300: #e7a9e0;
  --color-grape-candy-400: #ca86c2;
  --color-grape-candy-500: #ae6aa7;
  --color-grape-candy-600: #914f8b;
  --color-grape-candy-700: #763b71;
  --color-grape-candy-800: #5f2b5a;
  --color-grape-candy-900: #4b1f47;
  --color-grape-candy-950: #30112e;
  --color-chocolate: #d67226;
  --color-chocolate-50: #fff5ef;
  --color-chocolate-100: #ffeade;
  --color-chocolate-200: #ffd3b8;
  --color-chocolate-300: #ffb587;
  --color-chocolate-400: #ef8f4e;
  --color-chocolate-500: #d67226;
  --color-chocolate-600: #b25700;
  --color-chocolate-700: #8e4400;
  --color-chocolate-800: #703400;
  --color-chocolate-900: #562700;
  --color-chocolate-950: #371600;
  --color-aegean-blue: #13456e;
  --color-aegean-blue-50: #eef6ff;
  --color-aegean-blue-100: #dceeff;
  --color-aegean-blue-200: #b8dcff;
  --color-aegean-blue-300: #9bc6ef;
  --color-aegean-blue-400: #77a6d4;
  --color-aegean-blue-500: #5a8bb8;
  --color-aegean-blue-600: #41709b;
  --color-aegean-blue-700: #2d5980;
  --color-aegean-blue-800: #13456e;
  --color-aegean-blue-900: #143552;
  --color-aegean-blue-950: #092136;
}