Mosque to Fake Jade color palette

005E58Mosque 008273Emerald Whispers 00A59ESilken Jade 00C8B6Pristine Oceanic 38EDD1Fake Jade

About this palette

Mosque to Fake Jade is a 5-color cool, monochromatic, gradient palette: #005E58 (Mosque), #008273 (Emerald Whispers), #00A59E (Silken Jade), #00C8B6 (Pristine Oceanic), #38EDD1 (Fake Jade). It mixes turquoise tones and feels cool overall. The strongest text pairing is #005E58 on #38EDD1 with a contrast ratio of 5.18:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mosque	rgb(0, 94, 88)	hsl(176, 100%, 18%)
Emerald Whispers	rgb(0, 130, 115)	hsl(173, 100%, 25%)
Silken Jade	rgb(0, 165, 158)	hsl(177, 100%, 32%)
Pristine Oceanic	rgb(0, 200, 182)	hsl(175, 100%, 39%)
Fake Jade	rgb(56, 237, 209)	hsl(171, 83%, 57%)

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.

Aa5.18:1 Good#005E58 on #38EDD1
Aa5.18:1 Good#38EDD1 on #005E58
Aa3.62:1 Poor#005E58 on #00C8B6
Aa3.62:1 Poor#00C8B6 on #005E58
Aa3.20:1 Poor#008273 on #38EDD1
Aa3.20:1 Poor#38EDD1 on #008273

Color blindness preview

CSS variables

/* Mosque to Fake Jade — https://swatchly.xyz/palette/005e58-008273-00a59e-00c8b6-38edd1 */
:root {
  --mosque: #005e58;
  --emerald-whispers: #008273;
  --silken-jade: #00a59e;
  --pristine-oceanic: #00c8b6;
  --fake-jade: #38edd1;
}

Tailwind CSS v4

/* Mosque to Fake Jade — https://swatchly.xyz/palette/005e58-008273-00a59e-00c8b6-38edd1 */
@theme {
  --color-mosque: #005e58;
  --color-mosque-50: #d7fffa;
  --color-mosque-100: #c9f6f0;
  --color-mosque-200: #ade3dd;
  --color-mosque-300: #8ecdc6;
  --color-mosque-400: #67aea7;
  --color-mosque-500: #47928b;
  --color-mosque-600: #2a766f;
  --color-mosque-700: #005e58;
  --color-mosque-800: #044944;
  --color-mosque-900: #003935;
  --color-mosque-950: #002321;
  --color-emerald-whispers: #008273;
  --color-emerald-whispers-50: #d8fff7;
  --color-emerald-whispers-100: #c0faee;
  --color-emerald-whispers-200: #a4e9dc;
  --color-emerald-whispers-300: #84d5c6;
  --color-emerald-whispers-400: #59b8a8;
  --color-emerald-whispers-500: #349d8d;
  --color-emerald-whispers-600: #008273;
  --color-emerald-whispers-700: #00675b;
  --color-emerald-whispers-800: #005147;
  --color-emerald-whispers-900: #003e36;
  --color-emerald-whispers-950: #002722;
  --color-silken-jade: #00a59e;
  --color-silken-jade-50: #ddfffc;
  --color-silken-jade-100: #bbfef8;
  --color-silken-jade-200: #9deee8;
  --color-silken-jade-300: #7adbd4;
  --color-silken-jade-400: #48bfb8;
  --color-silken-jade-500: #00a59e;
  --color-silken-jade-600: #00857f;
  --color-silken-jade-700: #006965;
  --color-silken-jade-800: #00524e;
  --color-silken-jade-900: #003f3c;
  --color-silken-jade-950: #002725;
  --color-pristine-oceanic: #00c8b6;
  --color-pristine-oceanic-50: #e9fffb;
  --color-pristine-oceanic-100: #c7fff5;
  --color-pristine-oceanic-200: #97f4e6;
  --color-pristine-oceanic-300: #70e2d2;
  --color-pristine-oceanic-400: #00c8b6;
  --color-pristine-oceanic-500: #00a697;
  --color-pristine-oceanic-600: #008579;
  --color-pristine-oceanic-700: #00695f;
  --color-pristine-oceanic-800: #00524a;
  --color-pristine-oceanic-900: #003e37;
  --color-pristine-oceanic-950: #002621;
  --color-fake-jade: #38edd1;
  --color-fake-jade-50: #bdfff0;
  --color-fake-jade-100: #98f9e5;
  --color-fake-jade-200: #38edd1;
  --color-fake-jade-300: #3fd4bc;
  --color-fake-jade-400: #00b59e;
  --color-fake-jade-500: #009784;
  --color-fake-jade-600: #007b6b;
  --color-fake-jade-700: #006255;
  --color-fake-jade-800: #004e43;
  --color-fake-jade-900: #003c34;
  --color-fake-jade-950: #002620;
}