Fuzzy Sheep to Starlit Night Color Palette

About this palette

Fuzzy Sheep to Starlit Night is a 5-color muted, cool, vintage palette: #EAE8CB (Fuzzy Sheep), #E2BDA6 (Fabulous Fawn), #6D939C (Cavolo Nero), #4F7485 (Hydro), #45496C (Starlit Night). It mixes yellow, orange, turquoise, blue, purple tones and feels cool overall. The strongest text pairing is #EAE8CB on #45496C with a contrast ratio of 6.98:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fuzzy Sheep	rgb(234, 232, 203)	hsl(56, 42%, 86%)
Fabulous Fawn	rgb(226, 189, 166)	hsl(23, 51%, 77%)
Cavolo Nero	rgb(109, 147, 156)	hsl(191, 19%, 52%)
Hydro	rgb(79, 116, 133)	hsl(199, 25%, 42%)
Starlit Night	rgb(69, 73, 108)	hsl(234, 22%, 35%)

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.

Aa6.98:1 Good#EAE8CB on #45496C
Aa6.98:1 Good#45496C on #EAE8CB
Aa4.98:1 Good#E2BDA6 on #45496C
Aa4.98:1 Good#45496C on #E2BDA6
Aa4.05:1 Poor#EAE8CB on #4F7485
Aa4.05:1 Poor#4F7485 on #EAE8CB

Color blindness preview

CSS variables

/* Fuzzy Sheep to Starlit Night — https://swatchly.xyz/palette/eae8cb-e2bda6-6d939c-4f7485-45496c */
:root {
  --fuzzy-sheep: #eae8cb;
  --fabulous-fawn: #e2bda6;
  --cavolo-nero: #6d939c;
  --hydro: #4f7485;
  --starlit-night: #45496c;
}

Tailwind CSS v4

/* Fuzzy Sheep to Starlit Night — https://swatchly.xyz/palette/eae8cb-e2bda6-6d939c-4f7485-45496c */
@theme {
  --color-fuzzy-sheep: #eae8cb;
  --color-fuzzy-sheep-50: #f3f2e1;
  --color-fuzzy-sheep-100: #eae8cb;
  --color-fuzzy-sheep-200: #d6d5bf;
  --color-fuzzy-sheep-300: #c1bfa7;
  --color-fuzzy-sheep-400: #a3a186;
  --color-fuzzy-sheep-500: #88866c;
  --color-fuzzy-sheep-600: #6e6c53;
  --color-fuzzy-sheep-700: #585640;
  --color-fuzzy-sheep-800: #45432f;
  --color-fuzzy-sheep-900: #353423;
  --color-fuzzy-sheep-950: #212014;
  --color-fabulous-fawn: #e2bda6;
  --color-fabulous-fawn-50: #fff5f0;
  --color-fabulous-fawn-100: #ffeadd;
  --color-fabulous-fawn-200: #f1d5c5;
  --color-fabulous-fawn-300: #e2bda6;
  --color-fabulous-fawn-400: #bf9d88;
  --color-fabulous-fawn-500: #a3816b;
  --color-fabulous-fawn-600: #866651;
  --color-fabulous-fawn-700: #6d4f3c;
  --color-fabulous-fawn-800: #563d2c;
  --color-fabulous-fawn-900: #432d20;
  --color-fabulous-fawn-950: #2b1b11;
  --color-cavolo-nero: #6d939c;
  --color-cavolo-nero-50: #e7faff;
  --color-cavolo-nero-100: #daf2f8;
  --color-cavolo-nero-200: #c4e0e7;
  --color-cavolo-nero-300: #abccd3;
  --color-cavolo-nero-400: #89aeb6;
  --color-cavolo-nero-500: #6d939c;
  --color-cavolo-nero-600: #527780;
  --color-cavolo-nero-700: #3d5f67;
  --color-cavolo-nero-800: #2c4a51;
  --color-cavolo-nero-900: #1f393f;
  --color-cavolo-nero-950: #112327;
  --color-hydro: #4f7485;
  --color-hydro-50: #e9f8ff;
  --color-hydro-100: #d8f0fc;
  --color-hydro-200: #c0deec;
  --color-hydro-300: #a7c8d8;
  --color-hydro-400: #85a9bb;
  --color-hydro-500: #698ea0;
  --color-hydro-600: #4f7485;
  --color-hydro-700: #3b5c6c;
  --color-hydro-800: #2b4856;
  --color-hydro-900: #1e3843;
  --color-hydro-950: #10232b;
  --color-starlit-night: #45496c;
  --color-starlit-night-50: #f3f4ff;
  --color-starlit-night-100: #e6eaff;
  --color-starlit-night-200: #cfd3f3;
  --color-starlit-night-300: #b5bbdf;
  --color-starlit-night-400: #9499c0;
  --color-starlit-night-500: #777da3;
  --color-starlit-night-600: #5c6184;
  --color-starlit-night-700: #45496c;
  --color-starlit-night-800: #363953;
  --color-starlit-night-900: #292b42;
  --color-starlit-night-950: #181a2a;
}