Heron to Wisteria Color Palette

About this palette

Heron to Wisteria is a 5-color cool palette: #69628D (Heron), #DAD1FF (Icy Plains), #66283D (Siren), #C6A2D7 (Enchanted Lavender), #AB76BC (Wisteria). It mixes purple, red tones and feels cool overall. The strongest text pairing is #DAD1FF on #66283D with a contrast ratio of 7.51:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Heron	rgb(105, 98, 141)	hsl(250, 18%, 47%)
Icy Plains	rgb(218, 209, 255)	hsl(252, 100%, 91%)
Siren	rgb(102, 40, 61)	hsl(340, 44%, 28%)
Enchanted Lavender	rgb(198, 162, 215)	hsl(281, 40%, 74%)
Wisteria	rgb(171, 118, 188)	hsl(285, 34%, 60%)

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.

Aa7.51:1 Very good#DAD1FF on #66283D
Aa7.51:1 Very good#66283D on #DAD1FF
Aa4.93:1 Good#66283D on #C6A2D7
Aa4.93:1 Good#C6A2D7 on #66283D
Aa3.90:1 Poor#69628D on #DAD1FF
Aa3.90:1 Poor#DAD1FF on #69628D
Aa3.12:1 Poor#66283D on #AB76BC
Aa3.12:1 Poor#AB76BC on #66283D

Color blindness preview

CSS variables

/* Heron to Wisteria — https://swatchly.xyz/palette/69628d-dad1ff-66283d-c6a2d7-ab76bc */
:root {
  --heron: #69628d;
  --icy-plains: #dad1ff;
  --siren: #66283d;
  --enchanted-lavender: #c6a2d7;
  --wisteria: #ab76bc;
}

Tailwind CSS v4

/* Heron to Wisteria — https://swatchly.xyz/palette/69628d-dad1ff-66283d-c6a2d7-ab76bc */
@theme {
  --color-heron: #69628d;
  --color-heron-50: #f5f4ff;
  --color-heron-100: #eae7ff;
  --color-heron-200: #d6d1f6;
  --color-heron-300: #bfb9e3;
  --color-heron-400: #9f99c5;
  --color-heron-500: #847da9;
  --color-heron-600: #69628d;
  --color-heron-700: #534d73;
  --color-heron-800: #413b5c;
  --color-heron-900: #322d49;
  --color-heron-950: #1f1b2f;
  --color-icy-plains: #dad1ff;
  --color-icy-plains-50: #f6f4ff;
  --color-icy-plains-100: #ece8ff;
  --color-icy-plains-200: #dad1ff;
  --color-icy-plains-300: #c3bce2;
  --color-icy-plains-400: #a49bc5;
  --color-icy-plains-500: #887faa;
  --color-icy-plains-600: #6e658d;
  --color-icy-plains-700: #574f73;
  --color-icy-plains-800: #443d5c;
  --color-icy-plains-900: #342e49;
  --color-icy-plains-950: #201c2f;
  --color-siren: #66283d;
  --color-siren-50: #fff1f4;
  --color-siren-100: #ffe3ea;
  --color-siren-200: #ffc5d4;
  --color-siren-300: #ecacbd;
  --color-siren-400: #cf899d;
  --color-siren-500: #b36d81;
  --color-siren-600: #955367;
  --color-siren-700: #793e50;
  --color-siren-800: #66283d;
  --color-siren-900: #4c212f;
  --color-siren-950: #31121c;
  --color-enchanted-lavender: #c6a2d7;
  --color-enchanted-lavender-50: #f7e6ff;
  --color-enchanted-lavender-100: #efd6fc;
  --color-enchanted-lavender-200: #dbbeea;
  --color-enchanted-lavender-300: #c6a2d7;
  --color-enchanted-lavender-400: #a886b9;
  --color-enchanted-lavender-500: #8f6d9f;
  --color-enchanted-lavender-600: #765685;
  --color-enchanted-lavender-700: #61436e;
  --color-enchanted-lavender-800: #4e345a;
  --color-enchanted-lavender-900: #3f2849;
  --color-enchanted-lavender-950: #28182f;
  --color-wisteria: #ab76bc;
  --color-wisteria-50: #fcf3ff;
  --color-wisteria-100: #f9e7ff;
  --color-wisteria-200: #f2cbff;
  --color-wisteria-300: #e1b3f0;
  --color-wisteria-400: #c592d5;
  --color-wisteria-500: #ab76bc;
  --color-wisteria-600: #8d5a9e;
  --color-wisteria-700: #734482;
  --color-wisteria-800: #5b3268;
  --color-wisteria-900: #472452;
  --color-wisteria-950: #2d1435;
}