Start generating

Mosque to Innocent Snowdrop color palette

005E5EMosque927FD0Petrified PurpleAAB45FPalm004140Rich Black9F605BCheek RedCFCAFAInnocent Snowdrop
Open in generator Export PNG, PDF, ASE…

About this palette

Mosque to Innocent Snowdrop is a 6-color cool palette: #005E5E (Mosque), #927FD0 (Petrified Purple), #AAB45F (Palm), #004140 (Rich Black), #9F605B (Cheek Red), #CFCAFA (Innocent Snowdrop). It mixes turquoise, purple, green, red tones and feels cool overall. The strongest text pairing is #004140 on #CFCAFA with a contrast ratio of 7.37:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Mosquergb(0, 94, 94)hsl(180, 100%, 18%)
Petrified Purplergb(146, 127, 208)hsl(254, 46%, 66%)
Palmrgb(170, 180, 95)hsl(67, 36%, 54%)
Rich Blackrgb(0, 65, 64)hsl(179, 100%, 13%)
Cheek Redrgb(159, 96, 91)hsl(4, 27%, 49%)
Innocent Snowdroprgb(207, 202, 250)hsl(246, 83%, 89%)

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.

  • Aa7.37:1 Very good#004140 on #CFCAFA
  • Aa7.37:1 Very good#CFCAFA on #004140
  • Aa5.14:1 Good#AAB45F on #004140
  • Aa5.14:1 Good#004140 on #AAB45F
  • Aa4.88:1 Good#005E5E on #CFCAFA
  • Aa4.88:1 Good#CFCAFA on #005E5E
  • Aa3.40:1 Poor#005E5E on #AAB45F
  • Aa3.40:1 Poor#AAB45F on #005E5E

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Mosque to Innocent Snowdrop — https://swatchly.xyz/palette/005e5e-927fd0-aab45f-004140-9f605b-cfcafa */
:root {
  --mosque: #005e5e;
  --petrified-purple: #927fd0;
  --palm: #aab45f;
  --rich-black: #004140;
  --cheek-red: #9f605b;
  --innocent-snowdrop: #cfcafa;
}

Tailwind CSS v4

/* Mosque to Innocent Snowdrop — https://swatchly.xyz/palette/005e5e-927fd0-aab45f-004140-9f605b-cfcafa */
@theme {
  --color-mosque: #005e5e;
  --color-mosque-50: #d7fefd;
  --color-mosque-100: #c9f5f5;
  --color-mosque-200: #ade3e2;
  --color-mosque-300: #8ecdcc;
  --color-mosque-400: #66aead;
  --color-mosque-500: #479291;
  --color-mosque-600: #2a7675;
  --color-mosque-700: #005e5e;
  --color-mosque-800: #044949;
  --color-mosque-900: #003939;
  --color-mosque-950: #002323;
  --color-petrified-purple: #927fd0;
  --color-petrified-purple-50: #f7f5ff;
  --color-petrified-purple-100: #eeebff;
  --color-petrified-purple-200: #ddd5ff;
  --color-petrified-purple-300: #c9bbff;
  --color-petrified-purple-400: #ac9ae9;
  --color-petrified-purple-500: #927fd0;
  --color-petrified-purple-600: #7663b1;
  --color-petrified-purple-700: #5e4c93;
  --color-petrified-purple-800: #4a3977;
  --color-petrified-purple-900: #382a5e;
  --color-petrified-purple-950: #23183e;
  --color-palm: #aab45f;
  --color-palm-50: #f7fed2;
  --color-palm-100: #eff6c6;
  --color-palm-200: #dde5ab;
  --color-palm-300: #c8d18d;
  --color-palm-400: #aab45f;
  --color-palm-500: #8d9642;
  --color-palm-600: #717922;
  --color-palm-700: #596004;
  --color-palm-800: #454a00;
  --color-palm-900: #343800;
  --color-palm-950: #1f2200;
  --color-rich-black: #004140;
  --color-rich-black-50: #defcfb;
  --color-rich-black-100: #d1f3f2;
  --color-rich-black-200: #b8e1df;
  --color-rich-black-300: #9cccca;
  --color-rich-black-400: #79aeac;
  --color-rich-black-500: #5d9492;
  --color-rich-black-600: #447978;
  --color-rich-black-700: #306361;
  --color-rich-black-800: #214f4e;
  --color-rich-black-900: #004140;
  --color-rich-black-950: #0a2828;
  --color-cheek-red: #9f605b;
  --color-cheek-red-50: #fff2f0;
  --color-cheek-red-100: #ffe6e3;
  --color-cheek-red-200: #ffccc7;
  --color-cheek-red-300: #efb5af;
  --color-cheek-red-400: #d4948e;
  --color-cheek-red-500: #ba7974;
  --color-cheek-red-600: #9f605b;
  --color-cheek-red-700: #824945;
  --color-cheek-red-800: #693733;
  --color-cheek-red-900: #532825;
  --color-cheek-red-950: #361715;
  --color-innocent-snowdrop: #cfcafa;
  --color-innocent-snowdrop-50: #f0eeff;
  --color-innocent-snowdrop-100: #e4e1ff;
  --color-innocent-snowdrop-200: #cfcafa;
  --color-innocent-snowdrop-300: #bab6df;
  --color-innocent-snowdrop-400: #9c97c3;
  --color-innocent-snowdrop-500: #827da9;
  --color-innocent-snowdrop-600: #69648d;
  --color-innocent-snowdrop-700: #534f74;
  --color-innocent-snowdrop-800: #423d5e;
  --color-innocent-snowdrop-900: #322e4a;
  --color-innocent-snowdrop-950: #1f1c30;
}

Similar palettes