Foggy Love to Your Majesty color palette

D6CDEEFoggy Love BEB1D1Pastel Lilac A696B6Metal Petal 8E7B9BAmorous 776280Heron 614967Your Majesty

Open in generator Export PNG, PDF, ASE…

About this palette

Foggy Love to Your Majesty is a 6-color muted, cool, monochromatic, gradient palette: #D6CDEE (Foggy Love), #BEB1D1 (Pastel Lilac), #A696B6 (Metal Petal), #8E7B9B (Amorous), #776280 (Heron), #614967 (Your Majesty). It mixes purple tones and feels cool overall. The strongest text pairing is #D6CDEE on #614967 with a contrast ratio of 5.20:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Foggy Love	rgb(214, 205, 238)	hsl(256, 49%, 87%)
Pastel Lilac	rgb(190, 177, 209)	hsl(264, 26%, 76%)
Metal Petal	rgb(166, 150, 182)	hsl(270, 18%, 65%)
Amorous	rgb(142, 123, 155)	hsl(276, 14%, 55%)
Heron	rgb(119, 98, 128)	hsl(282, 13%, 44%)
Your Majesty	rgb(97, 73, 103)	hsl(288, 17%, 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.

Aa5.20:1 Good#D6CDEE on #614967
Aa5.20:1 Good#614967 on #D6CDEE
Aa3.91:1 Poor#BEB1D1 on #614967
Aa3.91:1 Poor#614967 on #BEB1D1
Aa3.60:1 Poor#D6CDEE on #776280
Aa3.60:1 Poor#776280 on #D6CDEE

Color blindness preview

CSS variables

/* Foggy Love to Your Majesty — https://swatchly.xyz/palette/d6cdee-beb1d1-a696b6-8e7b9b-776280-614967 */
:root {
  --foggy-love: #d6cdee;
  --pastel-lilac: #beb1d1;
  --metal-petal: #a696b6;
  --amorous: #8e7b9b;
  --heron: #776280;
  --your-majesty: #614967;
}

Tailwind CSS v4

/* Foggy Love to Your Majesty — https://swatchly.xyz/palette/d6cdee-beb1d1-a696b6-8e7b9b-776280-614967 */
@theme {
  --color-foggy-love: #d6cdee;
  --color-foggy-love-50: #f3efff;
  --color-foggy-love-100: #e9e3f9;
  --color-foggy-love-200: #d6cdee;
  --color-foggy-love-300: #c0b8d4;
  --color-foggy-love-400: #a199b7;
  --color-foggy-love-500: #877e9d;
  --color-foggy-love-600: #6d6582;
  --color-foggy-love-700: #57506a;
  --color-foggy-love-800: #453e55;
  --color-foggy-love-900: #352f42;
  --color-foggy-love-950: #211d2a;
  --color-pastel-lilac: #beb1d1;
  --color-pastel-lilac-50: #f4edff;
  --color-pastel-lilac-100: #e9e0f6;
  --color-pastel-lilac-200: #d5cae4;
  --color-pastel-lilac-300: #beb1d1;
  --color-pastel-lilac-400: #a094b2;
  --color-pastel-lilac-500: #867a98;
  --color-pastel-lilac-600: #6d617e;
  --color-pastel-lilac-700: #584d66;
  --color-pastel-lilac-800: #453c52;
  --color-pastel-lilac-900: #372f41;
  --color-pastel-lilac-950: #221c2a;
  --color-metal-petal: #a696b6;
  --color-metal-petal-50: #f7f0ff;
  --color-metal-petal-100: #efe4fa;
  --color-metal-petal-200: #dbcfe8;
  --color-metal-petal-300: #c5b7d4;
  --color-metal-petal-400: #a696b6;
  --color-metal-petal-500: #8b7c9b;
  --color-metal-petal-600: #71627f;
  --color-metal-petal-700: #5a4d67;
  --color-metal-petal-800: #473c52;
  --color-metal-petal-900: #372d41;
  --color-metal-petal-950: #231c2a;
  --color-amorous: #8e7b9b;
  --color-amorous-50: #f9f1ff;
  --color-amorous-100: #f1e4fb;
  --color-amorous-200: #dfcfe9;
  --color-amorous-300: #c9b7d5;
  --color-amorous-400: #aa97b7;
  --color-amorous-500: #8e7b9b;
  --color-amorous-600: #746280;
  --color-amorous-700: #5c4c67;
  --color-amorous-800: #493b52;
  --color-amorous-900: #392d41;
  --color-amorous-950: #241b29;
  --color-heron: #776280;
  --color-heron-50: #fbf1ff;
  --color-heron-100: #f4e5fa;
  --color-heron-200: #e1d0e9;
  --color-heron-300: #ccb8d5;
  --color-heron-400: #ad98b7;
  --color-heron-500: #927c9b;
  --color-heron-600: #776280;
  --color-heron-700: #5f4d67;
  --color-heron-800: #4b3b52;
  --color-heron-900: #3a2c40;
  --color-heron-950: #251b29;
  --color-your-majesty: #614967;
  --color-your-majesty-50: #fcf1ff;
  --color-your-majesty-100: #f6e4fa;
  --color-your-majesty-200: #e4cfe9;
  --color-your-majesty-300: #ceb7d4;
  --color-your-majesty-400: #b096b6;
  --color-your-majesty-500: #947a9a;
  --color-your-majesty-600: #78607e;
  --color-your-majesty-700: #614967;
  --color-your-majesty-800: #4c3950;
  --color-your-majesty-900: #3b2b3f;
  --color-your-majesty-950: #251928;
}