Pristine Oceanic to Murasaki Color Palette

About this palette

Pristine Oceanic to Murasaki is a 5-color cool palette: #00C9C2 (Pristine Oceanic), #863DA6 (Pleasant Purple), #FFD9A5 (Prosecco), #9D7A1E (Fernweh), #542A56 (Murasaki). It mixes turquoise, purple, yellow tones and feels cool overall. The strongest text pairing is #FFD9A5 on #542A56 with a contrast ratio of 8.53:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pristine Oceanic	rgb(0, 201, 194)	hsl(178, 100%, 39%)
Pleasant Purple	rgb(134, 61, 166)	hsl(282, 46%, 45%)
Prosecco	rgb(255, 217, 165)	hsl(35, 100%, 82%)
Fernweh	rgb(157, 122, 30)	hsl(43, 68%, 37%)
Murasaki	rgb(84, 42, 86)	hsl(297, 34%, 25%)

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.53:1 Very good#FFD9A5 on #542A56
Aa8.53:1 Very good#542A56 on #FFD9A5
Aa5.50:1 Good#00C9C2 on #542A56
Aa5.50:1 Good#542A56 on #00C9C2
Aa4.86:1 Good#863DA6 on #FFD9A5
Aa4.86:1 Good#FFD9A5 on #863DA6
Aa3.14:1 Poor#00C9C2 on #863DA6
Aa3.14:1 Poor#863DA6 on #00C9C2

Color blindness preview

CSS variables

/* Pristine Oceanic to Murasaki — https://swatchly.xyz/palette/00c9c2-863da6-ffd9a5-9d7a1e-542a56 */
:root {
  --pristine-oceanic: #00c9c2;
  --pleasant-purple: #863da6;
  --prosecco: #ffd9a5;
  --fernweh: #9d7a1e;
  --murasaki: #542a56;
}

Tailwind CSS v4

/* Pristine Oceanic to Murasaki — https://swatchly.xyz/palette/00c9c2-863da6-ffd9a5-9d7a1e-542a56 */
@theme {
  --color-pristine-oceanic: #00c9c2;
  --color-pristine-oceanic-50: #ebfffd;
  --color-pristine-oceanic-100: #c9fffb;
  --color-pristine-oceanic-200: #98f5ef;
  --color-pristine-oceanic-300: #72e3dc;
  --color-pristine-oceanic-400: #00c9c2;
  --color-pristine-oceanic-500: #00a7a1;
  --color-pristine-oceanic-600: #008681;
  --color-pristine-oceanic-700: #006a66;
  --color-pristine-oceanic-800: #00524f;
  --color-pristine-oceanic-900: #003e3b;
  --color-pristine-oceanic-950: #002524;
  --color-pleasant-purple: #863da6;
  --color-pleasant-purple-50: #faf1ff;
  --color-pleasant-purple-100: #f5e1ff;
  --color-pleasant-purple-200: #ebc3ff;
  --color-pleasant-purple-300: #df9eff;
  --color-pleasant-purple-400: #c179e3;
  --color-pleasant-purple-500: #a35ac5;
  --color-pleasant-purple-600: #863da6;
  --color-pleasant-purple-700: #6c2c88;
  --color-pleasant-purple-800: #571e6f;
  --color-pleasant-purple-900: #451459;
  --color-pleasant-purple-950: #2c093b;
  --color-prosecco: #ffd9a5;
  --color-prosecco-50: #fffaf3;
  --color-prosecco-100: #fff0db;
  --color-prosecco-200: #ffd9a5;
  --color-prosecco-300: #e1c299;
  --color-prosecco-400: #c3a071;
  --color-prosecco-500: #a68352;
  --color-prosecco-600: #896737;
  --color-prosecco-700: #6e5023;
  --color-prosecco-800: #573d14;
  --color-prosecco-900: #442e0a;
  --color-prosecco-950: #2c1c03;
  --color-fernweh: #9d7a1e;
  --color-fernweh-50: #fff3d8;
  --color-fernweh-100: #fee6b3;
  --color-fernweh-200: #edd193;
  --color-fernweh-300: #d8b870;
  --color-fernweh-400: #ba9744;
  --color-fernweh-500: #9d7a1e;
  --color-fernweh-600: #816100;
  --color-fernweh-700: #674d00;
  --color-fernweh-800: #513c00;
  --color-fernweh-900: #3f2e00;
  --color-fernweh-950: #281c00;
  --color-murasaki: #542a56;
  --color-murasaki-50: #ffefff;
  --color-murasaki-100: #ffe0ff;
  --color-murasaki-200: #efc9f0;
  --color-murasaki-300: #daafdb;
  --color-murasaki-400: #bb8dbd;
  --color-murasaki-500: #9f70a0;
  --color-murasaki-600: #815583;
  --color-murasaki-700: #674069;
  --color-murasaki-800: #542a56;
  --color-murasaki-900: #3e2240;
  --color-murasaki-950: #271328;
}