What’s Left to Fog Syringa Color Palette

About this palette

What’s Left to Fog Syringa is a 5-color muted palette: #FDF4EA (What’s Left), #7D9DBA (Sailing), #3F4C36 (Mountain View), #556674 (Silent Night), #C4BBCC (Fog Syringa). It mixes white, blue, green, gray tones and feels cool overall. The strongest text pairing is #FDF4EA on #3F4C36 with a contrast ratio of 8.40:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
What’s Left	rgb(253, 244, 234)	hsl(32, 83%, 95%)
Sailing	rgb(125, 157, 186)	hsl(209, 31%, 61%)
Mountain View	rgb(63, 76, 54)	hsl(95, 17%, 25%)
Silent Night	rgb(85, 102, 116)	hsl(207, 15%, 39%)
Fog Syringa	rgb(196, 187, 204)	hsl(272, 14%, 77%)

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.

Aa8.40:1 Very good#FDF4EA on #3F4C36
Aa8.40:1 Very good#3F4C36 on #FDF4EA
Aa5.45:1 Good#FDF4EA on #556674
Aa5.45:1 Good#556674 on #FDF4EA
Aa4.93:1 Good#3F4C36 on #C4BBCC
Aa4.93:1 Good#C4BBCC on #3F4C36
Aa3.22:1 Poor#7D9DBA on #3F4C36
Aa3.22:1 Poor#3F4C36 on #7D9DBA

Color blindness preview

CSS variables

/* What’s Left to Fog Syringa — https://swatchly.xyz/palette/fdf4ea-7d9dba-3f4c36-556674-c4bbcc */
:root {
  --what-s-left: #fdf4ea;
  --sailing: #7d9dba;
  --mountain-view: #3f4c36;
  --silent-night: #556674;
  --fog-syringa: #c4bbcc;
}

Tailwind CSS v4

/* What’s Left to Fog Syringa — https://swatchly.xyz/palette/fdf4ea-7d9dba-3f4c36-556674-c4bbcc */
@theme {
  --color-what-s-left: #fdf4ea;
  --color-what-s-left-50: #fdf4ea;
  --color-what-s-left-100: #f0ebe4;
  --color-what-s-left-200: #ddd7cf;
  --color-what-s-left-300: #c7c0b8;
  --color-what-s-left-400: #a8a097;
  --color-what-s-left-500: #8d857c;
  --color-what-s-left-600: #726a62;
  --color-what-s-left-700: #5b544c;
  --color-what-s-left-800: #47413b;
  --color-what-s-left-900: #37322c;
  --color-what-s-left-950: #221f1a;
  --color-sailing: #7d9dba;
  --color-sailing-50: #e8f4ff;
  --color-sailing-100: #d4eafe;
  --color-sailing-200: #bbd5ed;
  --color-sailing-300: #a0bdd8;
  --color-sailing-400: #7d9dba;
  --color-sailing-500: #64839f;
  --color-sailing-600: #4c6a84;
  --color-sailing-700: #3a546c;
  --color-sailing-800: #2b4257;
  --color-sailing-900: #203445;
  --color-sailing-950: #12212e;
  --color-mountain-view: #3f4c36;
  --color-mountain-view-50: #f0f9ea;
  --color-mountain-view-100: #e5efde;
  --color-mountain-view-200: #d0dcc8;
  --color-mountain-view-300: #bac7b1;
  --color-mountain-view-400: #9aa991;
  --color-mountain-view-500: #808e76;
  --color-mountain-view-600: #67755d;
  --color-mountain-view-700: #515e49;
  --color-mountain-view-800: #3f4c36;
  --color-mountain-view-900: #313a2a;
  --color-mountain-view-950: #1e2519;
  --color-silent-night: #556674;
  --color-silent-night-50: #edf7ff;
  --color-silent-night-100: #dfebf6;
  --color-silent-night-200: #c8d7e3;
  --color-silent-night-300: #aebfcd;
  --color-silent-night-400: #8c9ead;
  --color-silent-night-500: #708290;
  --color-silent-night-600: #556674;
  --color-silent-night-700: #42515d;
  --color-silent-night-800: #323f4a;
  --color-silent-night-900: #26313a;
  --color-silent-night-950: #161e24;
  --color-fog-syringa: #c4bbcc;
  --color-fog-syringa-50: #f7f2fc;
  --color-fog-syringa-100: #ede7f2;
  --color-fog-syringa-200: #dad3e0;
  --color-fog-syringa-300: #c4bbcc;
  --color-fog-syringa-400: #a59cac;
  --color-fog-syringa-500: #8a8191;
  --color-fog-syringa-600: #6f6776;
  --color-fog-syringa-700: #59515f;
  --color-fog-syringa-800: #453f4b;
  --color-fog-syringa-900: #36303a;
  --color-fog-syringa-950: #211d25;
}