Mosque to Frozen Turquoise Color Palette

About this palette

Mosque to Frozen Turquoise is a 5-color cool palette: #005C5D (Mosque), #00B6C3 (Glassmith), #C7445E (Saffron Desires), #460D0F (English Breakfast), #68F4FF (Frozen Turquoise). It mixes turquoise, red, brown tones and feels cool overall. The strongest text pairing is #460D0F on #68F4FF with a contrast ratio of 12.06:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mosque	rgb(0, 92, 93)	hsl(181, 100%, 18%)
Glassmith	rgb(0, 182, 195)	hsl(184, 100%, 38%)
Saffron Desires	rgb(199, 68, 94)	hsl(348, 54%, 52%)
English Breakfast	rgb(70, 13, 15)	hsl(358, 69%, 16%)
Frozen Turquoise	rgb(104, 244, 255)	hsl(184, 100%, 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.

Aa12.06:1 Super#460D0F on #68F4FF
Aa12.06:1 Super#68F4FF on #460D0F
Aa6.40:1 Good#00B6C3 on #460D0F
Aa6.40:1 Good#460D0F on #00B6C3
Aa5.94:1 Good#005C5D on #68F4FF
Aa5.94:1 Good#68F4FF on #005C5D
Aa3.62:1 Poor#C7445E on #68F4FF
Aa3.62:1 Poor#68F4FF on #C7445E

Color blindness preview

CSS variables

/* Mosque to Frozen Turquoise — https://swatchly.xyz/palette/005c5d-00b6c3-c7445e-460d0f-68f4ff */
:root {
  --mosque: #005c5d;
  --glassmith: #00b6c3;
  --saffron-desires: #c7445e;
  --english-breakfast: #460d0f;
  --frozen-turquoise: #68f4ff;
}

Tailwind CSS v4

/* Mosque to Frozen Turquoise — https://swatchly.xyz/palette/005c5d-00b6c3-c7445e-460d0f-68f4ff */
@theme {
  --color-mosque: #005c5d;
  --color-mosque-50: #d7fefe;
  --color-mosque-100: #c9f5f5;
  --color-mosque-200: #ade2e2;
  --color-mosque-300: #8ecccc;
  --color-mosque-400: #66acad;
  --color-mosque-500: #469091;
  --color-mosque-600: #2a7474;
  --color-mosque-700: #005c5d;
  --color-mosque-800: #054848;
  --color-mosque-900: #003738;
  --color-mosque-950: #002323;
  --color-glassmith: #00b6c3;
  --color-glassmith-50: #dcfcff;
  --color-glassmith-100: #b7f8ff;
  --color-glassmith-200: #8be9f2;
  --color-glassmith-300: #63d4df;
  --color-glassmith-400: #00b6c3;
  --color-glassmith-500: #0097a2;
  --color-glassmith-600: #007a83;
  --color-glassmith-700: #006168;
  --color-glassmith-800: #004c52;
  --color-glassmith-900: #003b3f;
  --color-glassmith-950: #002528;
  --color-saffron-desires: #c7445e;
  --color-saffron-desires-50: #ffeeef;
  --color-saffron-desires-100: #ffdcdf;
  --color-saffron-desires-200: #ffbcc2;
  --color-saffron-desires-300: #ff93a1;
  --color-saffron-desires-400: #e8657b;
  --color-saffron-desires-500: #c7445e;
  --color-saffron-desires-600: #a82c48;
  --color-saffron-desires-700: #8b1937;
  --color-saffron-desires-800: #720a29;
  --color-saffron-desires-900: #5c031e;
  --color-saffron-desires-950: #3e0011;
  --color-english-breakfast: #460d0f;
  --color-english-breakfast-50: #fff2f0;
  --color-english-breakfast-100: #ffe4e2;
  --color-english-breakfast-200: #ffc8c4;
  --color-english-breakfast-300: #edafaa;
  --color-english-breakfast-400: #d08d89;
  --color-english-breakfast-500: #b6726e;
  --color-english-breakfast-600: #995a56;
  --color-english-breakfast-700: #804543;
  --color-english-breakfast-800: #693533;
  --color-english-breakfast-900: #552927;
  --color-english-breakfast-950: #460d0f;
  --color-frozen-turquoise: #68f4ff;
  --color-frozen-turquoise-50: #e8fdff;
  --color-frozen-turquoise-100: #c6fbff;
  --color-frozen-turquoise-200: #68f4ff;
  --color-frozen-turquoise-300: #6bd8e1;
  --color-frozen-turquoise-400: #27b9c4;
  --color-frozen-turquoise-500: #009ba4;
  --color-frozen-turquoise-600: #007c84;
  --color-frozen-turquoise-700: #006268;
  --color-frozen-turquoise-800: #004c51;
  --color-frozen-turquoise-900: #003b3f;
  --color-frozen-turquoise-950: #002528;
}