Mallard to Foggy Love Color Palette

About this palette

Mallard to Foggy Love is a 5-color muted, cool palette: #294857 (Mallard), #D0A48B (Cashmere Clay), #778364 (Wreath), #3E6473 (Atlantis), #D6CAEC (Foggy Love). It mixes blue, orange, green, purple tones and feels cool overall. The strongest text pairing is #294857 on #D6CAEC with a contrast ratio of 6.26:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mallard	rgb(41, 72, 87)	hsl(200, 36%, 25%)
Cashmere Clay	rgb(208, 164, 139)	hsl(22, 42%, 68%)
Wreath	rgb(119, 131, 100)	hsl(83, 13%, 45%)
Atlantis	rgb(62, 100, 115)	hsl(197, 30%, 35%)
Foggy Love	rgb(214, 202, 236)	hsl(261, 47%, 86%)

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.26:1 Good#294857 on #D6CAEC
Aa6.26:1 Good#D6CAEC on #294857
Aa4.34:1 Poor#294857 on #D0A48B
Aa4.34:1 Poor#D0A48B on #294857
Aa4.13:1 Poor#3E6473 on #D6CAEC
Aa4.13:1 Poor#D6CAEC on #3E6473

Color blindness preview

CSS variables

/* Mallard to Foggy Love — https://swatchly.xyz/palette/294857-d0a48b-778364-3e6473-d6caec */
:root {
  --mallard: #294857;
  --cashmere-clay: #d0a48b;
  --wreath: #778364;
  --atlantis: #3e6473;
  --foggy-love: #d6caec;
}

Tailwind CSS v4

/* Mallard to Foggy Love — https://swatchly.xyz/palette/294857-d0a48b-778364-3e6473-d6caec */
@theme {
  --color-mallard: #294857;
  --color-mallard-50: #eaf8ff;
  --color-mallard-100: #d9effb;
  --color-mallard-200: #c2dcea;
  --color-mallard-300: #a9c6d6;
  --color-mallard-400: #87a7b8;
  --color-mallard-500: #6b8c9d;
  --color-mallard-600: #527282;
  --color-mallard-700: #3e5b69;
  --color-mallard-800: #294857;
  --color-mallard-900: #213742;
  --color-mallard-950: #13222a;
  --color-cashmere-clay: #d0a48b;
  --color-cashmere-clay-50: #fff8f5;
  --color-cashmere-clay-100: #ffefe5;
  --color-cashmere-clay-200: #f9d9c8;
  --color-cashmere-clay-300: #e8c4af;
  --color-cashmere-clay-400: #d0a48b;
  --color-cashmere-clay-500: #b0866e;
  --color-cashmere-clay-600: #926a52;
  --color-cashmere-clay-700: #76523c;
  --color-cashmere-clay-800: #5e3e2b;
  --color-cashmere-clay-900: #482d1e;
  --color-cashmere-clay-950: #2d1a0f;
  --color-wreath: #778364;
  --color-wreath-50: #eff7e4;
  --color-wreath-100: #e3ecd6;
  --color-wreath-200: #cdd7be;
  --color-wreath-300: #b4c0a3;
  --color-wreath-400: #93a080;
  --color-wreath-500: #778364;
  --color-wreath-600: #5f6a4d;
  --color-wreath-700: #4a543a;
  --color-wreath-800: #3a422c;
  --color-wreath-900: #2c3420;
  --color-wreath-950: #1b2012;
  --color-atlantis: #3e6473;
  --color-atlantis-50: #e8f8ff;
  --color-atlantis-100: #d7f0fb;
  --color-atlantis-200: #c1dfeb;
  --color-atlantis-300: #a8cbd9;
  --color-atlantis-400: #87adbd;
  --color-atlantis-500: #6c93a3;
  --color-atlantis-600: #537a89;
  --color-atlantis-700: #3e6473;
  --color-atlantis-800: #2e4e5b;
  --color-atlantis-900: #213c47;
  --color-atlantis-950: #12262e;
  --color-foggy-love: #d6caec;
  --color-foggy-love-50: #f3edff;
  --color-foggy-love-100: #e9e1f8;
  --color-foggy-love-200: #d6caec;
  --color-foggy-love-300: #c0b6d3;
  --color-foggy-love-400: #a297b6;
  --color-foggy-love-500: #887d9c;
  --color-foggy-love-600: #6e6481;
  --color-foggy-love-700: #594f69;
  --color-foggy-love-800: #463d55;
  --color-foggy-love-900: #362f42;
  --color-foggy-love-950: #211c2a;
}