Elite Teal to Jovial Jade Color Palette

About this palette

Elite Teal to Jovial Jade is a 4-color cool, gradient palette: #00353B (Elite Teal), #00605A (Mosque), #57AE7D (Jubilant Jade), #8BD9AA (Jovial Jade). It mixes turquoise, green tones and feels cool overall. The strongest text pairing is #00353B on #8BD9AA with a contrast ratio of 8.02:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Elite Teal	rgb(0, 53, 59)	hsl(186, 100%, 12%)
Mosque	rgb(0, 96, 90)	hsl(176, 100%, 19%)
Jubilant Jade	rgb(87, 174, 125)	hsl(146, 35%, 51%)
Jovial Jade	rgb(139, 217, 170)	hsl(144, 51%, 70%)

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.

Aa8.02:1 Very good#00353B on #8BD9AA
Aa8.02:1 Very good#8BD9AA on #00353B
Aa4.93:1 Good#00353B on #57AE7D
Aa4.93:1 Good#57AE7D on #00353B
Aa4.47:1 Poor#00605A on #8BD9AA
Aa4.47:1 Poor#8BD9AA on #00605A

Color blindness preview

CSS variables

/* Elite Teal to Jovial Jade — https://swatchly.xyz/palette/00353b-00605a-57ae7d-8bd9aa */
:root {
  --elite-teal: #00353b;
  --mosque: #00605a;
  --jubilant-jade: #57ae7d;
  --jovial-jade: #8bd9aa;
}

Tailwind CSS v4

/* Elite Teal to Jovial Jade — https://swatchly.xyz/palette/00353b-00605a-57ae7d-8bd9aa */
@theme {
  --color-elite-teal: #00353b;
  --color-elite-teal-50: #e0fbff;
  --color-elite-teal-100: #d4f2f6;
  --color-elite-teal-200: #bbdfe4;
  --color-elite-teal-300: #a1cacf;
  --color-elite-teal-400: #7caab0;
  --color-elite-teal-500: #5f8d94;
  --color-elite-teal-600: #447278;
  --color-elite-teal-700: #30595f;
  --color-elite-teal-800: #214449;
  --color-elite-teal-900: #00353b;
  --color-elite-teal-950: #0a1f22;
  --color-mosque: #00605a;
  --color-mosque-50: #d6fffa;
  --color-mosque-100: #c8f6f1;
  --color-mosque-200: #ade4dd;
  --color-mosque-300: #8ecec7;
  --color-mosque-400: #67afa8;
  --color-mosque-500: #47938c;
  --color-mosque-600: #2a7771;
  --color-mosque-700: #00605a;
  --color-mosque-800: #034b46;
  --color-mosque-900: #003a36;
  --color-mosque-950: #002421;
  --color-jubilant-jade: #57ae7d;
  --color-jubilant-jade-50: #d2ffe2;
  --color-jubilant-jade-100: #bff6d4;
  --color-jubilant-jade-200: #a2e3bb;
  --color-jubilant-jade-300: #82cda0;
  --color-jubilant-jade-400: #57ae7d;
  --color-jubilant-jade-500: #3b9364;
  --color-jubilant-jade-600: #1e794c;
  --color-jubilant-jade-700: #04623a;
  --color-jubilant-jade-800: #004d2c;
  --color-jubilant-jade-900: #003d21;
  --color-jubilant-jade-950: #002714;
  --color-jovial-jade: #8bd9aa;
  --color-jovial-jade-50: #e4ffed;
  --color-jovial-jade-100: #cdfbdd;
  --color-jovial-jade-200: #b3eac7;
  --color-jovial-jade-300: #8bd9aa;
  --color-jovial-jade-400: #6eb78c;
  --color-jovial-jade-500: #4e9b6f;
  --color-jovial-jade-600: #317f55;
  --color-jovial-jade-700: #1b6640;
  --color-jovial-jade-800: #0a502f;
  --color-jovial-jade-900: #013e22;
  --color-jovial-jade-950: #002714;
}