Foggy Love to Cloud Break Color Palette

About this palette

Foggy Love to Cloud Break is a 4-color pastel, light palette: #D7C7E5 (Foggy Love), #C2E5FC (Salty Ice), #E2C6AB (Larb Gai), #F1F3FF (Cloud Break). It mixes purple, blue, orange, white tones and feels cool overall. The strongest text pairing is #E2C6AB on #F1F3FF with a contrast ratio of 1.47:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Foggy Love	rgb(215, 199, 229)	hsl(272, 37%, 84%)
Salty Ice	rgb(194, 229, 252)	hsl(204, 91%, 87%)
Larb Gai	rgb(226, 198, 171)	hsl(29, 49%, 78%)
Cloud Break	rgb(241, 243, 255)	hsl(231, 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

/* Foggy Love to Cloud Break — https://swatchly.xyz/palette/d7c7e5-c2e5fc-e2c6ab-f1f3ff */
:root {
  --foggy-love: #d7c7e5;
  --salty-ice: #c2e5fc;
  --larb-gai: #e2c6ab;
  --cloud-break: #f1f3ff;
}

Tailwind CSS v4

/* Foggy Love to Cloud Break — https://swatchly.xyz/palette/d7c7e5-c2e5fc-e2c6ab-f1f3ff */
@theme {
  --color-foggy-love: #d7c7e5;
  --color-foggy-love-50: #f4eafd;
  --color-foggy-love-100: #e9def3;
  --color-foggy-love-200: #d7c7e5;
  --color-foggy-love-300: #c1b3cd;
  --color-foggy-love-400: #a495b1;
  --color-foggy-love-500: #8a7b97;
  --color-foggy-love-600: #71627c;
  --color-foggy-love-700: #5b4e65;
  --color-foggy-love-800: #483d52;
  --color-foggy-love-900: #382e40;
  --color-foggy-love-950: #231c28;
  --color-salty-ice: #c2e5fc;
  --color-salty-ice-50: #f6fbff;
  --color-salty-ice-100: #e5f4ff;
  --color-salty-ice-200: #c2e5fc;
  --color-salty-ice-300: #b0ccde;
  --color-salty-ice-400: #8cabc0;
  --color-salty-ice-500: #6e8fa4;
  --color-salty-ice-600: #537387;
  --color-salty-ice-700: #3e5a6d;
  --color-salty-ice-800: #2d4655;
  --color-salty-ice-900: #213643;
  --color-salty-ice-950: #12212b;
  --color-larb-gai: #e2c6ab;
  --color-larb-gai-50: #fffaf4;
  --color-larb-gai-100: #fff0e1;
  --color-larb-gai-200: #f0ddca;
  --color-larb-gai-300: #e2c6ab;
  --color-larb-gai-400: #bea58c;
  --color-larb-gai-500: #a1876e;
  --color-larb-gai-600: #846b53;
  --color-larb-gai-700: #6a533d;
  --color-larb-gai-800: #53402c;
  --color-larb-gai-900: #3f2f1f;
  --color-larb-gai-950: #281d11;
  --color-cloud-break: #f1f3ff;
  --color-cloud-break-50: #f1f3ff;
  --color-cloud-break-100: #e8eaf1;
  --color-cloud-break-200: #d4d6df;
  --color-cloud-break-300: #bec0c9;
  --color-cloud-break-400: #9fa0ab;
  --color-cloud-break-500: #838590;
  --color-cloud-break-600: #696b75;
  --color-cloud-break-700: #53555e;
  --color-cloud-break-800: #40424a;
  --color-cloud-break-900: #313239;
  --color-cloud-break-950: #1e1f24;
}