Porcelain Skin to Icy Plains Color Palette

About this palette

Porcelain Skin to Icy Plains is a 5-color pastel, light, cool palette: #FFE5E6 (Porcelain Skin), #A4CEDC (Wave), #ECCABA (Cashew Nut), #D1F0C1 (Maroccan Tea), #D4DEFF (Icy Plains). It mixes white, blue, orange, green tones and feels cool overall. The strongest text pairing is #FFE5E6 on #A4CEDC 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
Porcelain Skin	rgb(255, 229, 230)	hsl(358, 100%, 95%)
Wave	rgb(164, 206, 220)	hsl(195, 44%, 75%)
Cashew Nut	rgb(236, 202, 186)	hsl(19, 57%, 83%)
Maroccan Tea	rgb(209, 240, 193)	hsl(100, 61%, 85%)
Icy Plains	rgb(212, 222, 255)	hsl(226, 100%, 92%)

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

/* Porcelain Skin to Icy Plains — https://swatchly.xyz/palette/ffe5e6-a4cedc-eccaba-d1f0c1-d4deff */
:root {
  --porcelain-skin: #ffe5e6;
  --wave: #a4cedc;
  --cashew-nut: #eccaba;
  --maroccan-tea: #d1f0c1;
  --icy-plains: #d4deff;
}

Tailwind CSS v4

/* Porcelain Skin to Icy Plains — https://swatchly.xyz/palette/ffe5e6-a4cedc-eccaba-d1f0c1-d4deff */
@theme {
  --color-porcelain-skin: #ffe5e6;
  --color-porcelain-skin-50: #fff3f3;
  --color-porcelain-skin-100: #ffe5e6;
  --color-porcelain-skin-200: #e6d3d4;
  --color-porcelain-skin-300: #d1bcbc;
  --color-porcelain-skin-400: #b39b9c;
  --color-porcelain-skin-500: #978081;
  --color-porcelain-skin-600: #7b6667;
  --color-porcelain-skin-700: #635050;
  --color-porcelain-skin-800: #4e3d3e;
  --color-porcelain-skin-900: #3d2f2f;
  --color-porcelain-skin-950: #271c1d;
  --color-wave: #a4cedc;
  --color-wave-50: #edfaff;
  --color-wave-100: #dbf4fc;
  --color-wave-200: #c4e2ec;
  --color-wave-300: #a4cedc;
  --color-wave-400: #86adba;
  --color-wave-500: #69919e;
  --color-wave-600: #4e7581;
  --color-wave-700: #395d68;
  --color-wave-800: #294852;
  --color-wave-900: #1c3740;
  --color-wave-950: #0f2228;
  --color-cashew-nut: #eccaba;
  --color-cashew-nut-50: #ffede5;
  --color-cashew-nut-100: #f8e1d7;
  --color-cashew-nut-200: #eccaba;
  --color-cashew-nut-300: #d3b6a8;
  --color-cashew-nut-400: #b69788;
  --color-cashew-nut-500: #9b7c6d;
  --color-cashew-nut-600: #806355;
  --color-cashew-nut-700: #684e41;
  --color-cashew-nut-800: #533c31;
  --color-cashew-nut-900: #412e24;
  --color-cashew-nut-950: #291c15;
  --color-maroccan-tea: #d1f0c1;
  --color-maroccan-tea-50: #e4f7db;
  --color-maroccan-tea-100: #d1f0c1;
  --color-maroccan-tea-200: #c3dbb7;
  --color-maroccan-tea-300: #acc69f;
  --color-maroccan-tea-400: #8ca87e;
  --color-maroccan-tea-500: #728e63;
  --color-maroccan-tea-600: #59744b;
  --color-maroccan-tea-700: #455d38;
  --color-maroccan-tea-800: #344929;
  --color-maroccan-tea-900: #27391d;
  --color-maroccan-tea-950: #17230f;
  --color-icy-plains: #d4deff;
  --color-icy-plains-50: #f9faff;
  --color-icy-plains-100: #edf1ff;
  --color-icy-plains-200: #d4deff;
  --color-icy-plains-300: #bec6e1;
  --color-icy-plains-400: #9ca5c3;
  --color-icy-plains-500: #8088a6;
  --color-icy-plains-600: #646d89;
  --color-icy-plains-700: #4e556f;
  --color-icy-plains-800: #3b4158;
  --color-icy-plains-900: #2d3245;
  --color-icy-plains-950: #1b1f2c;
}