Purple Haze to Violaceous Color Palette

About this palette

Purple Haze to Violaceous is a 5-color cool palette: #80759F (Purple Haze), #BFD6FF (Oh Boy!), #2F609A (Starry Night), #3E3B6C (Storm Is Coming), #BD94CD (Violaceous). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #BFD6FF on #3E3B6C with a contrast ratio of 6.98:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Purple Haze	rgb(128, 117, 159)	hsl(256, 18%, 54%)
Oh Boy!	rgb(191, 214, 255)	hsl(218, 100%, 87%)
Starry Night	rgb(47, 96, 154)	hsl(213, 53%, 39%)
Storm Is Coming	rgb(62, 59, 108)	hsl(244, 29%, 33%)
Violaceous	rgb(189, 148, 205)	hsl(283, 36%, 69%)

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.

Aa6.98:1 Good#BFD6FF on #3E3B6C
Aa6.98:1 Good#3E3B6C on #BFD6FF
Aa4.38:1 Poor#BFD6FF on #2F609A
Aa4.38:1 Poor#2F609A on #BFD6FF
Aa4.05:1 Poor#3E3B6C on #BD94CD
Aa4.05:1 Poor#BD94CD on #3E3B6C

Color blindness preview

CSS variables

/* Purple Haze to Violaceous — https://swatchly.xyz/palette/80759f-bfd6ff-2f609a-3e3b6c-bd94cd */
:root {
  --purple-haze: #80759f;
  --oh-boy: #bfd6ff;
  --starry-night: #2f609a;
  --storm-is-coming: #3e3b6c;
  --violaceous: #bd94cd;
}

Tailwind CSS v4

/* Purple Haze to Violaceous — https://swatchly.xyz/palette/80759f-bfd6ff-2f609a-3e3b6c-bd94cd */
@theme {
  --color-purple-haze: #80759f;
  --color-purple-haze-50: #f4f1ff;
  --color-purple-haze-100: #eae3ff;
  --color-purple-haze-200: #d5ccf0;
  --color-purple-haze-300: #bdb3db;
  --color-purple-haze-400: #9d92bc;
  --color-purple-haze-500: #80759f;
  --color-purple-haze-600: #675d84;
  --color-purple-haze-700: #52496c;
  --color-purple-haze-800: #413857;
  --color-purple-haze-900: #322b45;
  --color-purple-haze-950: #201a2d;
  --color-oh-boy: #bfd6ff;
  --color-oh-boy-50: #edf4ff;
  --color-oh-boy-100: #deeaff;
  --color-oh-boy-200: #bfd6ff;
  --color-oh-boy-300: #acc0e2;
  --color-oh-boy-400: #8ca1c6;
  --color-oh-boy-500: #7186ab;
  --color-oh-boy-600: #586b8f;
  --color-oh-boy-700: #435575;
  --color-oh-boy-800: #33425e;
  --color-oh-boy-900: #26334a;
  --color-oh-boy-950: #161f30;
  --color-starry-night: #2f609a;
  --color-starry-night-50: #eff6ff;
  --color-starry-night-100: #deedff;
  --color-starry-night-200: #c0dcff;
  --color-starry-night-300: #9cc8ff;
  --color-starry-night-400: #79aae6;
  --color-starry-night-500: #5d90cd;
  --color-starry-night-600: #4576b1;
  --color-starry-night-700: #2f609a;
  --color-starry-night-800: #214b7c;
  --color-starry-night-900: #153963;
  --color-starry-night-950: #092442;
  --color-storm-is-coming: #3e3b6c;
  --color-storm-is-coming-50: #f4f4ff;
  --color-storm-is-coming-100: #e8e9ff;
  --color-storm-is-coming-200: #d2d3ff;
  --color-storm-is-coming-300: #bbbbed;
  --color-storm-is-coming-400: #9b9bd1;
  --color-storm-is-coming-500: #807fb6;
  --color-storm-is-coming-600: #666599;
  --color-storm-is-coming-700: #514f7e;
  --color-storm-is-coming-800: #3e3b6c;
  --color-storm-is-coming-900: #302e51;
  --color-storm-is-coming-950: #1d1c35;
  --color-violaceous: #bd94cd;
  --color-violaceous-50: #fcf3ff;
  --color-violaceous-100: #f8e6ff;
  --color-violaceous-200: #eccef9;
  --color-violaceous-300: #d9b6e7;
  --color-violaceous-400: #bd94cd;
  --color-violaceous-500: #a078af;
  --color-violaceous-600: #835d92;
  --color-violaceous-700: #6a4777;
  --color-violaceous-800: #54365f;
  --color-violaceous-900: #41274b;
  --color-violaceous-950: #291730;
}