Scampi to Enchanted Lilac Color Palette

About this palette

Scampi to Enchanted Lilac is a 5-color cool, monochromatic palette: #6E5FA2 (Scampi), #1D1727 (Violet Void), #4B3D76 (Meteorite), #D1BCF2 (Beefy Pink), #A793CA (Enchanted Lilac). It mixes purple, black tones and feels cool overall. The strongest text pairing is #1D1727 on #D1BCF2 with a contrast ratio of 10.12:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Scampi	rgb(110, 95, 162)	hsl(253, 26%, 50%)
Violet Void	rgb(29, 23, 39)	hsl(262, 26%, 12%)
Meteorite	rgb(75, 61, 118)	hsl(255, 32%, 35%)
Beefy Pink	rgb(209, 188, 242)	hsl(263, 67%, 84%)
Enchanted Lilac	rgb(167, 147, 202)	hsl(262, 34%, 68%)

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.12:1 Very good#1D1727 on #D1BCF2
Aa10.12:1 Very good#D1BCF2 on #1D1727
Aa6.37:1 Good#1D1727 on #A793CA
Aa6.37:1 Good#A793CA on #1D1727
Aa5.47:1 Good#4B3D76 on #D1BCF2
Aa5.47:1 Good#D1BCF2 on #4B3D76
Aa3.44:1 Poor#4B3D76 on #A793CA
Aa3.44:1 Poor#A793CA on #4B3D76

Color blindness preview

CSS variables

/* Scampi to Enchanted Lilac — https://swatchly.xyz/palette/6e5fa2-1d1727-4b3d76-d1bcf2-a793ca */
:root {
  --scampi: #6e5fa2;
  --violet-void: #1d1727;
  --meteorite: #4b3d76;
  --beefy-pink: #d1bcf2;
  --enchanted-lilac: #a793ca;
}

Tailwind CSS v4

/* Scampi to Enchanted Lilac — https://swatchly.xyz/palette/6e5fa2-1d1727-4b3d76-d1bcf2-a793ca */
@theme {
  --color-scampi: #6e5fa2;
  --color-scampi-50: #f5f3ff;
  --color-scampi-100: #ebe8ff;
  --color-scampi-200: #d8d0ff;
  --color-scampi-300: #c2b7f6;
  --color-scampi-400: #a396da;
  --color-scampi-500: #887abf;
  --color-scampi-600: #6e5fa2;
  --color-scampi-700: #574a85;
  --color-scampi-800: #44386c;
  --color-scampi-900: #352a56;
  --color-scampi-950: #211938;
  --color-violet-void: #1d1727;
  --color-violet-void-50: #f7f3ff;
  --color-violet-void-100: #ede8f7;
  --color-violet-void-200: #dad4e5;
  --color-violet-void-300: #c4bdd0;
  --color-violet-void-400: #a49db2;
  --color-violet-void-500: #888196;
  --color-violet-void-600: #6d6679;
  --color-violet-void-700: #554f60;
  --color-violet-void-800: #413c4b;
  --color-violet-void-900: #302c38;
  --color-violet-void-950: #1d1727;
  --color-meteorite: #4b3d76;
  --color-meteorite-50: #f5f3ff;
  --color-meteorite-100: #ebe8ff;
  --color-meteorite-200: #d8d0ff;
  --color-meteorite-300: #c3b9f2;
  --color-meteorite-400: #a699d7;
  --color-meteorite-500: #8c7fbd;
  --color-meteorite-600: #7265a1;
  --color-meteorite-700: #5d5088;
  --color-meteorite-800: #4b3d76;
  --color-meteorite-900: #392f5a;
  --color-meteorite-950: #241d3c;
  --color-beefy-pink: #d1bcf2;
  --color-beefy-pink-50: #faf7ff;
  --color-beefy-pink-100: #f3ecff;
  --color-beefy-pink-200: #e4d5fc;
  --color-beefy-pink-300: #d1bcf2;
  --color-beefy-pink-400: #b09cce;
  --color-beefy-pink-500: #937fb1;
  --color-beefy-pink-600: #776494;
  --color-beefy-pink-700: #5f4d79;
  --color-beefy-pink-800: #4a3a60;
  --color-beefy-pink-900: #392b4b;
  --color-beefy-pink-950: #231a31;
  --color-enchanted-lilac: #a793ca;
  --color-enchanted-lilac-50: #f6f1ff;
  --color-enchanted-lilac-100: #ede4ff;
  --color-enchanted-lilac-200: #dccdf8;
  --color-enchanted-lilac-300: #c6b4e6;
  --color-enchanted-lilac-400: #a793ca;
  --color-enchanted-lilac-500: #8c78ae;
  --color-enchanted-lilac-600: #725f91;
  --color-enchanted-lilac-700: #5b4a77;
  --color-enchanted-lilac-800: #483860;
  --color-enchanted-lilac-900: #382b4c;
  --color-enchanted-lilac-950: #231a32;
}