Innocent Snowdrop to Cloud Break Color Palette

About this palette

Innocent Snowdrop to Cloud Break is a 4-color pastel, light palette: #D7C2FA (Innocent Snowdrop), #B0E1E9 (Opal), #FFE0C7 (Coral Kiss), #F4F1FF (Cloud Break). It mixes purple, turquoise, orange, white tones and feels cool overall. The strongest text pairing is #D7C2FA on #F4F1FF with a contrast ratio of 1.45:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Innocent Snowdrop	rgb(215, 194, 250)	hsl(262, 85%, 87%)
Opal	rgb(176, 225, 233)	hsl(188, 56%, 80%)
Coral Kiss	rgb(255, 224, 199)	hsl(27, 100%, 89%)
Cloud Break	rgb(244, 241, 255)	hsl(253, 100%, 97%)

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

/* Innocent Snowdrop to Cloud Break — https://swatchly.xyz/palette/d7c2fa-b0e1e9-ffe0c7-f4f1ff */
:root {
  --innocent-snowdrop: #d7c2fa;
  --opal: #b0e1e9;
  --coral-kiss: #ffe0c7;
  --cloud-break: #f4f1ff;
}

Tailwind CSS v4

/* Innocent Snowdrop to Cloud Break — https://swatchly.xyz/palette/d7c2fa-b0e1e9-ffe0c7-f4f1ff */
@theme {
  --color-innocent-snowdrop: #d7c2fa;
  --color-innocent-snowdrop-50: #f2eaff;
  --color-innocent-snowdrop-100: #e9dcff;
  --color-innocent-snowdrop-200: #d7c2fa;
  --color-innocent-snowdrop-300: #c1afdf;
  --color-innocent-snowdrop-400: #a490c4;
  --color-innocent-snowdrop-500: #8a76aa;
  --color-innocent-snowdrop-600: #715e8f;
  --color-innocent-snowdrop-700: #5b4a76;
  --color-innocent-snowdrop-800: #493960;
  --color-innocent-snowdrop-900: #382b4c;
  --color-innocent-snowdrop-950: #231a31;
  --color-opal: #b0e1e9;
  --color-opal-50: #e0fbff;
  --color-opal-100: #d3f1f6;
  --color-opal-200: #b0e1e9;
  --color-opal-300: #a0c9d0;
  --color-opal-400: #7daab2;
  --color-opal-500: #608f96;
  --color-opal-600: #47747b;
  --color-opal-700: #335d63;
  --color-opal-800: #24494f;
  --color-opal-900: #19383d;
  --color-opal-950: #0c2327;
  --color-coral-kiss: #ffe0c7;
  --color-coral-kiss-50: #ffeee0;
  --color-coral-kiss-100: #ffe0c7;
  --color-coral-kiss-200: #e6cfbc;
  --color-coral-kiss-300: #d2b8a4;
  --color-coral-kiss-400: #b59983;
  --color-coral-kiss-500: #9a7f68;
  --color-coral-kiss-600: #7f654f;
  --color-coral-kiss-700: #68503c;
  --color-coral-kiss-800: #523e2c;
  --color-coral-kiss-900: #402f20;
  --color-coral-kiss-950: #291c12;
  --color-cloud-break: #f4f1ff;
  --color-cloud-break-50: #f4f1ff;
  --color-cloud-break-100: #eae8f1;
  --color-cloud-break-200: #d7d5df;
  --color-cloud-break-300: #c1beca;
  --color-cloud-break-400: #a29fab;
  --color-cloud-break-500: #878490;
  --color-cloud-break-600: #6c6a76;
  --color-cloud-break-700: #56535e;
  --color-cloud-break-800: #43414a;
  --color-cloud-break-900: #333139;
  --color-cloud-break-950: #201e24;
}