Purple Rain to Ballet Slippers Color Palette

About this palette

Purple Rain to Ballet Slippers is a 5-color vibrant, cool palette: #7946C3 (Purple Rain), #0098BC (Blue Ocean), #8DA000 (Noxious), #A889FF (Periwinkle), #FFA7B5 (Ballet Slippers). It mixes purple, blue, green, pink tones and feels cool overall. The strongest text pairing is #7946C3 on #FFA7B5 with a contrast ratio of 3.29:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Purple Rain	rgb(121, 70, 195)	hsl(264, 51%, 52%)
Blue Ocean	rgb(0, 152, 188)	hsl(191, 100%, 37%)
Noxious	rgb(141, 160, 0)	hsl(67, 100%, 31%)
Periwinkle	rgb(168, 137, 255)	hsl(256, 100%, 77%)
Ballet Slippers	rgb(255, 167, 181)	hsl(350, 100%, 83%)

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.

Aa3.29:1 Poor#7946C3 on #FFA7B5
Aa3.29:1 Poor#FFA7B5 on #7946C3

Color blindness preview

CSS variables

/* Purple Rain to Ballet Slippers — https://swatchly.xyz/palette/7946c3-0098bc-8da000-a889ff-ffa7b5 */
:root {
  --purple-rain: #7946c3;
  --blue-ocean: #0098bc;
  --noxious: #8da000;
  --periwinkle: #a889ff;
  --ballet-slippers: #ffa7b5;
}

Tailwind CSS v4

/* Purple Rain to Ballet Slippers — https://swatchly.xyz/palette/7946c3-0098bc-8da000-a889ff-ffa7b5 */
@theme {
  --color-purple-rain: #7946c3;
  --color-purple-rain-50: #f6f3ff;
  --color-purple-rain-100: #ede6ff;
  --color-purple-rain-200: #dccdff;
  --color-purple-rain-300: #c8afff;
  --color-purple-rain-400: #af82ff;
  --color-purple-rain-500: #9463e2;
  --color-purple-rain-600: #7946c3;
  --color-purple-rain-700: #6132a2;
  --color-purple-rain-800: #4d2285;
  --color-purple-rain-900: #3d176b;
  --color-purple-rain-950: #260b48;
  --color-blue-ocean: #0098bc;
  --color-blue-ocean-50: #e9f9ff;
  --color-blue-ocean-100: #d2f3ff;
  --color-blue-ocean-200: #9ee5ff;
  --color-blue-ocean-300: #75d2f1;
  --color-blue-ocean-400: #43b3d6;
  --color-blue-ocean-500: #0098bc;
  --color-blue-ocean-600: #007a98;
  --color-blue-ocean-700: #006179;
  --color-blue-ocean-800: #004c5f;
  --color-blue-ocean-900: #003a4a;
  --color-blue-ocean-950: #00242f;
  --color-noxious: #8da000;
  --color-noxious-50: #ebf9b4;
  --color-noxious-100: #deee9f;
  --color-noxious-200: #c7d979;
  --color-noxious-300: #aec151;
  --color-noxious-400: #8da000;
  --color-noxious-500: #758500;
  --color-noxious-600: #5e6c00;
  --color-noxious-700: #4b5600;
  --color-noxious-800: #3b4400;
  --color-noxious-900: #2e3600;
  --color-noxious-950: #1d2200;
  --color-periwinkle: #a889ff;
  --color-periwinkle-50: #f5f3ff;
  --color-periwinkle-100: #ece7ff;
  --color-periwinkle-200: #d9d0ff;
  --color-periwinkle-300: #c4b4ff;
  --color-periwinkle-400: #a889ff;
  --color-periwinkle-500: #8d6de0;
  --color-periwinkle-600: #7352c0;
  --color-periwinkle-700: #5c3ca1;
  --color-periwinkle-800: #492b84;
  --color-periwinkle-900: #381f6b;
  --color-periwinkle-950: #231047;
  --color-ballet-slippers: #ffa7b5;
  --color-ballet-slippers-50: #fff3f5;
  --color-ballet-slippers-100: #ffe6e9;
  --color-ballet-slippers-200: #ffcad1;
  --color-ballet-slippers-300: #ffa7b5;
  --color-ballet-slippers-400: #da8996;
  --color-ballet-slippers-500: #bd6c7a;
  --color-ballet-slippers-600: #9f5160;
  --color-ballet-slippers-700: #833c4a;
  --color-ballet-slippers-800: #692c39;
  --color-ballet-slippers-900: #531f2a;
  --color-ballet-slippers-950: #361119;
}