Amethyst to Mosque Color Palette

About this palette

Amethyst to Mosque is a 5-color cool palette: #9A67C4 (Amethyst), #D5B0FF (Mauve), #482E00 (Moelleux au Chocolat), #FFF7EF (Fatback), #005E5D (Mosque). It mixes purple, brown, white, turquoise tones and feels cool overall. The strongest text pairing is #482E00 on #FFF7EF with a contrast ratio of 11.88:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Amethyst	rgb(154, 103, 196)	hsl(273, 44%, 59%)
Mauve	rgb(213, 176, 255)	hsl(268, 100%, 85%)
Moelleux au Chocolat	rgb(72, 46, 0)	hsl(38, 100%, 14%)
Fatback	rgb(255, 247, 239)	hsl(30, 100%, 97%)
Mosque	rgb(0, 94, 93)	hsl(179, 100%, 18%)

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.

Aa11.88:1 Very good#482E00 on #FFF7EF
Aa11.88:1 Very good#FFF7EF on #482E00
Aa7.18:1 Very good#FFF7EF on #005E5D
Aa7.18:1 Very good#005E5D on #FFF7EF
Aa6.89:1 Good#D5B0FF on #482E00
Aa6.89:1 Good#482E00 on #D5B0FF
Aa4.16:1 Poor#D5B0FF on #005E5D
Aa4.16:1 Poor#005E5D on #D5B0FF

Color blindness preview

CSS variables

/* Amethyst to Mosque — https://swatchly.xyz/palette/9a67c4-d5b0ff-482e00-fff7ef-005e5d */
:root {
  --amethyst: #9a67c4;
  --mauve: #d5b0ff;
  --moelleux-au-chocolat: #482e00;
  --fatback: #fff7ef;
  --mosque: #005e5d;
}

Tailwind CSS v4

/* Amethyst to Mosque — https://swatchly.xyz/palette/9a67c4-d5b0ff-482e00-fff7ef-005e5d */
@theme {
  --color-amethyst: #9a67c4;
  --color-amethyst-50: #f8f1ff;
  --color-amethyst-100: #f1e3ff;
  --color-amethyst-200: #e4c7ff;
  --color-amethyst-300: #d4a8fc;
  --color-amethyst-400: #b684e1;
  --color-amethyst-500: #9a67c4;
  --color-amethyst-600: #7f4ea6;
  --color-amethyst-700: #673a8a;
  --color-amethyst-800: #522a70;
  --color-amethyst-900: #411e5a;
  --color-amethyst-950: #29103c;
  --color-mauve: #d5b0ff;
  --color-mauve-50: #f9f4ff;
  --color-mauve-100: #f2e8ff;
  --color-mauve-200: #e4ceff;
  --color-mauve-300: #d5b0ff;
  --color-mauve-400: #b491da;
  --color-mauve-500: #9875bf;
  --color-mauve-600: #7d5aa1;
  --color-mauve-700: #644485;
  --color-mauve-800: #4f336b;
  --color-mauve-900: #3d2555;
  --color-mauve-950: #271538;
  --color-moelleux-au-chocolat: #482e00;
  --color-moelleux-au-chocolat-50: #fff3e4;
  --color-moelleux-au-chocolat-100: #fce8cd;
  --color-moelleux-au-chocolat-200: #ecd3b3;
  --color-moelleux-au-chocolat-300: #d7bc97;
  --color-moelleux-au-chocolat-400: #ba9c74;
  --color-moelleux-au-chocolat-500: #9f8157;
  --color-moelleux-au-chocolat-600: #83673e;
  --color-moelleux-au-chocolat-700: #6b512b;
  --color-moelleux-au-chocolat-800: #553f1d;
  --color-moelleux-au-chocolat-900: #482e00;
  --color-moelleux-au-chocolat-950: #2b1d08;
  --color-fatback: #fff7ef;
  --color-fatback-50: #fff7ef;
  --color-fatback-100: #f2ede8;
  --color-fatback-200: #ded9d3;
  --color-fatback-300: #c8c1bb;
  --color-fatback-400: #a8a19a;
  --color-fatback-500: #8c857e;
  --color-fatback-600: #716a64;
  --color-fatback-700: #5a544e;
  --color-fatback-800: #47413c;
  --color-fatback-900: #36322d;
  --color-fatback-950: #221f1b;
  --color-mosque: #005e5d;
  --color-mosque-50: #d7fefd;
  --color-mosque-100: #c9f6f4;
  --color-mosque-200: #ade3e1;
  --color-mosque-300: #8ecdcb;
  --color-mosque-400: #66aeac;
  --color-mosque-500: #479290;
  --color-mosque-600: #2a7674;
  --color-mosque-700: #005e5d;
  --color-mosque-800: #044948;
  --color-mosque-900: #003938;
  --color-mosque-950: #002323;
}