Periwinkle to Pristine Oceanic Color Palette

About this palette

Periwinkle to Pristine Oceanic is a 5-color vibrant, cool, neon palette: #938FFF (Periwinkle), #E139B5 (Loudicious Pink), #0077B6 (Brilliant Blue), #FF7D2C (Heat Wave), #00D2C3 (Pristine Oceanic). It mixes purple, pink, blue, orange, turquoise tones and feels cool overall. The strongest text pairing is #0077B6 on #00D2C3 with a contrast ratio of 2.55:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Periwinkle	rgb(147, 143, 255)	hsl(242, 100%, 78%)
Loudicious Pink	rgb(225, 57, 181)	hsl(316, 74%, 55%)
Brilliant Blue	rgb(0, 119, 182)	hsl(201, 100%, 36%)
Heat Wave	rgb(255, 125, 44)	hsl(23, 100%, 59%)
Pristine Oceanic	rgb(0, 210, 195)	hsl(176, 100%, 41%)

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

/* Periwinkle to Pristine Oceanic — https://swatchly.xyz/palette/938fff-e139b5-0077b6-ff7d2c-00d2c3 */
:root {
  --periwinkle: #938fff;
  --loudicious-pink: #e139b5;
  --brilliant-blue: #0077b6;
  --heat-wave: #ff7d2c;
  --pristine-oceanic: #00d2c3;
}

Tailwind CSS v4

/* Periwinkle to Pristine Oceanic — https://swatchly.xyz/palette/938fff-e139b5-0077b6-ff7d2c-00d2c3 */
@theme {
  --color-periwinkle: #938fff;
  --color-periwinkle-50: #f2f3ff;
  --color-periwinkle-100: #e6e8ff;
  --color-periwinkle-200: #cfd1ff;
  --color-periwinkle-300: #b5b7ff;
  --color-periwinkle-400: #938fff;
  --color-periwinkle-500: #7973e0;
  --color-periwinkle-600: #6159c1;
  --color-periwinkle-700: #4c43a2;
  --color-periwinkle-800: #3b3285;
  --color-periwinkle-900: #2d246c;
  --color-periwinkle-950: #1c1548;
  --color-loudicious-pink: #e139b5;
  --color-loudicious-pink-50: #fff2fa;
  --color-loudicious-pink-100: #ffe4f4;
  --color-loudicious-pink-200: #ffc7ea;
  --color-loudicious-pink-300: #ffa1df;
  --color-loudicious-pink-400: #fc60cf;
  --color-loudicious-pink-500: #e139b5;
  --color-loudicious-pink-600: #bf0797;
  --color-loudicious-pink-700: #9a0079;
  --color-loudicious-pink-800: #79005f;
  --color-loudicious-pink-900: #5f0049;
  --color-loudicious-pink-950: #3d002e;
  --color-brilliant-blue: #0077b6;
  --color-brilliant-blue-50: #edf7ff;
  --color-brilliant-blue-100: #dcefff;
  --color-brilliant-blue-200: #b7dfff;
  --color-brilliant-blue-300: #89cbff;
  --color-brilliant-blue-400: #56aded;
  --color-brilliant-blue-500: #3192d2;
  --color-brilliant-blue-600: #0077b6;
  --color-brilliant-blue-700: #005e92;
  --color-brilliant-blue-800: #004a73;
  --color-brilliant-blue-900: #00385a;
  --color-brilliant-blue-950: #00233a;
  --color-heat-wave: #ff7d2c;
  --color-heat-wave-50: #fff5f0;
  --color-heat-wave-100: #ffe9df;
  --color-heat-wave-200: #ffd0b9;
  --color-heat-wave-300: #ffb189;
  --color-heat-wave-400: #ff7d2c;
  --color-heat-wave-500: #db6200;
  --color-heat-wave-600: #b14e00;
  --color-heat-wave-700: #8d3c00;
  --color-heat-wave-800: #6f2e00;
  --color-heat-wave-900: #562200;
  --color-heat-wave-950: #371300;
  --color-pristine-oceanic: #00d2c3;
  --color-pristine-oceanic-50: #bdfff6;
  --color-pristine-oceanic-100: #9bf8ed;
  --color-pristine-oceanic-200: #71e6d9;
  --color-pristine-oceanic-300: #00d2c3;
  --color-pristine-oceanic-400: #00b0a4;
  --color-pristine-oceanic-500: #009389;
  --color-pristine-oceanic-600: #00776f;
  --color-pristine-oceanic-700: #006058;
  --color-pristine-oceanic-800: #004c46;
  --color-pristine-oceanic-900: #003c37;
  --color-pristine-oceanic-950: #002622;
}