Vintage Bloom to Slumber color palette

CAB1D1Vintage Bloom DBE3FFVeiling Waterfalls 847DD3Matt Purple 2E233FMidnight Velvet 2E507BSlumber

About this palette

Vintage Bloom to Slumber is a 5-color cool palette: #CAB1D1 (Vintage Bloom), #DBE3FF (Veiling Waterfalls), #847DD3 (Matt Purple), #2E233F (Midnight Velvet), #2E507B (Slumber). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #DBE3FF on #2E233F with a contrast ratio of 11.51:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Vintage Bloom	rgb(202, 177, 209)	hsl(287, 26%, 76%)
Veiling Waterfalls	rgb(219, 227, 255)	hsl(227, 100%, 93%)
Matt Purple	rgb(132, 125, 211)	hsl(245, 49%, 66%)
Midnight Velvet	rgb(46, 35, 63)	hsl(264, 29%, 19%)
Slumber	rgb(46, 80, 123)	hsl(214, 46%, 33%)

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.51:1 Very good#DBE3FF on #2E233F
Aa11.51:1 Very good#2E233F on #DBE3FF
Aa7.51:1 Very good#CAB1D1 on #2E233F
Aa7.51:1 Very good#2E233F on #CAB1D1
Aa6.45:1 Good#DBE3FF on #2E507B
Aa6.45:1 Good#2E507B on #DBE3FF
Aa4.20:1 Poor#CAB1D1 on #2E507B
Aa4.20:1 Poor#2E507B on #CAB1D1

Color blindness preview

CSS variables

/* Vintage Bloom to Slumber — https://swatchly.xyz/palette/cab1d1-dbe3ff-847dd3-2e233f-2e507b */
:root {
  --vintage-bloom: #cab1d1;
  --veiling-waterfalls: #dbe3ff;
  --matt-purple: #847dd3;
  --midnight-velvet: #2e233f;
  --slumber: #2e507b;
}

Tailwind CSS v4

/* Vintage Bloom to Slumber — https://swatchly.xyz/palette/cab1d1-dbe3ff-847dd3-2e233f-2e507b */
@theme {
  --color-vintage-bloom: #cab1d1;
  --color-vintage-bloom-50: #fbecff;
  --color-vintage-bloom-100: #f1e1f6;
  --color-vintage-bloom-200: #decbe4;
  --color-vintage-bloom-300: #cab1d1;
  --color-vintage-bloom-400: #ab93b1;
  --color-vintage-bloom-500: #907997;
  --color-vintage-bloom-600: #76607c;
  --color-vintage-bloom-700: #5f4b65;
  --color-vintage-bloom-800: #4c3a51;
  --color-vintage-bloom-900: #3b2d40;
  --color-vintage-bloom-950: #251b28;
  --color-veiling-waterfalls: #dbe3ff;
  --color-veiling-waterfalls-50: #eaefff;
  --color-veiling-waterfalls-100: #dbe3ff;
  --color-veiling-waterfalls-200: #cbd1e6;
  --color-veiling-waterfalls-300: #b5bbd3;
  --color-veiling-waterfalls-400: #969db6;
  --color-veiling-waterfalls-500: #7c839c;
  --color-veiling-waterfalls-600: #636a82;
  --color-veiling-waterfalls-700: #4e546a;
  --color-veiling-waterfalls-800: #3c4154;
  --color-veiling-waterfalls-900: #2e3242;
  --color-veiling-waterfalls-950: #1c1f2a;
  --color-matt-purple: #847dd3;
  --color-matt-purple-50: #f5f5ff;
  --color-matt-purple-100: #eaeaff;
  --color-matt-purple-200: #d5d5ff;
  --color-matt-purple-300: #bebbff;
  --color-matt-purple-400: #9e99ed;
  --color-matt-purple-500: #847dd3;
  --color-matt-purple-600: #6a62b4;
  --color-matt-purple-700: #534b96;
  --color-matt-purple-800: #41387a;
  --color-matt-purple-900: #312a61;
  --color-matt-purple-950: #1e1840;
  --color-midnight-velvet: #2e233f;
  --color-midnight-velvet-50: #f7f3ff;
  --color-midnight-velvet-100: #efe7fe;
  --color-midnight-velvet-200: #dcd2ed;
  --color-midnight-velvet-300: #c6bbda;
  --color-midnight-velvet-400: #a599ba;
  --color-midnight-velvet-500: #887c9d;
  --color-midnight-velvet-600: #6b607f;
  --color-midnight-velvet-700: #534964;
  --color-midnight-velvet-800: #3e354c;
  --color-midnight-velvet-900: #2e233f;
  --color-midnight-velvet-950: #1a1522;
  --color-slumber: #2e507b;
  --color-slumber-50: #eff6ff;
  --color-slumber-100: #dfedff;
  --color-slumber-200: #bcd9ff;
  --color-slumber-300: #a0c1ec;
  --color-slumber-400: #7ca0cf;
  --color-slumber-500: #6084b2;
  --color-slumber-600: #466893;
  --color-slumber-700: #2e507b;
  --color-slumber-800: #243e60;
  --color-slumber-900: #19304c;
  --color-slumber-950: #0d1d31;
}