Kissed by Mist to Noir Mystique Color Palette

About this palette

Kissed by Mist to Noir Mystique is a 5-color warm, vintage palette: #FFD4F8 (Kissed by Mist), #E674D6 (Pink Orchid), #4D80AE (Into the Blue), #005F40 (Midori), #261800 (Noir Mystique). It mixes pink, blue, green, brown tones and feels warm overall. The strongest text pairing is #FFD4F8 on #261800 with a contrast ratio of 13.21:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Kissed by Mist	rgb(255, 212, 248)	hsl(310, 100%, 92%)
Pink Orchid	rgb(230, 116, 214)	hsl(308, 70%, 68%)
Into the Blue	rgb(77, 128, 174)	hsl(208, 39%, 49%)
Midori	rgb(0, 95, 64)	hsl(160, 100%, 19%)
Noir Mystique	rgb(38, 24, 0)	hsl(38, 100%, 7%)

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.

Aa13.21:1 Super#FFD4F8 on #261800
Aa13.21:1 Super#261800 on #FFD4F8
Aa6.46:1 Good#E674D6 on #261800
Aa6.46:1 Good#261800 on #E674D6
Aa5.91:1 Good#FFD4F8 on #005F40
Aa5.91:1 Good#005F40 on #FFD4F8
Aa4.13:1 Poor#4D80AE on #261800
Aa4.13:1 Poor#261800 on #4D80AE

Color blindness preview

CSS variables

/* Kissed by Mist to Noir Mystique — https://swatchly.xyz/palette/ffd4f8-e674d6-4d80ae-005f40-261800 */
:root {
  --kissed-by-mist: #ffd4f8;
  --pink-orchid: #e674d6;
  --into-the-blue: #4d80ae;
  --midori: #005f40;
  --noir-mystique: #261800;
}

Tailwind CSS v4

/* Kissed by Mist to Noir Mystique — https://swatchly.xyz/palette/ffd4f8-e674d6-4d80ae-005f40-261800 */
@theme {
  --color-kissed-by-mist: #ffd4f8;
  --color-kissed-by-mist-50: #ffe6fb;
  --color-kissed-by-mist-100: #ffd4f8;
  --color-kissed-by-mist-200: #e6c5e1;
  --color-kissed-by-mist-300: #d3afcd;
  --color-kissed-by-mist-400: #b690b0;
  --color-kissed-by-mist-500: #9c7596;
  --color-kissed-by-mist-600: #815d7c;
  --color-kissed-by-mist-700: #6a4865;
  --color-kissed-by-mist-800: #543750;
  --color-kissed-by-mist-900: #42293e;
  --color-kissed-by-mist-950: #2a1827;
  --color-pink-orchid: #e674d6;
  --color-pink-orchid-50: #fff2fc;
  --color-pink-orchid-100: #ffe4f9;
  --color-pink-orchid-200: #ffc4f4;
  --color-pink-orchid-300: #fe9def;
  --color-pink-orchid-400: #e674d6;
  --color-pink-orchid-500: #c657b8;
  --color-pink-orchid-600: #a73a9a;
  --color-pink-orchid-700: #8a247f;
  --color-pink-orchid-800: #6f1366;
  --color-pink-orchid-900: #580750;
  --color-pink-orchid-950: #390234;
  --color-into-the-blue: #4d80ae;
  --color-into-the-blue-50: #eaf5ff;
  --color-into-the-blue-100: #d4eaff;
  --color-into-the-blue-200: #add7fe;
  --color-into-the-blue-300: #90beea;
  --color-into-the-blue-400: #6b9dcc;
  --color-into-the-blue-500: #4d80ae;
  --color-into-the-blue-600: #376792;
  --color-into-the-blue-700: #255278;
  --color-into-the-blue-800: #194062;
  --color-into-the-blue-900: #10324e;
  --color-into-the-blue-950: #071f34;
  --color-midori: #005f40;
  --color-midori-50: #dcffed;
  --color-midori-100: #c9f8e0;
  --color-midori-200: #ade5c9;
  --color-midori-300: #8ecfaf;
  --color-midori-400: #67b08e;
  --color-midori-500: #479471;
  --color-midori-600: #2b7757;
  --color-midori-700: #005f40;
  --color-midori-800: #054a32;
  --color-midori-900: #003925;
  --color-midori-950: #002416;
  --color-noir-mystique: #261800;
  --color-noir-mystique-50: #fef4e3;
  --color-noir-mystique-100: #f5ead6;
  --color-noir-mystique-200: #e4d6bf;
  --color-noir-mystique-300: #cfbfa5;
  --color-noir-mystique-400: #b09f83;
  --color-noir-mystique-500: #948366;
  --color-noir-mystique-600: #78674c;
  --color-noir-mystique-700: #5f5038;
  --color-noir-mystique-800: #4a3d28;
  --color-noir-mystique-900: #382d1c;
  --color-noir-mystique-950: #261800;
}