Veiling Waterfalls to Dark Prom Queen Color Palette

About this palette

Veiling Waterfalls to Dark Prom Queen is a 4-color cool, gradient palette: #D5E5FF (Veiling Waterfalls), #969EDD (Azureno), #0064B7 (Wing Commander), #2A1332 (Dark Prom Queen). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #D5E5FF on #2A1332 with a contrast ratio of 13.32:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Veiling Waterfalls	rgb(213, 229, 255)	hsl(217, 100%, 92%)
Azureno	rgb(150, 158, 221)	hsl(233, 51%, 73%)
Wing Commander	rgb(0, 100, 183)	hsl(207, 100%, 36%)
Dark Prom Queen	rgb(42, 19, 50)	hsl(285, 45%, 14%)

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.

Aa13.32:1 Super#D5E5FF on #2A1332
Aa13.32:1 Super#2A1332 on #D5E5FF
Aa6.65:1 Good#969EDD on #2A1332
Aa6.65:1 Good#2A1332 on #969EDD
Aa4.70:1 Good#D5E5FF on #0064B7
Aa4.70:1 Good#0064B7 on #D5E5FF

Color blindness preview

CSS variables

/* Veiling Waterfalls to Dark Prom Queen — https://swatchly.xyz/palette/d5e5ff-969edd-0064b7-2a1332 */
:root {
  --veiling-waterfalls: #d5e5ff;
  --azureno: #969edd;
  --wing-commander: #0064b7;
  --dark-prom-queen: #2a1332;
}

Tailwind CSS v4

/* Veiling Waterfalls to Dark Prom Queen — https://swatchly.xyz/palette/d5e5ff-969edd-0064b7-2a1332 */
@theme {
  --color-veiling-waterfalls: #d5e5ff;
  --color-veiling-waterfalls-50: #e6f0ff;
  --color-veiling-waterfalls-100: #d5e5ff;
  --color-veiling-waterfalls-200: #c6d2e6;
  --color-veiling-waterfalls-300: #b0bdd3;
  --color-veiling-waterfalls-400: #919fb6;
  --color-veiling-waterfalls-500: #76859c;
  --color-veiling-waterfalls-600: #5e6b82;
  --color-veiling-waterfalls-700: #4a566a;
  --color-veiling-waterfalls-800: #384354;
  --color-veiling-waterfalls-900: #2a3342;
  --color-veiling-waterfalls-950: #19202a;
  --color-azureno: #969edd;
  --color-azureno-50: #f3f5ff;
  --color-azureno-100: #e8ebff;
  --color-azureno-200: #d0d6ff;
  --color-azureno-300: #b7bef5;
  --color-azureno-400: #969edd;
  --color-azureno-500: #7b82bf;
  --color-azureno-600: #6167a1;
  --color-azureno-700: #4c5185;
  --color-azureno-800: #3a3e6c;
  --color-azureno-900: #2b2f55;
  --color-azureno-950: #1a1c38;
  --color-wing-commander: #0064b7;
  --color-wing-commander-50: #eef6ff;
  --color-wing-commander-100: #dbecff;
  --color-wing-commander-200: #b6d8ff;
  --color-wing-commander-300: #8ac1ff;
  --color-wing-commander-400: #519ff4;
  --color-wing-commander-500: #2e81d7;
  --color-wing-commander-600: #0064b7;
  --color-wing-commander-700: #004f93;
  --color-wing-commander-800: #003e75;
  --color-wing-commander-900: #002f5c;
  --color-wing-commander-950: #001d3d;
  --color-dark-prom-queen: #2a1332;
  --color-dark-prom-queen-50: #fbf1ff;
  --color-dark-prom-queen-100: #f6e4fd;
  --color-dark-prom-queen-200: #e4ceed;
  --color-dark-prom-queen-300: #cfb7d9;
  --color-dark-prom-queen-400: #b196bb;
  --color-dark-prom-queen-500: #967aa0;
  --color-dark-prom-queen-600: #7a6084;
  --color-dark-prom-queen-700: #624a6b;
  --color-dark-prom-queen-800: #4d3955;
  --color-dark-prom-queen-900: #3c2a42;
  --color-dark-prom-queen-950: #2a1332;
}