Meteorite to Midnight Velvet color palette

493969Meteorite 9481E6Perrywinkle 7F52D9Candy Grape Fizz C5B3FFViolet Heaven 312049Midnight Velvet

About this palette

Meteorite to Midnight Velvet is a 5-color cool, monochromatic palette: #493969 (Meteorite), #9481E6 (Perrywinkle), #7F52D9 (Candy Grape Fizz), #C5B3FF (Violet Heaven), #312049 (Midnight Velvet). It mixes purple tones and feels cool overall. The strongest text pairing is #C5B3FF on #312049 with a contrast ratio of 7.86:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Meteorite	rgb(73, 57, 105)	hsl(260, 30%, 32%)
Perrywinkle	rgb(148, 129, 230)	hsl(251, 67%, 70%)
Candy Grape Fizz	rgb(127, 82, 217)	hsl(260, 64%, 59%)
Violet Heaven	rgb(197, 179, 255)	hsl(254, 100%, 85%)
Midnight Velvet	rgb(49, 32, 73)	hsl(265, 39%, 21%)

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.86:1 Very good#C5B3FF on #312049
Aa7.86:1 Very good#312049 on #C5B3FF
Aa5.44:1 Good#493969 on #C5B3FF
Aa5.44:1 Good#C5B3FF on #493969
Aa4.56:1 Good#9481E6 on #312049
Aa4.56:1 Good#312049 on #9481E6
Aa3.16:1 Poor#493969 on #9481E6
Aa3.16:1 Poor#9481E6 on #493969

Color blindness preview

CSS variables

/* Meteorite to Midnight Velvet — https://swatchly.xyz/palette/493969-9481e6-7f52d9-c5b3ff-312049 */
:root {
  --meteorite: #493969;
  --perrywinkle: #9481e6;
  --candy-grape-fizz: #7f52d9;
  --violet-heaven: #c5b3ff;
  --midnight-velvet: #312049;
}

Tailwind CSS v4

/* Meteorite to Midnight Velvet — https://swatchly.xyz/palette/493969-9481e6-7f52d9-c5b3ff-312049 */
@theme {
  --color-meteorite: #493969;
  --color-meteorite-50: #f6f3ff;
  --color-meteorite-100: #ede7ff;
  --color-meteorite-200: #dcd0fb;
  --color-meteorite-300: #c6b8e9;
  --color-meteorite-400: #a798cd;
  --color-meteorite-500: #8c7cb2;
  --color-meteorite-600: #726295;
  --color-meteorite-700: #5b4d7b;
  --color-meteorite-800: #493969;
  --color-meteorite-900: #382c4f;
  --color-meteorite-950: #231b33;
  --color-perrywinkle: #9481e6;
  --color-perrywinkle-50: #f7f6ff;
  --color-perrywinkle-100: #efeeff;
  --color-perrywinkle-200: #dedaff;
  --color-perrywinkle-300: #c9c1ff;
  --color-perrywinkle-400: #ad9dfc;
  --color-perrywinkle-500: #9481e6;
  --color-perrywinkle-600: #7863c5;
  --color-perrywinkle-700: #5f4ba5;
  --color-perrywinkle-800: #4a3787;
  --color-perrywinkle-900: #38276b;
  --color-perrywinkle-950: #221646;
  --color-candy-grape-fizz: #7f52d9;
  --color-candy-grape-fizz-50: #f5f3ff;
  --color-candy-grape-fizz-100: #ede9ff;
  --color-candy-grape-fizz-200: #dcd4ff;
  --color-candy-grape-fizz-300: #c9b9ff;
  --color-candy-grape-fizz-400: #af91ff;
  --color-candy-grape-fizz-500: #986ef6;
  --color-candy-grape-fizz-600: #7f52d9;
  --color-candy-grape-fizz-700: #673ab7;
  --color-candy-grape-fizz-800: #512797;
  --color-candy-grape-fizz-900: #3f197a;
  --color-candy-grape-fizz-950: #280b52;
  --color-violet-heaven: #c5b3ff;
  --color-violet-heaven-50: #f5f3ff;
  --color-violet-heaven-100: #ece7ff;
  --color-violet-heaven-200: #dacfff;
  --color-violet-heaven-300: #c5b3ff;
  --color-violet-heaven-400: #a594db;
  --color-violet-heaven-500: #8a78c0;
  --color-violet-heaven-600: #705ea2;
  --color-violet-heaven-700: #594986;
  --color-violet-heaven-800: #46376d;
  --color-violet-heaven-900: #362957;
  --color-violet-heaven-950: #221839;
  --color-midnight-velvet: #312049;
  --color-midnight-velvet-50: #f7f3ff;
  --color-midnight-velvet-100: #efe6ff;
  --color-midnight-velvet-200: #ddd0f7;
  --color-midnight-velvet-300: #c7b8e4;
  --color-midnight-velvet-400: #a796c6;
  --color-midnight-velvet-500: #8a79a9;
  --color-midnight-velvet-600: #6e5d8a;
  --color-midnight-velvet-700: #55466e;
  --color-midnight-velvet-800: #403355;
  --color-midnight-velvet-900: #312049;
  --color-midnight-velvet-950: #1c1427;
}