Vintage to Dusk Color Palette

About this palette

Vintage to Dusk is a 5-color cool palette: #917397 (Vintage), #8BAEE9 (Queer Blue), #DEEEFF (Cotton Boll), #392F4F (Sanctum of Shadows), #50557D (Dusk). It mixes purple, blue, white tones and feels cool overall. The strongest text pairing is #DEEEFF on #392F4F with a contrast ratio of 10.50:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Vintage	rgb(145, 115, 151)	hsl(290, 15%, 52%)
Queer Blue	rgb(139, 174, 233)	hsl(218, 68%, 73%)
Cotton Boll	rgb(222, 238, 255)	hsl(211, 100%, 94%)
Sanctum of Shadows	rgb(57, 47, 79)	hsl(259, 25%, 25%)
Dusk	rgb(80, 85, 125)	hsl(233, 22%, 40%)

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.50:1 Very good#DEEEFF on #392F4F
Aa10.50:1 Very good#392F4F on #DEEEFF
Aa6.05:1 Good#DEEEFF on #50557D
Aa6.05:1 Good#50557D on #DEEEFF
Aa5.51:1 Good#8BAEE9 on #392F4F
Aa5.51:1 Good#392F4F on #8BAEE9
Aa3.48:1 Poor#917397 on #DEEEFF
Aa3.48:1 Poor#DEEEFF on #917397

Color blindness preview

CSS variables

/* Vintage to Dusk — https://swatchly.xyz/palette/917397-8baee9-deeeff-392f4f-50557d */
:root {
  --vintage: #917397;
  --queer-blue: #8baee9;
  --cotton-boll: #deeeff;
  --sanctum-of-shadows: #392f4f;
  --dusk: #50557d;
}

Tailwind CSS v4

/* Vintage to Dusk — https://swatchly.xyz/palette/917397-8baee9-deeeff-392f4f-50557d */
@theme {
  --color-vintage: #917397;
  --color-vintage-50: #fceeff;
  --color-vintage-100: #f6e0fa;
  --color-vintage-200: #e3cae8;
  --color-vintage-300: #cdb1d2;
  --color-vintage-400: #ae8fb4;
  --color-vintage-500: #917397;
  --color-vintage-600: #775b7c;
  --color-vintage-700: #604665;
  --color-vintage-800: #4c3650;
  --color-vintage-900: #3c293f;
  --color-vintage-950: #261929;
  --color-queer-blue: #8baee9;
  --color-queer-blue-50: #f6f9ff;
  --color-queer-blue-100: #eaf2ff;
  --color-queer-blue-200: #cfe1ff;
  --color-queer-blue-300: #afccfd;
  --color-queer-blue-400: #8baee9;
  --color-queer-blue-500: #6f90c9;
  --color-queer-blue-600: #5373aa;
  --color-queer-blue-700: #3d5a8c;
  --color-queer-blue-800: #2c4571;
  --color-queer-blue-900: #1f3458;
  --color-queer-blue-950: #101f38;
  --color-cotton-boll: #deeeff;
  --color-cotton-boll-50: #eff7ff;
  --color-cotton-boll-100: #deeeff;
  --color-cotton-boll-200: #cedae6;
  --color-cotton-boll-300: #b6c3d1;
  --color-cotton-boll-400: #95a4b3;
  --color-cotton-boll-500: #7a8897;
  --color-cotton-boll-600: #606e7c;
  --color-cotton-boll-700: #4a5764;
  --color-cotton-boll-800: #39444f;
  --color-cotton-boll-900: #2b343d;
  --color-cotton-boll-950: #192027;
  --color-sanctum-of-shadows: #392f4f;
  --color-sanctum-of-shadows-50: #f6f3ff;
  --color-sanctum-of-shadows-100: #ede7ff;
  --color-sanctum-of-shadows-200: #dad2f0;
  --color-sanctum-of-shadows-300: #c4bbdd;
  --color-sanctum-of-shadows-400: #a69bc0;
  --color-sanctum-of-shadows-500: #8b80a6;
  --color-sanctum-of-shadows-600: #71678a;
  --color-sanctum-of-shadows-700: #5a5171;
  --color-sanctum-of-shadows-800: #483f5c;
  --color-sanctum-of-shadows-900: #392f4f;
  --color-sanctum-of-shadows-950: #231e30;
  --color-dusk: #50557d;
  --color-dusk-50: #f3f4ff;
  --color-dusk-100: #e6eaff;
  --color-dusk-200: #d0d6f8;
  --color-dusk-300: #b9bfe6;
  --color-dusk-400: #9aa0cb;
  --color-dusk-500: #7f85b0;
  --color-dusk-600: #666b94;
  --color-dusk-700: #50557d;
  --color-dusk-800: #3e4263;
  --color-dusk-900: #2f324e;
  --color-dusk-950: #1c1f33;
}