Light Blush to Cloudless Color Palette

About this palette

Light Blush to Cloudless is a 5-color pastel, light palette: #E6C1C6 (Light Blush), #FFE9DA (Blossom), #EED59D (Igniting), #BCD0AB (Morris Leaf), #E0EBFF (Cloudless). It mixes pink, white, yellow, green tones and feels warm overall. The strongest text pairing is #FFE9DA on #BCD0AB with a contrast ratio of 1.41:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Light Blush	rgb(230, 193, 198)	hsl(352, 43%, 83%)
Blossom	rgb(255, 233, 218)	hsl(24, 100%, 93%)
Igniting	rgb(238, 213, 157)	hsl(41, 70%, 77%)
Morris Leaf	rgb(188, 208, 171)	hsl(92, 28%, 74%)
Cloudless	rgb(224, 235, 255)	hsl(219, 100%, 94%)

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

/* Light Blush to Cloudless — https://swatchly.xyz/palette/e6c1c6-ffe9da-eed59d-bcd0ab-e0ebff */
:root {
  --light-blush: #e6c1c6;
  --blossom: #ffe9da;
  --igniting: #eed59d;
  --morris-leaf: #bcd0ab;
  --cloudless: #e0ebff;
}

Tailwind CSS v4

/* Light Blush to Cloudless — https://swatchly.xyz/palette/e6c1c6-ffe9da-eed59d-bcd0ab-e0ebff */
@theme {
  --color-light-blush: #e6c1c6;
  --color-light-blush-50: #fff9fa;
  --color-light-blush-100: #ffeef0;
  --color-light-blush-200: #f3d9dd;
  --color-light-blush-300: #e6c1c6;
  --color-light-blush-400: #c2a0a5;
  --color-light-blush-500: #a58388;
  --color-light-blush-600: #87676c;
  --color-light-blush-700: #6d4f54;
  --color-light-blush-800: #553c40;
  --color-light-blush-900: #412c2f;
  --color-light-blush-950: #2a1a1d;
  --color-blossom: #ffe9da;
  --color-blossom-50: #fff5ee;
  --color-blossom-100: #ffe9da;
  --color-blossom-200: #e6d6cb;
  --color-blossom-300: #d1bfb2;
  --color-blossom-400: #b29e91;
  --color-blossom-500: #968375;
  --color-blossom-600: #7b685b;
  --color-blossom-700: #625146;
  --color-blossom-800: #4e3f35;
  --color-blossom-900: #3c3027;
  --color-blossom-950: #261d17;
  --color-igniting: #eed59d;
  --color-igniting-50: #fff4dd;
  --color-igniting-100: #f9eac8;
  --color-igniting-200: #eed59d;
  --color-igniting-300: #d4bf90;
  --color-igniting-400: #b69f6b;
  --color-igniting-500: #9b834e;
  --color-igniting-600: #7f6934;
  --color-igniting-700: #675221;
  --color-igniting-800: #514013;
  --color-igniting-900: #40310a;
  --color-igniting-950: #281e03;
  --color-morris-leaf: #bcd0ab;
  --color-morris-leaf-50: #f2fde9;
  --color-morris-leaf-100: #e9f5df;
  --color-morris-leaf-200: #d5e3c9;
  --color-morris-leaf-300: #bcd0ab;
  --color-morris-leaf-400: #9cae8d;
  --color-morris-leaf-500: #7f926f;
  --color-morris-leaf-600: #647655;
  --color-morris-leaf-700: #4d5d3f;
  --color-morris-leaf-800: #3b492e;
  --color-morris-leaf-900: #2c3721;
  --color-morris-leaf-950: #1a2212;
  --color-cloudless: #e0ebff;
  --color-cloudless-50: #eff5ff;
  --color-cloudless-100: #e0ebff;
  --color-cloudless-200: #cfd7e6;
  --color-cloudless-300: #b8c1d1;
  --color-cloudless-400: #98a2b3;
  --color-cloudless-500: #7c8698;
  --color-cloudless-600: #636c7d;
  --color-cloudless-700: #4d5665;
  --color-cloudless-800: #3b4350;
  --color-cloudless-900: #2d333e;
  --color-cloudless-950: #1b1f27;
}