Mosque to Tuscan Color Palette

About this palette

Mosque to Tuscan is a 5-color cool, vintage palette: #005C57 (Mosque), #9D7B2E (Fernweh), #E4ABE6 (Candy Floss), #003C39 (Rich Black), #F9D6AA (Tuscan). It mixes turquoise, yellow, pink, orange tones and feels cool overall. The strongest text pairing is #003C39 on #F9D6AA with a contrast ratio of 8.93:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mosque	rgb(0, 92, 87)	hsl(177, 100%, 18%)
Fernweh	rgb(157, 123, 46)	hsl(42, 55%, 40%)
Candy Floss	rgb(228, 171, 230)	hsl(298, 54%, 79%)
Rich Black	rgb(0, 60, 57)	hsl(177, 100%, 12%)
Tuscan	rgb(249, 214, 170)	hsl(33, 87%, 82%)

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.93:1 Very good#003C39 on #F9D6AA
Aa8.93:1 Very good#F9D6AA on #003C39
Aa6.61:1 Good#E4ABE6 on #003C39
Aa6.61:1 Good#003C39 on #E4ABE6
Aa5.71:1 Good#005C57 on #F9D6AA
Aa5.71:1 Good#F9D6AA on #005C57
Aa4.22:1 Poor#005C57 on #E4ABE6
Aa4.22:1 Poor#E4ABE6 on #005C57

Color blindness preview

CSS variables

/* Mosque to Tuscan — https://swatchly.xyz/palette/005c57-9d7b2e-e4abe6-003c39-f9d6aa */
:root {
  --mosque: #005c57;
  --fernweh: #9d7b2e;
  --candy-floss: #e4abe6;
  --rich-black: #003c39;
  --tuscan: #f9d6aa;
}

Tailwind CSS v4

/* Mosque to Tuscan — https://swatchly.xyz/palette/005c57-9d7b2e-e4abe6-003c39-f9d6aa */
@theme {
  --color-mosque: #005c57;
  --color-mosque-50: #d7fffa;
  --color-mosque-100: #c9f6f1;
  --color-mosque-200: #ade3dd;
  --color-mosque-300: #8eccc6;
  --color-mosque-400: #66ada7;
  --color-mosque-500: #47908a;
  --color-mosque-600: #2a746e;
  --color-mosque-700: #005c57;
  --color-mosque-800: #064844;
  --color-mosque-900: #003734;
  --color-mosque-950: #002320;
  --color-fernweh: #9d7b2e;
  --color-fernweh-50: #fff3db;
  --color-fernweh-100: #fde6b8;
  --color-fernweh-200: #ecd19a;
  --color-fernweh-300: #d8b979;
  --color-fernweh-400: #b9984f;
  --color-fernweh-500: #9d7b2e;
  --color-fernweh-600: #82620f;
  --color-fernweh-700: #694d00;
  --color-fernweh-800: #523c00;
  --color-fernweh-900: #402e00;
  --color-fernweh-950: #291c00;
  --color-candy-floss: #e4abe6;
  --color-candy-floss-50: #fff0ff;
  --color-candy-floss-100: #fee1ff;
  --color-candy-floss-200: #f3c8f4;
  --color-candy-floss-300: #e4abe6;
  --color-candy-floss-400: #c28dc4;
  --color-candy-floss-500: #a671a8;
  --color-candy-floss-600: #89578c;
  --color-candy-floss-700: #704272;
  --color-candy-floss-800: #59315b;
  --color-candy-floss-900: #462448;
  --color-candy-floss-950: #2d142e;
  --color-rich-black: #003c39;
  --color-rich-black-50: #dffcf9;
  --color-rich-black-100: #d2f3f0;
  --color-rich-black-200: #bae1dd;
  --color-rich-black-300: #9ecbc7;
  --color-rich-black-400: #7bada8;
  --color-rich-black-500: #5e918d;
  --color-rich-black-600: #447672;
  --color-rich-black-700: #305f5b;
  --color-rich-black-800: #214b48;
  --color-rich-black-900: #003c39;
  --color-rich-black-950: #0a2423;
  --color-tuscan: #f9d6aa;
  --color-tuscan-50: #fff7ed;
  --color-tuscan-100: #ffecd5;
  --color-tuscan-200: #f9d6aa;
  --color-tuscan-300: #dcc09c;
  --color-tuscan-400: #be9f77;
  --color-tuscan-500: #a28259;
  --color-tuscan-600: #86673f;
  --color-tuscan-700: #6c502b;
  --color-tuscan-800: #553d1c;
  --color-tuscan-900: #432e12;
  --color-tuscan-950: #2b1c08;
}