Holographic Lavender to Muted Berry color palette

F0E5F8Holographic Lavender C7B5CDFog Syringa 6A5C72Plummy 352C39Melanzane 8E7B90Muted Berry

About this palette

Holographic Lavender to Muted Berry is a 5-color muted, cool palette: #F0E5F8 (Holographic Lavender), #C7B5CD (Fog Syringa), #6A5C72 (Plummy), #352C39 (Melanzane), #8E7B90 (Muted Berry). It mixes white, purple, gray, pink tones and feels cool overall. The strongest text pairing is #F0E5F8 on #352C39 with a contrast ratio of 10.99:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Holographic Lavender	rgb(240, 229, 248)	hsl(275, 58%, 94%)
Fog Syringa	rgb(199, 181, 205)	hsl(285, 19%, 76%)
Plummy	rgb(106, 92, 114)	hsl(278, 11%, 40%)
Melanzane	rgb(53, 44, 57)	hsl(282, 13%, 20%)
Muted Berry	rgb(142, 123, 144)	hsl(294, 9%, 52%)

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.

Aa10.99:1 Very good#F0E5F8 on #352C39
Aa10.99:1 Very good#352C39 on #F0E5F8
Aa6.95:1 Good#C7B5CD on #352C39
Aa6.95:1 Good#352C39 on #C7B5CD
Aa5.10:1 Good#F0E5F8 on #6A5C72
Aa5.10:1 Good#6A5C72 on #F0E5F8
Aa3.43:1 Poor#352C39 on #8E7B90
Aa3.43:1 Poor#8E7B90 on #352C39

Color blindness preview

CSS variables

/* Holographic Lavender to Muted Berry — https://swatchly.xyz/palette/f0e5f8-c7b5cd-6a5c72-352c39-8e7b90 */
:root {
  --holographic-lavender: #f0e5f8;
  --fog-syringa: #c7b5cd;
  --plummy: #6a5c72;
  --melanzane: #352c39;
  --muted-berry: #8e7b90;
}

Tailwind CSS v4

/* Holographic Lavender to Muted Berry — https://swatchly.xyz/palette/f0e5f8-c7b5cd-6a5c72-352c39-8e7b90 */
@theme {
  --color-holographic-lavender: #f0e5f8;
  --color-holographic-lavender-50: #f7f1fc;
  --color-holographic-lavender-100: #f0e5f8;
  --color-holographic-lavender-200: #dbd3e1;
  --color-holographic-lavender-300: #c5bccc;
  --color-holographic-lavender-400: #a69cad;
  --color-holographic-lavender-500: #8b8192;
  --color-holographic-lavender-600: #716778;
  --color-holographic-lavender-700: #5a5160;
  --color-holographic-lavender-800: #463f4c;
  --color-holographic-lavender-900: #36303b;
  --color-holographic-lavender-950: #221d25;
  --color-fog-syringa: #c7b5cd;
  --color-fog-syringa-50: #f9eefd;
  --color-fog-syringa-100: #efe3f3;
  --color-fog-syringa-200: #dccee1;
  --color-fog-syringa-300: #c7b5cd;
  --color-fog-syringa-400: #a897ad;
  --color-fog-syringa-500: #8d7c93;
  --color-fog-syringa-600: #736378;
  --color-fog-syringa-700: #5c4e61;
  --color-fog-syringa-800: #493c4d;
  --color-fog-syringa-900: #392e3d;
  --color-fog-syringa-950: #241c26;
  --color-plummy: #6a5c72;
  --color-plummy-50: #faf1ff;
  --color-plummy-100: #efe5f5;
  --color-plummy-200: #dbcfe2;
  --color-plummy-300: #c3b6cb;
  --color-plummy-400: #a394ab;
  --color-plummy-500: #86778e;
  --color-plummy-600: #6a5c72;
  --color-plummy-700: #54485b;
  --color-plummy-800: #423848;
  --color-plummy-900: #332b38;
  --color-plummy-950: #201a24;
  --color-melanzane: #352c39;
  --color-melanzane-50: #f9f2fc;
  --color-melanzane-100: #efe8f3;
  --color-melanzane-200: #dcd4e0;
  --color-melanzane-300: #c7bdcb;
  --color-melanzane-400: #a79cac;
  --color-melanzane-500: #8b8190;
  --color-melanzane-600: #706674;
  --color-melanzane-700: #584f5c;
  --color-melanzane-800: #443c48;
  --color-melanzane-900: #352c39;
  --color-melanzane-950: #201b22;
  --color-muted-berry: #8e7b90;
  --color-muted-berry-50: #fcf0fd;
  --color-muted-berry-100: #f2e5f3;
  --color-muted-berry-200: #dfcfe1;
  --color-muted-berry-300: #c9b7cb;
  --color-muted-berry-400: #aa97ac;
  --color-muted-berry-500: #8e7b90;
  --color-muted-berry-600: #746276;
  --color-muted-berry-700: #5d4d5e;
  --color-muted-berry-800: #493b4b;
  --color-muted-berry-900: #392d3a;
  --color-muted-berry-950: #241b25;
}