Foggy Love to Noir Mystique Color Palette

About this palette

Foggy Love to Noir Mystique is a 5-color muted, cool palette: #DDC8EA (Foggy Love), #A5A784 (Olive Tree), #966BA0 (Crown Jewels), #324B3E (Pine Needle), #1D1C10 (Noir Mystique). It mixes purple, yellow, green, gray tones and feels cool overall. The strongest text pairing is #DDC8EA on #1D1C10 with a contrast ratio of 11.03:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Foggy Love	rgb(221, 200, 234)	hsl(277, 45%, 85%)
Olive Tree	rgb(165, 167, 132)	hsl(63, 17%, 59%)
Crown Jewels	rgb(150, 107, 160)	hsl(289, 22%, 52%)
Pine Needle	rgb(50, 75, 62)	hsl(149, 20%, 25%)
Noir Mystique	rgb(29, 28, 16)	hsl(55, 29%, 9%)

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.

Aa11.03:1 Very good#DDC8EA on #1D1C10
Aa11.03:1 Very good#1D1C10 on #DDC8EA
Aa6.90:1 Good#A5A784 on #1D1C10
Aa6.90:1 Good#1D1C10 on #A5A784
Aa6.12:1 Good#DDC8EA on #324B3E
Aa6.12:1 Good#324B3E on #DDC8EA
Aa4.00:1 Poor#966BA0 on #1D1C10
Aa4.00:1 Poor#1D1C10 on #966BA0

Color blindness preview

CSS variables

/* Foggy Love to Noir Mystique — https://swatchly.xyz/palette/ddc8ea-a5a784-966ba0-324b3e-1d1c10 */
:root {
  --foggy-love: #ddc8ea;
  --olive-tree: #a5a784;
  --crown-jewels: #966ba0;
  --pine-needle: #324b3e;
  --noir-mystique: #1d1c10;
}

Tailwind CSS v4

/* Foggy Love to Noir Mystique — https://swatchly.xyz/palette/ddc8ea-a5a784-966ba0-324b3e-1d1c10 */
@theme {
  --color-foggy-love: #ddc8ea;
  --color-foggy-love-50: #f8ecff;
  --color-foggy-love-100: #eee0f6;
  --color-foggy-love-200: #ddc8ea;
  --color-foggy-love-300: #c6b4d1;
  --color-foggy-love-400: #a895b4;
  --color-foggy-love-500: #8e7b9a;
  --color-foggy-love-600: #74627f;
  --color-foggy-love-700: #5e4d68;
  --color-foggy-love-800: #4a3c53;
  --color-foggy-love-900: #3a2d41;
  --color-foggy-love-950: #241b29;
  --color-olive-tree: #a5a784;
  --color-olive-tree-50: #f6f8e4;
  --color-olive-tree-100: #edefd8;
  --color-olive-tree-200: #dadcc1;
  --color-olive-tree-300: #c4c6a7;
  --color-olive-tree-400: #a5a784;
  --color-olive-tree-500: #898b69;
  --color-olive-tree-600: #6e704f;
  --color-olive-tree-700: #57593b;
  --color-olive-tree-800: #44452b;
  --color-olive-tree-900: #34351f;
  --color-olive-tree-950: #202011;
  --color-crown-jewels: #966ba0;
  --color-crown-jewels-50: #fceeff;
  --color-crown-jewels-100: #f9ddff;
  --color-crown-jewels-200: #e8c4f0;
  --color-crown-jewels-300: #d2aadc;
  --color-crown-jewels-400: #b388bd;
  --color-crown-jewels-500: #966ba0;
  --color-crown-jewels-600: #7c5385;
  --color-crown-jewels-700: #64406d;
  --color-crown-jewels-800: #503057;
  --color-crown-jewels-900: #3f2445;
  --color-crown-jewels-950: #29152d;
  --color-pine-needle: #324b3e;
  --color-pine-needle-50: #eafaf1;
  --color-pine-needle-100: #def0e6;
  --color-pine-needle-200: #c8ded2;
  --color-pine-needle-300: #b0c8bb;
  --color-pine-needle-400: #8faa9b;
  --color-pine-needle-500: #748f80;
  --color-pine-needle-600: #5a7466;
  --color-pine-needle-700: #465e51;
  --color-pine-needle-800: #324b3e;
  --color-pine-needle-900: #273930;
  --color-pine-needle-950: #17241d;
  --color-noir-mystique: #1d1c10;
  --color-noir-mystique-50: #f6f6ed;
  --color-noir-mystique-100: #ecece2;
  --color-noir-mystique-200: #d9d8cc;
  --color-noir-mystique-300: #c3c2b4;
  --color-noir-mystique-400: #a3a294;
  --color-noir-mystique-500: #878677;
  --color-noir-mystique-600: #6c6b5d;
  --color-noir-mystique-700: #555447;
  --color-noir-mystique-800: #414035;
  --color-noir-mystique-900: #313027;
  --color-noir-mystique-950: #1d1c10;
}