Black Velvet to Exotic Lilac Color Palette

About this palette

Black Velvet to Exotic Lilac is a 4-color muted palette: #23222E (Black Velvet), #DDD9F0 (Puffy Cloud), #615160 (Pinot Noir), #C997B2 (Exotic Lilac). It mixes gray, pink tones and feels warm overall. The strongest text pairing is #23222E on #DDD9F0 with a contrast ratio of 11.39:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Velvet	rgb(35, 34, 46)	hsl(245, 15%, 16%)
Puffy Cloud	rgb(221, 217, 240)	hsl(250, 43%, 90%)
Pinot Noir	rgb(97, 81, 96)	hsl(304, 9%, 35%)
Exotic Lilac	rgb(201, 151, 178)	hsl(328, 32%, 69%)

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.39:1 Very good#23222E on #DDD9F0
Aa11.39:1 Very good#DDD9F0 on #23222E
Aa6.38:1 Good#23222E on #C997B2
Aa6.38:1 Good#C997B2 on #23222E
Aa5.35:1 Good#DDD9F0 on #615160
Aa5.35:1 Good#615160 on #DDD9F0

Color blindness preview

CSS variables

/* Black Velvet to Exotic Lilac — https://swatchly.xyz/palette/23222e-ddd9f0-615160-c997b2 */
:root {
  --black-velvet: #23222e;
  --puffy-cloud: #ddd9f0;
  --pinot-noir: #615160;
  --exotic-lilac: #c997b2;
}

Tailwind CSS v4

/* Black Velvet to Exotic Lilac — https://swatchly.xyz/palette/23222e-ddd9f0-615160-c997b2 */
@theme {
  --color-black-velvet: #23222e;
  --color-black-velvet-50: #f4f4fd;
  --color-black-velvet-100: #eaeaf4;
  --color-black-velvet-200: #d7d6e2;
  --color-black-velvet-300: #c0bfcd;
  --color-black-velvet-400: #a0a0af;
  --color-black-velvet-500: #868594;
  --color-black-velvet-600: #6d6c7a;
  --color-black-velvet-700: #575663;
  --color-black-velvet-800: #454450;
  --color-black-velvet-900: #36353f;
  --color-black-velvet-950: #23222e;
  --color-puffy-cloud: #ddd9f0;
  --color-puffy-cloud-50: #f9f7ff;
  --color-puffy-cloud-100: #f0edfb;
  --color-puffy-cloud-200: #ddd9f0;
  --color-puffy-cloud-300: #c5c2d5;
  --color-puffy-cloud-400: #a5a1b6;
  --color-puffy-cloud-500: #89859a;
  --color-puffy-cloud-600: #6e6a7e;
  --color-puffy-cloud-700: #565365;
  --color-puffy-cloud-800: #43404f;
  --color-puffy-cloud-900: #33313e;
  --color-puffy-cloud-950: #201e27;
  --color-pinot-noir: #615160;
  --color-pinot-noir-50: #fcf1fb;
  --color-pinot-noir-100: #f3e7f2;
  --color-pinot-noir-200: #e1d3e0;
  --color-pinot-noir-300: #ccbcca;
  --color-pinot-noir-400: #ad9cac;
  --color-pinot-noir-500: #928191;
  --color-pinot-noir-600: #786777;
  --color-pinot-noir-700: #615160;
  --color-pinot-noir-800: #4c3f4b;
  --color-pinot-noir-900: #3b303a;
  --color-pinot-noir-950: #251d24;
  --color-exotic-lilac: #c997b2;
  --color-exotic-lilac-50: #fff4fa;
  --color-exotic-lilac-100: #ffe7f3;
  --color-exotic-lilac-200: #f6d0e4;
  --color-exotic-lilac-300: #e3b8cf;
  --color-exotic-lilac-400: #c997b2;
  --color-exotic-lilac-500: #ab7b95;
  --color-exotic-lilac-600: #8d6079;
  --color-exotic-lilac-700: #734960;
  --color-exotic-lilac-800: #5b374b;
  --color-exotic-lilac-900: #47293a;
  --color-exotic-lilac-950: #2d1723;
}