Pleasant Purple to Night Snow Color Palette

About this palette

Pleasant Purple to Night Snow is a 5-color vibrant, cool palette: #883EBC (Pleasant Purple), #009099 (Oasis), #FF5351 (Grapefruit), #00BBB8 (Super Rare Jade), #A0CAFF (Night Snow). It mixes purple, turquoise, red, blue tones and feels cool overall. The strongest text pairing is #883EBC on #A0CAFF with a contrast ratio of 3.58:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pleasant Purple	rgb(136, 62, 188)	hsl(275, 50%, 49%)
Oasis	rgb(0, 144, 153)	hsl(184, 100%, 30%)
Grapefruit	rgb(255, 83, 81)	hsl(1, 100%, 66%)
Super Rare Jade	rgb(0, 187, 184)	hsl(179, 100%, 37%)
Night Snow	rgb(160, 202, 255)	hsl(213, 100%, 81%)

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.58:1 Poor#883EBC on #A0CAFF
Aa3.58:1 Poor#A0CAFF on #883EBC

Color blindness preview

CSS variables

/* Pleasant Purple to Night Snow — https://swatchly.xyz/palette/883ebc-009099-ff5351-00bbb8-a0caff */
:root {
  --pleasant-purple: #883ebc;
  --oasis: #009099;
  --grapefruit: #ff5351;
  --super-rare-jade: #00bbb8;
  --night-snow: #a0caff;
}

Tailwind CSS v4

/* Pleasant Purple to Night Snow — https://swatchly.xyz/palette/883ebc-009099-ff5351-00bbb8-a0caff */
@theme {
  --color-pleasant-purple: #883ebc;
  --color-pleasant-purple-50: #f8f2ff;
  --color-pleasant-purple-100: #f2e4ff;
  --color-pleasant-purple-200: #e5c9ff;
  --color-pleasant-purple-300: #d6a9ff;
  --color-pleasant-purple-400: #c07af7;
  --color-pleasant-purple-500: #a45bdb;
  --color-pleasant-purple-600: #883ebc;
  --color-pleasant-purple-700: #6e2b9c;
  --color-pleasant-purple-800: #581b80;
  --color-pleasant-purple-900: #461067;
  --color-pleasant-purple-950: #2d0645;
  --color-oasis: #009099;
  --color-oasis-50: #d7fcff;
  --color-oasis-100: #b6f6fb;
  --color-oasis-200: #95e3ea;
  --color-oasis-300: #70cdd4;
  --color-oasis-400: #3fadb6;
  --color-oasis-500: #009099;
  --color-oasis-600: #00747b;
  --color-oasis-700: #005c62;
  --color-oasis-800: #00494d;
  --color-oasis-900: #00383c;
  --color-oasis-950: #002427;
  --color-grapefruit: #ff5351;
  --color-grapefruit-50: #ffedeb;
  --color-grapefruit-100: #ffddd9;
  --color-grapefruit-200: #ffbeb8;
  --color-grapefruit-300: #ff9890;
  --color-grapefruit-400: #ff5351;
  --color-grapefruit-500: #e03337;
  --color-grapefruit-600: #bf091f;
  --color-grapefruit-700: #9b0015;
  --color-grapefruit-800: #7c000f;
  --color-grapefruit-900: #630009;
  --color-grapefruit-950: #430004;
  --color-super-rare-jade: #00bbb8;
  --color-super-rare-jade-50: #d8fffd;
  --color-super-rare-jade-100: #b0fdfa;
  --color-super-rare-jade-200: #8eece9;
  --color-super-rare-jade-300: #66d8d5;
  --color-super-rare-jade-400: #00bbb8;
  --color-super-rare-jade-500: #009c99;
  --color-super-rare-jade-600: #007d7b;
  --color-super-rare-jade-700: #006362;
  --color-super-rare-jade-800: #004e4c;
  --color-super-rare-jade-900: #003c3b;
  --color-super-rare-jade-950: #002525;
  --color-night-snow: #a0caff;
  --color-night-snow-50: #f4f9ff;
  --color-night-snow-100: #e5f0ff;
  --color-night-snow-200: #c6dfff;
  --color-night-snow-300: #a0caff;
  --color-night-snow-400: #82a9da;
  --color-night-snow-500: #658cbe;
  --color-night-snow-600: #4a70a0;
  --color-night-snow-700: #365883;
  --color-night-snow-800: #26446a;
  --color-night-snow-900: #1a3453;
  --color-night-snow-950: #0d2036;
}