Black Velvet to Scented Spring color palette

2E202FBlack Velvet 463149Call It a Night 7B5E7FDr Who 9E6D9EDrama Queen CB93C6Pastel Violet F7D2F2Scented Spring

Open in generator Export PNG, PDF, ASE…

About this palette

Black Velvet to Scented Spring is a 6-color cool, monochromatic, gradient palette: #2E202F (Black Velvet), #463149 (Call It a Night), #7B5E7F (Dr Who), #9E6D9E (Drama Queen), #CB93C6 (Pastel Violet), #F7D2F2 (Scented Spring). It mixes gray, purple, pink tones and feels cool overall. The strongest text pairing is #2E202F on #F7D2F2 with a contrast ratio of 11.33:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Velvet	rgb(46, 32, 47)	hsl(296, 19%, 15%)
Call It a Night	rgb(70, 49, 73)	hsl(292, 20%, 24%)
Dr Who	rgb(123, 94, 127)	hsl(293, 15%, 43%)
Drama Queen	rgb(158, 109, 158)	hsl(300, 20%, 52%)
Pastel Violet	rgb(203, 147, 198)	hsl(305, 35%, 69%)
Scented Spring	rgb(247, 210, 242)	hsl(308, 70%, 90%)

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.33:1 Very good#2E202F on #F7D2F2
Aa11.33:1 Very good#F7D2F2 on #2E202F
Aa8.61:1 Very good#463149 on #F7D2F2
Aa8.61:1 Very good#F7D2F2 on #463149
Aa6.25:1 Good#2E202F on #CB93C6
Aa6.25:1 Good#CB93C6 on #2E202F
Aa4.75:1 Good#463149 on #CB93C6
Aa4.75:1 Good#CB93C6 on #463149

Color blindness preview

CSS variables

/* Black Velvet to Scented Spring — https://swatchly.xyz/palette/2e202f-463149-7b5e7f-9e6d9e-cb93c6-f7d2f2 */
:root {
  --black-velvet: #2e202f;
  --call-it-a-night: #463149;
  --dr-who: #7b5e7f;
  --drama-queen: #9e6d9e;
  --pastel-violet: #cb93c6;
  --scented-spring: #f7d2f2;
}

Tailwind CSS v4

/* Black Velvet to Scented Spring — https://swatchly.xyz/palette/2e202f-463149-7b5e7f-9e6d9e-cb93c6-f7d2f2 */
@theme {
  --color-black-velvet: #2e202f;
  --color-black-velvet-50: #fcf1fc;
  --color-black-velvet-100: #f3e7f3;
  --color-black-velvet-200: #e0d2e1;
  --color-black-velvet-300: #cbbbcc;
  --color-black-velvet-400: #ac9bad;
  --color-black-velvet-500: #928193;
  --color-black-velvet-600: #786879;
  --color-black-velvet-700: #625363;
  --color-black-velvet-800: #4f4250;
  --color-black-velvet-900: #403440;
  --color-black-velvet-950: #2e202f;
  --color-call-it-a-night: #463149;
  --color-call-it-a-night-50: #fdf0ff;
  --color-call-it-a-night-100: #f5e5f8;
  --color-call-it-a-night-200: #e3d0e6;
  --color-call-it-a-night-300: #ceb8d1;
  --color-call-it-a-night-400: #b19ab5;
  --color-call-it-a-night-500: #977f9b;
  --color-call-it-a-night-600: #7e6681;
  --color-call-it-a-night-700: #67526a;
  --color-call-it-a-night-800: #544156;
  --color-call-it-a-night-900: #463149;
  --color-call-it-a-night-950: #2c202e;
  --color-dr-who: #7b5e7f;
  --color-dr-who-50: #fdf0ff;
  --color-dr-who-100: #f8e3fa;
  --color-dr-who-200: #e6cde9;
  --color-dr-who-300: #d1b5d4;
  --color-dr-who-400: #b294b6;
  --color-dr-who-500: #96789b;
  --color-dr-who-600: #7b5e7f;
  --color-dr-who-700: #634966;
  --color-dr-who-800: #4e3851;
  --color-dr-who-900: #3d2a40;
  --color-dr-who-950: #271928;
  --color-drama-queen: #9e6d9e;
  --color-drama-queen-50: #ffeeff;
  --color-drama-queen-100: #ffdcfe;
  --color-drama-queen-200: #eec5ed;
  --color-drama-queen-300: #d9acd9;
  --color-drama-queen-400: #bb89ba;
  --color-drama-queen-500: #9e6d9e;
  --color-drama-queen-600: #835483;
  --color-drama-queen-700: #6a406a;
  --color-drama-queen-800: #553155;
  --color-drama-queen-900: #432443;
  --color-drama-queen-950: #2b152b;
  --color-pastel-violet: #cb93c6;
  --color-pastel-violet-50: #fff4fe;
  --color-pastel-violet-100: #ffe6fc;
  --color-pastel-violet-200: #f7cdf3;
  --color-pastel-violet-300: #e5b5e0;
  --color-pastel-violet-400: #cb93c6;
  --color-pastel-violet-500: #ad77a8;
  --color-pastel-violet-600: #8f5b8b;
  --color-pastel-violet-700: #744571;
  --color-pastel-violet-800: #5c3359;
  --color-pastel-violet-900: #482545;
  --color-pastel-violet-950: #2d152c;
  --color-scented-spring: #f7d2f2;
  --color-scented-spring-50: #fff8fe;
  --color-scented-spring-100: #ffebfc;
  --color-scented-spring-200: #f7d2f2;
  --color-scented-spring-300: #dabdd6;
  --color-scented-spring-400: #bb9ab7;
  --color-scented-spring-500: #9f7d9b;
  --color-scented-spring-600: #82627e;
  --color-scented-spring-700: #684b65;
  --color-scented-spring-800: #52394f;
  --color-scented-spring-900: #402b3d;
  --color-scented-spring-950: #281927;
}