Pāua to In the Vines Color Palette

About this palette

Pāua to In the Vines is a 5-color cool, monochromatic palette: #2A2150 (Pāua), #DEDFFF (Puffy Cloud), #AEA7E1 (Enchanted Lavender), #7E67DB (Matt Purple), #54448B (In the Vines). It mixes purple tones and feels cool overall. The strongest text pairing is #2A2150 on #DEDFFF with a contrast ratio of 11.25:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pāua	rgb(42, 33, 80)	hsl(251, 42%, 22%)
Puffy Cloud	rgb(222, 223, 255)	hsl(238, 100%, 94%)
Enchanted Lavender	rgb(174, 167, 225)	hsl(247, 49%, 77%)
Matt Purple	rgb(126, 103, 219)	hsl(252, 62%, 63%)
In the Vines	rgb(84, 68, 139)	hsl(254, 34%, 41%)

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.

Aa11.25:1 Very good#2A2150 on #DEDFFF
Aa11.25:1 Very good#DEDFFF on #2A2150
Aa6.58:1 Good#2A2150 on #AEA7E1
Aa6.58:1 Good#AEA7E1 on #2A2150
Aa6.25:1 Good#DEDFFF on #54448B
Aa6.25:1 Good#54448B on #DEDFFF
Aa3.65:1 Poor#AEA7E1 on #54448B
Aa3.65:1 Poor#54448B on #AEA7E1

Color blindness preview

CSS variables

/* Pāua to In the Vines — https://swatchly.xyz/palette/2a2150-dedfff-aea7e1-7e67db-54448b */
:root {
  --p-ua: #2a2150;
  --puffy-cloud: #dedfff;
  --enchanted-lavender: #aea7e1;
  --matt-purple: #7e67db;
  --in-the-vines: #54448b;
}

Tailwind CSS v4

/* Pāua to In the Vines — https://swatchly.xyz/palette/2a2150-dedfff-aea7e1-7e67db-54448b */
@theme {
  --color-p-ua: #2a2150;
  --color-p-ua-50: #f4f4ff;
  --color-p-ua-100: #eae8ff;
  --color-p-ua-200: #d5d2fe;
  --color-p-ua-300: #bfbaed;
  --color-p-ua-400: #9e98cf;
  --color-p-ua-500: #817bb2;
  --color-p-ua-600: #655f92;
  --color-p-ua-700: #4e4875;
  --color-p-ua-800: #3a355b;
  --color-p-ua-900: #2a2150;
  --color-p-ua-950: #18152a;
  --color-puffy-cloud: #dedfff;
  --color-puffy-cloud-50: #ebecff;
  --color-puffy-cloud-100: #dedfff;
  --color-puffy-cloud-200: #cdcee6;
  --color-puffy-cloud-300: #b8b8d4;
  --color-puffy-cloud-400: #9a9ab7;
  --color-puffy-cloud-500: #80809d;
  --color-puffy-cloud-600: #676883;
  --color-puffy-cloud-700: #52536b;
  --color-puffy-cloud-800: #404055;
  --color-puffy-cloud-900: #313143;
  --color-puffy-cloud-950: #1e1e2b;
  --color-enchanted-lavender: #aea7e1;
  --color-enchanted-lavender-50: #faf9ff;
  --color-enchanted-lavender-100: #f2f1ff;
  --color-enchanted-lavender-200: #e0ddff;
  --color-enchanted-lavender-300: #cbc6f6;
  --color-enchanted-lavender-400: #aea7e1;
  --color-enchanted-lavender-500: #9089c1;
  --color-enchanted-lavender-600: #736ca2;
  --color-enchanted-lavender-700: #5b5485;
  --color-enchanted-lavender-800: #463f6a;
  --color-enchanted-lavender-900: #342f52;
  --color-enchanted-lavender-950: #1f1b34;
  --color-matt-purple: #7e67db;
  --color-matt-purple-50: #f3f2ff;
  --color-matt-purple-100: #e7e5ff;
  --color-matt-purple-200: #d1ccff;
  --color-matt-purple-300: #b9afff;
  --color-matt-purple-400: #9985f9;
  --color-matt-purple-500: #7e67db;
  --color-matt-purple-600: #664ebc;
  --color-matt-purple-700: #523a9e;
  --color-matt-purple-800: #402a82;
  --color-matt-purple-900: #321e69;
  --color-matt-purple-950: #1f1147;
  --color-in-the-vines: #54448b;
  --color-in-the-vines-50: #f5f4ff;
  --color-in-the-vines-100: #ebe8ff;
  --color-in-the-vines-200: #d7d0ff;
  --color-in-the-vines-300: #c0b5fa;
  --color-in-the-vines-400: #a093df;
  --color-in-the-vines-500: #8577c2;
  --color-in-the-vines-600: #6a5ca4;
  --color-in-the-vines-700: #54448b;
  --color-in-the-vines-800: #41356d;
  --color-in-the-vines-900: #322757;
  --color-in-the-vines-950: #1f1739;
}