Purple Pizzazz to Puffy Cloud Color Palette

About this palette

Purple Pizzazz to Puffy Cloud is a 4-color vibrant, light, neon palette: #FF3DD8 (Purple Pizzazz), #FF9089 (Mona Lisa), #00F291 (Emerald Ice Palace), #DEE0FF (Puffy Cloud). It mixes pink, red, green, purple tones and feels balanced overall. The strongest text pairing is #FF3DD8 on #DEE0FF with a contrast ratio of 2.35:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Purple Pizzazz	rgb(255, 61, 216)	hsl(312, 100%, 62%)
Mona Lisa	rgb(255, 144, 137)	hsl(4, 100%, 77%)
Emerald Ice Palace	rgb(0, 242, 145)	hsl(156, 100%, 47%)
Puffy Cloud	rgb(222, 224, 255)	hsl(236, 100%, 94%)

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.

Color blindness preview

CSS variables

/* Purple Pizzazz to Puffy Cloud — https://swatchly.xyz/palette/ff3dd8-ff9089-00f291-dee0ff */
:root {
  --purple-pizzazz: #ff3dd8;
  --mona-lisa: #ff9089;
  --emerald-ice-palace: #00f291;
  --puffy-cloud: #dee0ff;
}

Tailwind CSS v4

/* Purple Pizzazz to Puffy Cloud — https://swatchly.xyz/palette/ff3dd8-ff9089-00f291-dee0ff */
@theme {
  --color-purple-pizzazz: #ff3dd8;
  --color-purple-pizzazz-50: #ffeffa;
  --color-purple-pizzazz-100: #ffdff5;
  --color-purple-pizzazz-200: #ffbeec;
  --color-purple-pizzazz-300: #ff94e2;
  --color-purple-pizzazz-400: #ff3dd8;
  --color-purple-pizzazz-500: #df00bb;
  --color-purple-pizzazz-600: #b50097;
  --color-purple-pizzazz-700: #910079;
  --color-purple-pizzazz-800: #73005f;
  --color-purple-pizzazz-900: #5a004b;
  --color-purple-pizzazz-950: #3b0030;
  --color-mona-lisa: #ff9089;
  --color-mona-lisa-50: #ffe9e6;
  --color-mona-lisa-100: #ffd8d4;
  --color-mona-lisa-200: #ffb8b2;
  --color-mona-lisa-300: #ff9089;
  --color-mona-lisa-400: #dd746e;
  --color-mona-lisa-500: #c25955;
  --color-mona-lisa-600: #a4413f;
  --color-mona-lisa-700: #892f2e;
  --color-mona-lisa-800: #702121;
  --color-mona-lisa-900: #5c1717;
  --color-mona-lisa-950: #3c0b0b;
  --color-emerald-ice-palace: #00f291;
  --color-emerald-ice-palace-50: #c0ffd6;
  --color-emerald-ice-palace-100: #8efdba;
  --color-emerald-ice-palace-200: #00f291;
  --color-emerald-ice-palace-300: #22d984;
  --color-emerald-ice-palace-400: #00b86d;
  --color-emerald-ice-palace-500: #009a5a;
  --color-emerald-ice-palace-600: #007d48;
  --color-emerald-ice-palace-700: #006539;
  --color-emerald-ice-palace-800: #00502c;
  --color-emerald-ice-palace-900: #003e21;
  --color-emerald-ice-palace-950: #002713;
  --color-puffy-cloud: #dee0ff;
  --color-puffy-cloud-50: #ebecff;
  --color-puffy-cloud-100: #dee0ff;
  --color-puffy-cloud-200: #cdcee6;
  --color-puffy-cloud-300: #b7b9d3;
  --color-puffy-cloud-400: #999bb7;
  --color-puffy-cloud-500: #7f819d;
  --color-puffy-cloud-600: #676882;
  --color-puffy-cloud-700: #52536b;
  --color-puffy-cloud-800: #3f4055;
  --color-puffy-cloud-900: #303143;
  --color-puffy-cloud-950: #1d1e2b;
}