Foundation White to Salmon Flush color palette

F1ECFFFoundation White D7D8FFIcy Plains B7E0BEMother Nature C6F0EBCaribbean CEC78AGolden Mist EEC9CESalmon Flush

Open in generator Export PNG, PDF, ASE…

About this palette

Foundation White to Salmon Flush is a 6-color pastel, light palette: #F1ECFF (Foundation White), #D7D8FF (Icy Plains), #B7E0BE (Mother Nature), #C6F0EB (Caribbean), #CEC78A (Golden Mist), #EEC9CE (Salmon Flush). It mixes white, purple, green, turquoise, yellow, pink tones and feels cool overall. The strongest text pairing is #F1ECFF on #CEC78A with a contrast ratio of 1.50:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Foundation White	rgb(241, 236, 255)	hsl(256, 100%, 96%)
Icy Plains	rgb(215, 216, 255)	hsl(238, 100%, 92%)
Mother Nature	rgb(183, 224, 190)	hsl(130, 40%, 80%)
Caribbean	rgb(198, 240, 235)	hsl(173, 58%, 86%)
Golden Mist	rgb(206, 199, 138)	hsl(54, 41%, 67%)
Salmon Flush	rgb(238, 201, 206)	hsl(352, 52%, 86%)

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

/* Foundation White to Salmon Flush — https://swatchly.xyz/palette/f1ecff-d7d8ff-b7e0be-c6f0eb-cec78a-eec9ce */
:root {
  --foundation-white: #f1ecff;
  --icy-plains: #d7d8ff;
  --mother-nature: #b7e0be;
  --caribbean: #c6f0eb;
  --golden-mist: #cec78a;
  --salmon-flush: #eec9ce;
}

Tailwind CSS v4

/* Foundation White to Salmon Flush — https://swatchly.xyz/palette/f1ecff-d7d8ff-b7e0be-c6f0eb-cec78a-eec9ce */
@theme {
  --color-foundation-white: #f1ecff;
  --color-foundation-white-50: #f9f7ff;
  --color-foundation-white-100: #f1ecff;
  --color-foundation-white-200: #dcd8e6;
  --color-foundation-white-300: #c5c1d0;
  --color-foundation-white-400: #a5a0b1;
  --color-foundation-white-500: #898495;
  --color-foundation-white-600: #6e697a;
  --color-foundation-white-700: #575361;
  --color-foundation-white-800: #44404d;
  --color-foundation-white-900: #34313c;
  --color-foundation-white-950: #201e25;
  --color-icy-plains: #d7d8ff;
  --color-icy-plains-50: #f7f7ff;
  --color-icy-plains-100: #ededff;
  --color-icy-plains-200: #d7d8ff;
  --color-icy-plains-300: #c0c1e1;
  --color-icy-plains-400: #a0a1c4;
  --color-icy-plains-500: #8484a8;
  --color-icy-plains-600: #69698b;
  --color-icy-plains-700: #525271;
  --color-icy-plains-800: #3f3f5a;
  --color-icy-plains-900: #303046;
  --color-icy-plains-950: #1d1d2d;
  --color-mother-nature: #b7e0be;
  --color-mother-nature-50: #e2fae6;
  --color-mother-nature-100: #d6f0da;
  --color-mother-nature-200: #b7e0be;
  --color-mother-nature-300: #a6c8ab;
  --color-mother-nature-400: #84aa8b;
  --color-mother-nature-500: #698f70;
  --color-mother-nature-600: #507558;
  --color-mother-nature-700: #3d5e43;
  --color-mother-nature-800: #2d4a33;
  --color-mother-nature-900: #213a26;
  --color-mother-nature-950: #122416;
  --color-caribbean: #c6f0eb;
  --color-caribbean-50: #dff7f4;
  --color-caribbean-100: #c6f0eb;
  --color-caribbean-200: #bbdbd7;
  --color-caribbean-300: #a3c6c2;
  --color-caribbean-400: #82a8a4;
  --color-caribbean-500: #668d89;
  --color-caribbean-600: #4e736f;
  --color-caribbean-700: #3a5d59;
  --color-caribbean-800: #2a4946;
  --color-caribbean-900: #1e3836;
  --color-caribbean-950: #102321;
  --color-golden-mist: #cec78a;
  --color-golden-mist-50: #fcf9d8;
  --color-golden-mist-100: #f3f0cb;
  --color-golden-mist-200: #e1ddb1;
  --color-golden-mist-300: #cec78a;
  --color-golden-mist-400: #ada76e;
  --color-golden-mist-500: #918a50;
  --color-golden-mist-600: #766f35;
  --color-golden-mist-700: #5e5822;
  --color-golden-mist-800: #4a4413;
  --color-golden-mist-900: #393409;
  --color-golden-mist-950: #242003;
  --color-salmon-flush: #eec9ce;
  --color-salmon-flush-50: #ffeef0;
  --color-salmon-flush-100: #f9e1e4;
  --color-salmon-flush-200: #eec9ce;
  --color-salmon-flush-300: #d4b5b9;
  --color-salmon-flush-400: #b7959a;
  --color-salmon-flush-500: #9c7a7f;
  --color-salmon-flush-600: #816166;
  --color-salmon-flush-700: #684c50;
  --color-salmon-flush-800: #533b3e;
  --color-salmon-flush-900: #412c2f;
  --color-salmon-flush-950: #2a1a1d;
}