Exotic Escape to Coral Kiss Color Palette

About this palette

Exotic Escape to Coral Kiss is a 5-color pastel, light, cool palette: #9AD7D5 (Exotic Escape), #AAD7A5 (Fizz), #FFC4DB (Sugarwinkle), #C4F4FF (Pale Sky), #FFDECA (Coral Kiss). It mixes turquoise, green, pink, orange tones and feels cool overall. The strongest text pairing is #AAD7A5 on #C4F4FF with a contrast ratio of 1.37:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Exotic Escape	rgb(154, 215, 213)	hsl(178, 43%, 72%)
Fizz	rgb(170, 215, 165)	hsl(114, 38%, 75%)
Sugarwinkle	rgb(255, 196, 219)	hsl(337, 100%, 88%)
Pale Sky	rgb(196, 244, 255)	hsl(191, 100%, 88%)
Coral Kiss	rgb(255, 222, 202)	hsl(23, 100%, 90%)

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

/* Exotic Escape to Coral Kiss — https://swatchly.xyz/palette/9ad7d5-aad7a5-ffc4db-c4f4ff-ffdeca */
:root {
  --exotic-escape: #9ad7d5;
  --fizz: #aad7a5;
  --sugarwinkle: #ffc4db;
  --pale-sky: #c4f4ff;
  --coral-kiss: #ffdeca;
}

Tailwind CSS v4

/* Exotic Escape to Coral Kiss — https://swatchly.xyz/palette/9ad7d5-aad7a5-ffc4db-c4f4ff-ffdeca */
@theme {
  --color-exotic-escape: #9ad7d5;
  --color-exotic-escape-50: #e9fffe;
  --color-exotic-escape-100: #d7f9f8;
  --color-exotic-escape-200: #bfe9e7;
  --color-exotic-escape-300: #9ad7d5;
  --color-exotic-escape-400: #7db5b3;
  --color-exotic-escape-500: #5d9896;
  --color-exotic-escape-600: #417b7a;
  --color-exotic-escape-700: #2b6261;
  --color-exotic-escape-800: #1b4c4b;
  --color-exotic-escape-900: #0f3a39;
  --color-exotic-escape-950: #062424;
  --color-fizz: #aad7a5;
  --color-fizz-50: #eeffec;
  --color-fizz-100: #dff9dc;
  --color-fizz-200: #c9e9c5;
  --color-fizz-300: #aad7a5;
  --color-fizz-400: #8cb587;
  --color-fizz-500: #6e9869;
  --color-fizz-600: #537c4e;
  --color-fizz-700: #3d6239;
  --color-fizz-800: #2c4d29;
  --color-fizz-900: #1f3b1d;
  --color-fizz-950: #11250f;
  --color-sugarwinkle: #ffc4db;
  --color-sugarwinkle-50: #fff1f6;
  --color-sugarwinkle-100: #ffe2ed;
  --color-sugarwinkle-200: #ffc4db;
  --color-sugarwinkle-300: #e2b1c4;
  --color-sugarwinkle-400: #c590a5;
  --color-sugarwinkle-500: #a97489;
  --color-sugarwinkle-600: #8d5a6f;
  --color-sugarwinkle-700: #734558;
  --color-sugarwinkle-800: #5c3445;
  --color-sugarwinkle-900: #482735;
  --color-sugarwinkle-950: #2e1621;
  --color-pale-sky: #c4f4ff;
  --color-pale-sky-50: #e2f9ff;
  --color-pale-sky-100: #c4f4ff;
  --color-pale-sky-200: #bbdee6;
  --color-pale-sky-300: #a1c8d1;
  --color-pale-sky-400: #7eaab4;
  --color-pale-sky-500: #618e98;
  --color-pale-sky-600: #48747d;
  --color-pale-sky-700: #345c65;
  --color-pale-sky-800: #254850;
  --color-pale-sky-900: #19383e;
  --color-pale-sky-950: #0d2328;
  --color-coral-kiss: #ffdeca;
  --color-coral-kiss-50: #ffece1;
  --color-coral-kiss-100: #ffdeca;
  --color-coral-kiss-200: #e6cdbe;
  --color-coral-kiss-300: #d3b7a6;
  --color-coral-kiss-400: #b69886;
  --color-coral-kiss-500: #9b7d6b;
  --color-coral-kiss-600: #806453;
  --color-coral-kiss-700: #684f3f;
  --color-coral-kiss-800: #533d2f;
  --color-coral-kiss-900: #412e23;
  --color-coral-kiss-950: #291c14;
}