Corfu Waters to Violet Kiss Color Palette

About this palette

Corfu Waters to Violet Kiss is a 5-color vibrant, cool palette: #0086AB (Corfu Waters), #DF4F62 (Cranberry Splash), #4895FF (Polar Glow), #00D178 (Seaweed), #FFA0CE (Violet Kiss). It mixes blue, red, green, pink tones and feels cool overall. The strongest text pairing is #0086AB on #FFA0CE with a contrast ratio of 2.24:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Corfu Waters	rgb(0, 134, 171)	hsl(193, 100%, 34%)
Cranberry Splash	rgb(223, 79, 98)	hsl(352, 69%, 59%)
Polar Glow	rgb(72, 149, 255)	hsl(215, 100%, 64%)
Seaweed	rgb(0, 209, 120)	hsl(154, 100%, 41%)
Violet Kiss	rgb(255, 160, 206)	hsl(331, 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.

Color blindness preview

CSS variables

/* Corfu Waters to Violet Kiss — https://swatchly.xyz/palette/0086ab-df4f62-4895ff-00d178-ffa0ce */
:root {
  --corfu-waters: #0086ab;
  --cranberry-splash: #df4f62;
  --polar-glow: #4895ff;
  --seaweed: #00d178;
  --violet-kiss: #ffa0ce;
}

Tailwind CSS v4

/* Corfu Waters to Violet Kiss — https://swatchly.xyz/palette/0086ab-df4f62-4895ff-00d178-ffa0ce */
@theme {
  --color-corfu-waters: #0086ab;
  --color-corfu-waters-50: #e3f6ff;
  --color-corfu-waters-100: #c6eeff;
  --color-corfu-waters-200: #92ddfc;
  --color-corfu-waters-300: #6dc5e8;
  --color-corfu-waters-400: #3ca4c9;
  --color-corfu-waters-500: #0086ab;
  --color-corfu-waters-600: #006c8a;
  --color-corfu-waters-700: #00566f;
  --color-corfu-waters-800: #004458;
  --color-corfu-waters-900: #003546;
  --color-corfu-waters-950: #00222e;
  --color-cranberry-splash: #df4f62;
  --color-cranberry-splash-50: #fff2f2;
  --color-cranberry-splash-100: #ffe5e5;
  --color-cranberry-splash-200: #ffc9cb;
  --color-cranberry-splash-300: #ffa6ab;
  --color-cranberry-splash-400: #fb707e;
  --color-cranberry-splash-500: #df4f62;
  --color-cranberry-splash-600: #be3149;
  --color-cranberry-splash-700: #9e1835;
  --color-cranberry-splash-800: #810326;
  --color-cranberry-splash-900: #65001b;
  --color-cranberry-splash-950: #42000f;
  --color-polar-glow: #4895ff;
  --color-polar-glow-50: #e9f2ff;
  --color-polar-glow-100: #d5e7ff;
  --color-polar-glow-200: #b2d2ff;
  --color-polar-glow-300: #88b9ff;
  --color-polar-glow-400: #4895ff;
  --color-polar-glow-500: #2d7ae2;
  --color-polar-glow-600: #1161c3;
  --color-polar-glow-700: #004ca2;
  --color-polar-glow-800: #003c82;
  --color-polar-glow-900: #002e69;
  --color-polar-glow-950: #001d47;
  --color-seaweed: #00d178;
  --color-seaweed-50: #effff4;
  --color-seaweed-100: #d5ffe2;
  --color-seaweed-200: #99fbbc;
  --color-seaweed-300: #73eaa1;
  --color-seaweed-400: #00d178;
  --color-seaweed-500: #00ae63;
  --color-seaweed-600: #008b4e;
  --color-seaweed-700: #006e3d;
  --color-seaweed-800: #00552e;
  --color-seaweed-900: #004021;
  --color-seaweed-950: #002712;
  --color-violet-kiss: #ffa0ce;
  --color-violet-kiss-50: #fff2f7;
  --color-violet-kiss-100: #ffe3ef;
  --color-violet-kiss-200: #ffc6e0;
  --color-violet-kiss-300: #ffa0ce;
  --color-violet-kiss-400: #da82ad;
  --color-violet-kiss-500: #be6592;
  --color-violet-kiss-600: #9f4b77;
  --color-violet-kiss-700: #83365f;
  --color-violet-kiss-800: #69264b;
  --color-violet-kiss-900: #531a3a;
  --color-violet-kiss-950: #370d24;
}