Fabulous Fawn to Holographic Lavender Color Palette

About this palette

Fabulous Fawn to Holographic Lavender is a 4-color pastel, light palette: #E4C1AC (Fabulous Fawn), #B3CAFF (Night Snow), #B4E2FB (Frozen Landscape), #EFE7FF (Holographic Lavender). It mixes orange, blue, white tones and feels cool overall. The strongest text pairing is #E4C1AC on #EFE7FF with a contrast ratio of 1.40:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fabulous Fawn	rgb(228, 193, 172)	hsl(22, 51%, 78%)
Night Snow	rgb(179, 202, 255)	hsl(222, 100%, 85%)
Frozen Landscape	rgb(180, 226, 251)	hsl(201, 90%, 85%)
Holographic Lavender	rgb(239, 231, 255)	hsl(260, 100%, 95%)

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

/* Fabulous Fawn to Holographic Lavender — https://swatchly.xyz/palette/e4c1ac-b3caff-b4e2fb-efe7ff */
:root {
  --fabulous-fawn: #e4c1ac;
  --night-snow: #b3caff;
  --frozen-landscape: #b4e2fb;
  --holographic-lavender: #efe7ff;
}

Tailwind CSS v4

/* Fabulous Fawn to Holographic Lavender — https://swatchly.xyz/palette/e4c1ac-b3caff-b4e2fb-efe7ff */
@theme {
  --color-fabulous-fawn: #e4c1ac;
  --color-fabulous-fawn-50: #fff8f3;
  --color-fabulous-fawn-100: #ffede2;
  --color-fabulous-fawn-200: #f2d9ca;
  --color-fabulous-fawn-300: #e4c1ac;
  --color-fabulous-fawn-400: #c1a18d;
  --color-fabulous-fawn-500: #a48470;
  --color-fabulous-fawn-600: #876855;
  --color-fabulous-fawn-700: #6d5140;
  --color-fabulous-fawn-800: #563d2e;
  --color-fabulous-fawn-900: #422e21;
  --color-fabulous-fawn-950: #2a1c13;
  --color-night-snow: #b3caff;
  --color-night-snow-50: #f8faff;
  --color-night-snow-100: #ecf2ff;
  --color-night-snow-200: #d2e0ff;
  --color-night-snow-300: #b3caff;
  --color-night-snow-400: #94a9d9;
  --color-night-snow-500: #768bbc;
  --color-night-snow-600: #5b6f9e;
  --color-night-snow-700: #455781;
  --color-night-snow-800: #334267;
  --color-night-snow-900: #253251;
  --color-night-snow-950: #151e35;
  --color-frozen-landscape: #b4e2fb;
  --color-frozen-landscape-50: #eef9ff;
  --color-frozen-landscape-100: #daf2ff;
  --color-frozen-landscape-200: #b4e2fb;
  --color-frozen-landscape-300: #a4cade;
  --color-frozen-landscape-400: #80aac1;
  --color-frozen-landscape-500: #638ea5;
  --color-frozen-landscape-600: #497389;
  --color-frozen-landscape-700: #355b6f;
  --color-frozen-landscape-800: #254758;
  --color-frozen-landscape-900: #1a3745;
  --color-frozen-landscape-950: #0d222c;
  --color-holographic-lavender: #efe7ff;
  --color-holographic-lavender-50: #f7f3ff;
  --color-holographic-lavender-100: #efe7ff;
  --color-holographic-lavender-200: #dad4e6;
  --color-holographic-lavender-300: #c4bdd1;
  --color-holographic-lavender-400: #a59eb3;
  --color-holographic-lavender-500: #898298;
  --color-holographic-lavender-600: #6f687c;
  --color-holographic-lavender-700: #585264;
  --color-holographic-lavender-800: #453f4f;
  --color-holographic-lavender-900: #35303e;
  --color-holographic-lavender-950: #211d27;
}