Wondrous Wisteria to Night Shift color palette

B5ACF7Wondrous Wisteria 282803Lindworm Green EDEAFFFoundation White C57C68Earthworm 135F70Night Shift

Open in generator Export PNG, PDF, ASE…

About this palette

Wondrous Wisteria to Night Shift is a 5-color vintage palette: #B5ACF7 (Wondrous Wisteria), #282803 (Lindworm Green), #EDEAFF (Foundation White), #C57C68 (Earthworm), #135F70 (Night Shift). It mixes purple, brown, white, red, blue tones and feels balanced overall. The strongest text pairing is #282803 on #EDEAFF with a contrast ratio of 12.77:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wondrous Wisteria	rgb(181, 172, 247)	hsl(247, 82%, 82%)
Lindworm Green	rgb(40, 40, 3)	hsl(60, 86%, 8%)
Foundation White	rgb(237, 234, 255)	hsl(249, 100%, 96%)
Earthworm	rgb(197, 124, 104)	hsl(13, 44%, 59%)
Night Shift	rgb(19, 95, 112)	hsl(191, 71%, 26%)

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.

Aa12.77:1 Super#282803 on #EDEAFF
Aa12.77:1 Super#EDEAFF on #282803
Aa7.32:1 Very good#B5ACF7 on #282803
Aa7.32:1 Very good#282803 on #B5ACF7
Aa6.15:1 Good#EDEAFF on #135F70
Aa6.15:1 Good#135F70 on #EDEAFF
Aa4.63:1 Good#282803 on #C57C68
Aa4.63:1 Good#C57C68 on #282803

Color blindness preview

CSS variables

/* Wondrous Wisteria to Night Shift — https://swatchly.xyz/palette/b5acf7-282803-edeaff-c57c68-135f70 */
:root {
  --wondrous-wisteria: #b5acf7;
  --lindworm-green: #282803;
  --foundation-white: #edeaff;
  --earthworm: #c57c68;
  --night-shift: #135f70;
}

Tailwind CSS v4

/* Wondrous Wisteria to Night Shift — https://swatchly.xyz/palette/b5acf7-282803-edeaff-c57c68-135f70 */
@theme {
  --color-wondrous-wisteria: #b5acf7;
  --color-wondrous-wisteria-50: #efeeff;
  --color-wondrous-wisteria-100: #e3e1ff;
  --color-wondrous-wisteria-200: #cdc8ff;
  --color-wondrous-wisteria-300: #b5acf7;
  --color-wondrous-wisteria-400: #988fd6;
  --color-wondrous-wisteria-500: #7f75bb;
  --color-wondrous-wisteria-600: #665c9f;
  --color-wondrous-wisteria-700: #524884;
  --color-wondrous-wisteria-800: #40376c;
  --color-wondrous-wisteria-900: #322b58;
  --color-wondrous-wisteria-950: #1f193a;
  --color-lindworm-green: #282803;
  --color-lindworm-green-50: #f6f7e0;
  --color-lindworm-green-100: #eceed4;
  --color-lindworm-green-200: #d9dabc;
  --color-lindworm-green-300: #c2c4a2;
  --color-lindworm-green-400: #a3a57f;
  --color-lindworm-green-500: #898b64;
  --color-lindworm-green-600: #70714c;
  --color-lindworm-green-700: #5b5c3a;
  --color-lindworm-green-800: #494a2b;
  --color-lindworm-green-900: #3a3b20;
  --color-lindworm-green-950: #282803;
  --color-foundation-white: #edeaff;
  --color-foundation-white-50: #f7f5ff;
  --color-foundation-white-100: #edeaff;
  --color-foundation-white-200: #d9d7e6;
  --color-foundation-white-300: #c2c0d1;
  --color-foundation-white-400: #a2a0b2;
  --color-foundation-white-500: #878497;
  --color-foundation-white-600: #6c697b;
  --color-foundation-white-700: #555363;
  --color-foundation-white-800: #42404e;
  --color-foundation-white-900: #33313d;
  --color-foundation-white-950: #1f1e26;
  --color-earthworm: #c57c68;
  --color-earthworm-50: #fff5f2;
  --color-earthworm-100: #ffeae4;
  --color-earthworm-200: #ffd2c6;
  --color-earthworm-300: #f7b8a6;
  --color-earthworm-400: #de9784;
  --color-earthworm-500: #c57c68;
  --color-earthworm-600: #a5604d;
  --color-earthworm-700: #884837;
  --color-earthworm-800: #6d3526;
  --color-earthworm-900: #55261a;
  --color-earthworm-950: #37150c;
  --color-night-shift: #135f70;
  --color-night-shift-50: #e5f9ff;
  --color-night-shift-100: #cbf3ff;
  --color-night-shift-200: #afe1ef;
  --color-night-shift-300: #92ccdc;
  --color-night-shift-400: #6cadbf;
  --color-night-shift-500: #4d91a3;
  --color-night-shift-600: #327687;
  --color-night-shift-700: #135f70;
  --color-night-shift-800: #0d4a58;
  --color-night-shift-900: #043945;
  --color-night-shift-950: #00242c;
}