Wondrous Wisteria to Flood color palette

A7B2E3Wondrous Wisteria 495277Deep Indigo DAE4FFVeiling Waterfalls 2F326FTwilight Express 7379B1Flood

Open in generator Export PNG, PDF, ASE…

About this palette

Wondrous Wisteria to Flood is a 5-color cool, monochromatic palette: #A7B2E3 (Wondrous Wisteria), #495277 (Deep Indigo), #DAE4FF (Veiling Waterfalls), #2F326F (Twilight Express), #7379B1 (Flood). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #DAE4FF on #2F326F with a contrast ratio of 9.15:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wondrous Wisteria	rgb(167, 178, 227)	hsl(229, 52%, 77%)
Deep Indigo	rgb(73, 82, 119)	hsl(228, 24%, 38%)
Veiling Waterfalls	rgb(218, 228, 255)	hsl(224, 100%, 93%)
Twilight Express	rgb(47, 50, 111)	hsl(237, 41%, 31%)
Flood	rgb(115, 121, 177)	hsl(234, 28%, 57%)

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.

Aa9.15:1 Very good#DAE4FF on #2F326F
Aa9.15:1 Very good#2F326F on #DAE4FF
Aa5.99:1 Good#495277 on #DAE4FF
Aa5.99:1 Good#DAE4FF on #495277
Aa5.60:1 Good#A7B2E3 on #2F326F
Aa5.60:1 Good#2F326F on #A7B2E3
Aa3.67:1 Poor#A7B2E3 on #495277
Aa3.67:1 Poor#495277 on #A7B2E3

Color blindness preview

CSS variables

/* Wondrous Wisteria to Flood — https://swatchly.xyz/palette/a7b2e3-495277-dae4ff-2f326f-7379b1 */
:root {
  --wondrous-wisteria: #a7b2e3;
  --deep-indigo: #495277;
  --veiling-waterfalls: #dae4ff;
  --twilight-express: #2f326f;
  --flood: #7379b1;
}

Tailwind CSS v4

/* Wondrous Wisteria to Flood — https://swatchly.xyz/palette/a7b2e3-495277-dae4ff-2f326f-7379b1 */
@theme {
  --color-wondrous-wisteria: #a7b2e3;
  --color-wondrous-wisteria-50: #eaeeff;
  --color-wondrous-wisteria-100: #dae1ff;
  --color-wondrous-wisteria-200: #c2cbf3;
  --color-wondrous-wisteria-300: #a7b2e3;
  --color-wondrous-wisteria-400: #8b95c3;
  --color-wondrous-wisteria-500: #727ca9;
  --color-wondrous-wisteria-600: #5a638e;
  --color-wondrous-wisteria-700: #474f76;
  --color-wondrous-wisteria-800: #373e60;
  --color-wondrous-wisteria-900: #2b304e;
  --color-wondrous-wisteria-950: #1a1d33;
  --color-deep-indigo: #495277;
  --color-deep-indigo-50: #f2f5ff;
  --color-deep-indigo-100: #e5eaff;
  --color-deep-indigo-200: #cdd6f7;
  --color-deep-indigo-300: #b5bfe4;
  --color-deep-indigo-400: #949fc7;
  --color-deep-indigo-500: #7983ab;
  --color-deep-indigo-600: #5f698f;
  --color-deep-indigo-700: #495277;
  --color-deep-indigo-800: #39405d;
  --color-deep-indigo-900: #2b314a;
  --color-deep-indigo-950: #191e30;
  --color-veiling-waterfalls: #dae4ff;
  --color-veiling-waterfalls-50: #e9efff;
  --color-veiling-waterfalls-100: #dae4ff;
  --color-veiling-waterfalls-200: #cad2e6;
  --color-veiling-waterfalls-300: #b4bcd3;
  --color-veiling-waterfalls-400: #959eb6;
  --color-veiling-waterfalls-500: #7b849c;
  --color-veiling-waterfalls-600: #626a81;
  --color-veiling-waterfalls-700: #4d556a;
  --color-veiling-waterfalls-800: #3b4254;
  --color-veiling-waterfalls-900: #2d3242;
  --color-veiling-waterfalls-950: #1b1f2a;
  --color-twilight-express: #2f326f;
  --color-twilight-express-50: #f2f4ff;
  --color-twilight-express-100: #e6eaff;
  --color-twilight-express-200: #cdd5ff;
  --color-twilight-express-300: #b1baf9;
  --color-twilight-express-400: #8f98dc;
  --color-twilight-express-500: #737bbf;
  --color-twilight-express-600: #585f9f;
  --color-twilight-express-700: #434880;
  --color-twilight-express-800: #2f326f;
  --color-twilight-express-900: #242850;
  --color-twilight-express-950: #151733;
  --color-flood: #7379b1;
  --color-flood-50: #f1f3ff;
  --color-flood-100: #e3e7ff;
  --color-flood-200: #c9d0ff;
  --color-flood-300: #b0b7ec;
  --color-flood-400: #8f96ce;
  --color-flood-500: #7379b1;
  --color-flood-600: #5b6095;
  --color-flood-700: #474b7b;
  --color-flood-800: #373a63;
  --color-flood-900: #2a2d4f;
  --color-flood-950: #191b34;
}