Purple Pleasures to Fish Boy Color Palette

About this palette

Purple Pleasures to Fish Boy is a 5-color cool palette: #8748A6 (Purple Pleasures), #FFE4C6 (Bisque), #B06FC0 (Lavendless), #5A3A00 (Pineapple), #00E4E0 (Fish Boy). It mixes purple, orange, brown, turquoise tones and feels cool overall. The strongest text pairing is #FFE4C6 on #5A3A00 with a contrast ratio of 8.41:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Purple Pleasures	rgb(135, 72, 166)	hsl(280, 39%, 47%)
Bisque	rgb(255, 228, 198)	hsl(32, 100%, 89%)
Lavendless	rgb(176, 111, 192)	hsl(288, 39%, 59%)
Pineapple	rgb(90, 58, 0)	hsl(39, 100%, 18%)
Fish Boy	rgb(0, 228, 224)	hsl(179, 100%, 45%)

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.

Aa8.41:1 Very good#FFE4C6 on #5A3A00
Aa8.41:1 Very good#5A3A00 on #FFE4C6
Aa6.46:1 Good#5A3A00 on #00E4E0
Aa6.46:1 Good#00E4E0 on #5A3A00
Aa4.89:1 Good#8748A6 on #FFE4C6
Aa4.89:1 Good#FFE4C6 on #8748A6
Aa3.76:1 Poor#8748A6 on #00E4E0
Aa3.76:1 Poor#00E4E0 on #8748A6

Color blindness preview

CSS variables

/* Purple Pleasures to Fish Boy — https://swatchly.xyz/palette/8748a6-ffe4c6-b06fc0-5a3a00-00e4e0 */
:root {
  --purple-pleasures: #8748a6;
  --bisque: #ffe4c6;
  --lavendless: #b06fc0;
  --pineapple: #5a3a00;
  --fish-boy: #00e4e0;
}

Tailwind CSS v4

/* Purple Pleasures to Fish Boy — https://swatchly.xyz/palette/8748a6-ffe4c6-b06fc0-5a3a00-00e4e0 */
@theme {
  --color-purple-pleasures: #8748a6;
  --color-purple-pleasures-50: #faf1ff;
  --color-purple-pleasures-100: #f5e3ff;
  --color-purple-pleasures-200: #eac6ff;
  --color-purple-pleasures-300: #dda5fc;
  --color-purple-pleasures-400: #bf81e0;
  --color-purple-pleasures-500: #a364c4;
  --color-purple-pleasures-600: #8748a6;
  --color-purple-pleasures-700: #6d3589;
  --color-purple-pleasures-800: #57256f;
  --color-purple-pleasures-900: #451a59;
  --color-purple-pleasures-950: #2c0d3a;
  --color-bisque: #ffe4c6;
  --color-bisque-50: #fff1e1;
  --color-bisque-100: #ffe4c6;
  --color-bisque-200: #e6d2bc;
  --color-bisque-300: #d2bba2;
  --color-bisque-400: #b49c81;
  --color-bisque-500: #998165;
  --color-bisque-600: #7e674d;
  --color-bisque-700: #665139;
  --color-bisque-800: #513f2a;
  --color-bisque-900: #3f301e;
  --color-bisque-950: #281d10;
  --color-lavendless: #b06fc0;
  --color-lavendless-50: #fcf2ff;
  --color-lavendless-100: #fae5ff;
  --color-lavendless-200: #f4c9ff;
  --color-lavendless-300: #e6adf4;
  --color-lavendless-400: #ca8bda;
  --color-lavendless-500: #b06fc0;
  --color-lavendless-600: #9254a2;
  --color-lavendless-700: #773d85;
  --color-lavendless-800: #5f2c6b;
  --color-lavendless-900: #4a1f55;
  --color-lavendless-950: #301037;
  --color-pineapple: #5a3a00;
  --color-pineapple-50: #fff3e4;
  --color-pineapple-100: #ffe7c8;
  --color-pineapple-200: #efd3ad;
  --color-pineapple-300: #dbbb90;
  --color-pineapple-400: #be9a6b;
  --color-pineapple-500: #a27f4d;
  --color-pineapple-600: #866434;
  --color-pineapple-700: #6d4e21;
  --color-pineapple-800: #5a3a00;
  --color-pineapple-900: #442d0a;
  --color-pineapple-950: #2b1b03;
  --color-fish-boy: #00e4e0;
  --color-fish-boy-50: #e4fffd;
  --color-fish-boy-100: #bafffc;
  --color-fish-boy-200: #86f3ef;
  --color-fish-boy-300: #00e4e0;
  --color-fish-boy-400: #00bfbc;
  --color-fish-boy-500: #009f9c;
  --color-fish-boy-600: #007f7d;
  --color-fish-boy-700: #006563;
  --color-fish-boy-800: #004e4d;
  --color-fish-boy-900: #003b3a;
  --color-fish-boy-950: #002524;
}