Lavender to Veiling Waterfalls Color Palette

About this palette

Lavender to Veiling Waterfalls is a 5-color cool palette: #B570E2 (Lavender), #804778 (Magic Magenta), #2C2E84 (Intergalactic Highway), #E098FA (Party Pig), #DBE2FF (Veiling Waterfalls). It mixes purple, pink, blue tones and feels cool overall. The strongest text pairing is #2C2E84 on #DBE2FF with a contrast ratio of 8.92:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lavender	rgb(181, 112, 226)	hsl(276, 66%, 66%)
Magic Magenta	rgb(128, 71, 120)	hsl(308, 29%, 39%)
Intergalactic Highway	rgb(44, 46, 132)	hsl(239, 50%, 35%)
Party Pig	rgb(224, 152, 250)	hsl(284, 91%, 79%)
Veiling Waterfalls	rgb(219, 226, 255)	hsl(228, 100%, 93%)

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.

Aa8.92:1 Very good#2C2E84 on #DBE2FF
Aa8.92:1 Very good#DBE2FF on #2C2E84
Aa5.48:1 Good#2C2E84 on #E098FA
Aa5.48:1 Good#E098FA on #2C2E84
Aa5.29:1 Good#804778 on #DBE2FF
Aa5.29:1 Good#DBE2FF on #804778
Aa3.48:1 Poor#B570E2 on #2C2E84
Aa3.48:1 Poor#2C2E84 on #B570E2

Color blindness preview

CSS variables

/* Lavender to Veiling Waterfalls — https://swatchly.xyz/palette/b570e2-804778-2c2e84-e098fa-dbe2ff */
:root {
  --lavender: #b570e2;
  --magic-magenta: #804778;
  --intergalactic-highway: #2c2e84;
  --party-pig: #e098fa;
  --veiling-waterfalls: #dbe2ff;
}

Tailwind CSS v4

/* Lavender to Veiling Waterfalls — https://swatchly.xyz/palette/b570e2-804778-2c2e84-e098fa-dbe2ff */
@theme {
  --color-lavender: #b570e2;
  --color-lavender-50: #f6ebff;
  --color-lavender-100: #efdaff;
  --color-lavender-200: #e2bcff;
  --color-lavender-300: #d496ff;
  --color-lavender-400: #b570e2;
  --color-lavender-500: #9b56c6;
  --color-lavender-600: #813fa9;
  --color-lavender-700: #6a2c8d;
  --color-lavender-800: #551f75;
  --color-lavender-900: #45155f;
  --color-lavender-950: #2e0a41;
  --color-magic-magenta: #804778;
  --color-magic-magenta-50: #fff0fc;
  --color-magic-magenta-100: #ffe0f9;
  --color-magic-magenta-200: #f8c8ef;
  --color-magic-magenta-300: #e7b0dd;
  --color-magic-magenta-400: #cb90c2;
  --color-magic-magenta-500: #b275a8;
  --color-magic-magenta-600: #975c8e;
  --color-magic-magenta-700: #804778;
  --color-magic-magenta-800: #66365f;
  --color-magic-magenta-900: #50274b;
  --color-magic-magenta-950: #341630;
  --color-intergalactic-highway: #2c2e84;
  --color-intergalactic-highway-50: #f2f5ff;
  --color-intergalactic-highway-100: #e5eaff;
  --color-intergalactic-highway-200: #ccd5ff;
  --color-intergalactic-highway-300: #aebbff;
  --color-intergalactic-highway-400: #8897f3;
  --color-intergalactic-highway-500: #6c79d6;
  --color-intergalactic-highway-600: #535db5;
  --color-intergalactic-highway-700: #3f4695;
  --color-intergalactic-highway-800: #2c2e84;
  --color-intergalactic-highway-900: #22265f;
  --color-intergalactic-highway-950: #13163e;
  --color-party-pig: #e098fa;
  --color-party-pig-50: #f9ebff;
  --color-party-pig-100: #f5dbff;
  --color-party-pig-200: #edbbff;
  --color-party-pig-300: #e098fa;
  --color-party-pig-400: #c07bd8;
  --color-party-pig-500: #a560bd;
  --color-party-pig-600: #8a47a1;
  --color-party-pig-700: #713486;
  --color-party-pig-800: #5b256d;
  --color-party-pig-900: #491a58;
  --color-party-pig-950: #2f0d3a;
  --color-veiling-waterfalls: #dbe2ff;
  --color-veiling-waterfalls-50: #eaeeff;
  --color-veiling-waterfalls-100: #dbe2ff;
  --color-veiling-waterfalls-200: #cbd0e6;
  --color-veiling-waterfalls-300: #b5bbd3;
  --color-veiling-waterfalls-400: #969db7;
  --color-veiling-waterfalls-500: #7c829d;
  --color-veiling-waterfalls-600: #646982;
  --color-veiling-waterfalls-700: #4f546a;
  --color-veiling-waterfalls-800: #3d4155;
  --color-veiling-waterfalls-900: #2e3242;
  --color-veiling-waterfalls-950: #1c1e2a;
}