Foggy Love to Ancient Pine Color Palette

About this palette

Foggy Love to Ancient Pine is a 4-color muted palette: #DBCCEC (Foggy Love), #81738D (Vintage), #9EAC9A (Moorland), #464E41 (Ancient Pine). It mixes purple, gray tones and feels cool overall. The strongest text pairing is #DBCCEC on #464E41 with a contrast ratio of 5.71:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Foggy Love	rgb(219, 204, 236)	hsl(268, 46%, 86%)
Vintage	rgb(129, 115, 141)	hsl(272, 10%, 50%)
Moorland	rgb(158, 172, 154)	hsl(107, 10%, 64%)
Ancient Pine	rgb(70, 78, 65)	hsl(97, 9%, 28%)

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.

Aa5.71:1 Good#DBCCEC on #464E41
Aa5.71:1 Good#464E41 on #DBCCEC
Aa3.64:1 Poor#9EAC9A on #464E41
Aa3.64:1 Poor#464E41 on #9EAC9A

Color blindness preview

CSS variables

/* Foggy Love to Ancient Pine — https://swatchly.xyz/palette/dbccec-81738d-9eac9a-464e41 */
:root {
  --foggy-love: #dbccec;
  --vintage: #81738d;
  --moorland: #9eac9a;
  --ancient-pine: #464e41;
}

Tailwind CSS v4

/* Foggy Love to Ancient Pine — https://swatchly.xyz/palette/dbccec-81738d-9eac9a-464e41 */
@theme {
  --color-foggy-love: #dbccec;
  --color-foggy-love-50: #f6efff;
  --color-foggy-love-100: #ede3f8;
  --color-foggy-love-200: #dbccec;
  --color-foggy-love-300: #c4b7d3;
  --color-foggy-love-400: #a698b5;
  --color-foggy-love-500: #8b7d9b;
  --color-foggy-love-600: #716480;
  --color-foggy-love-700: #5b4f68;
  --color-foggy-love-800: #483d53;
  --color-foggy-love-900: #372e41;
  --color-foggy-love-950: #221c29;
  --color-vintage: #81738d;
  --color-vintage-50: #f7efff;
  --color-vintage-100: #ece2f5;
  --color-vintage-200: #d7cbe1;
  --color-vintage-300: #bfb2cb;
  --color-vintage-400: #9e90ab;
  --color-vintage-500: #81738d;
  --color-vintage-600: #695c74;
  --color-vintage-700: #54485e;
  --color-vintage-800: #42384b;
  --color-vintage-900: #342b3b;
  --color-vintage-950: #211b26;
  --color-moorland: #9eac9a;
  --color-moorland-50: #f2faf0;
  --color-moorland-100: #e8f1e6;
  --color-moorland-200: #d5dfd2;
  --color-moorland-300: #becaba;
  --color-moorland-400: #9eac9a;
  --color-moorland-500: #828f7e;
  --color-moorland-600: #677463;
  --color-moorland-700: #505c4d;
  --color-moorland-800: #3d473a;
  --color-moorland-900: #2e362b;
  --color-moorland-950: #1b2119;
  --color-ancient-pine: #464e41;
  --color-ancient-pine-50: #f2f7ee;
  --color-ancient-pine-100: #e7ede4;
  --color-ancient-pine-200: #d3dacf;
  --color-ancient-pine-300: #bec6b9;
  --color-ancient-pine-400: #9fa89a;
  --color-ancient-pine-500: #858e80;
  --color-ancient-pine-600: #6d7567;
  --color-ancient-pine-700: #586053;
  --color-ancient-pine-800: #464e41;
  --color-ancient-pine-900: #363c32;
  --color-ancient-pine-950: #22261f;
}