Kissed by Mist to Dark Purple color palette

F3D0FFKissed by Mist E7BF8BHalo B8853FWeissbier 007F75Wizards Orb 00453EBotanical Night 2F153FDark Purple

Open in generator Export PNG, PDF, ASE…

About this palette

Kissed by Mist to Dark Purple is a 6-color cool palette: #F3D0FF (Kissed by Mist), #E7BF8B (Halo), #B8853F (Weissbier), #007F75 (Wizards Orb), #00453E (Botanical Night), #2F153F (Dark Purple). It mixes purple, orange, turquoise tones and feels cool overall. The strongest text pairing is #F3D0FF on #2F153F with a contrast ratio of 11.75:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Kissed by Mist	rgb(243, 208, 255)	hsl(285, 100%, 91%)
Halo	rgb(231, 191, 139)	hsl(34, 66%, 73%)
Weissbier	rgb(184, 133, 63)	hsl(35, 49%, 48%)
Wizards Orb	rgb(0, 127, 117)	hsl(175, 100%, 25%)
Botanical Night	rgb(0, 69, 62)	hsl(174, 100%, 14%)
Dark Purple	rgb(47, 21, 63)	hsl(277, 50%, 16%)

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.75:1 Very good#F3D0FF on #2F153F
Aa11.75:1 Very good#2F153F on #F3D0FF
Aa9.40:1 Very good#E7BF8B on #2F153F
Aa9.40:1 Very good#2F153F on #E7BF8B
Aa7.95:1 Very good#F3D0FF on #00453E
Aa7.95:1 Very good#00453E on #F3D0FF
Aa6.36:1 Good#E7BF8B on #00453E
Aa6.36:1 Good#00453E on #E7BF8B

Color blindness preview

CSS variables

/* Kissed by Mist to Dark Purple — https://swatchly.xyz/palette/f3d0ff-e7bf8b-b8853f-007f75-00453e-2f153f */
:root {
  --kissed-by-mist: #f3d0ff;
  --halo: #e7bf8b;
  --weissbier: #b8853f;
  --wizards-orb: #007f75;
  --botanical-night: #00453e;
  --dark-purple: #2f153f;
}

Tailwind CSS v4

/* Kissed by Mist to Dark Purple — https://swatchly.xyz/palette/f3d0ff-e7bf8b-b8853f-007f75-00453e-2f153f */
@theme {
  --color-kissed-by-mist: #f3d0ff;
  --color-kissed-by-mist-50: #fdf8ff;
  --color-kissed-by-mist-100: #faebff;
  --color-kissed-by-mist-200: #f3d0ff;
  --color-kissed-by-mist-300: #d7bbe1;
  --color-kissed-by-mist-400: #b899c3;
  --color-kissed-by-mist-500: #9c7ca7;
  --color-kissed-by-mist-600: #7f618a;
  --color-kissed-by-mist-700: #664a6f;
  --color-kissed-by-mist-800: #503858;
  --color-kissed-by-mist-900: #3e2a45;
  --color-kissed-by-mist-950: #27192c;
  --color-halo: #e7bf8b;
  --color-halo-50: #fff7ec;
  --color-halo-100: #ffecd4;
  --color-halo-200: #f4d7b2;
  --color-halo-300: #e7bf8b;
  --color-halo-400: #c49f6f;
  --color-halo-500: #a88250;
  --color-halo-600: #8b6735;
  --color-halo-700: #705021;
  --color-halo-800: #593d13;
  --color-halo-900: #452d09;
  --color-halo-950: #2c1b03;
  --color-weissbier: #b8853f;
  --color-weissbier-50: #fff5ea;
  --color-weissbier-100: #ffecd4;
  --color-weissbier-200: #fcd6a6;
  --color-weissbier-300: #ecbf88;
  --color-weissbier-400: #d1a060;
  --color-weissbier-500: #b8853f;
  --color-weissbier-600: #99691f;
  --color-weissbier-700: #7d5100;
  --color-weissbier-800: #623e00;
  --color-weissbier-900: #4c2f00;
  --color-weissbier-950: #301c00;
  --color-wizards-orb: #007f75;
  --color-wizards-orb-50: #d7fff9;
  --color-wizards-orb-100: #c0f9f1;
  --color-wizards-orb-200: #a3e8de;
  --color-wizards-orb-300: #83d3c9;
  --color-wizards-orb-400: #58b5aa;
  --color-wizards-orb-500: #339a8f;
  --color-wizards-orb-600: #007f75;
  --color-wizards-orb-700: #00655d;
  --color-wizards-orb-800: #004f48;
  --color-wizards-orb-900: #003d38;
  --color-wizards-orb-950: #002622;
  --color-botanical-night: #00453e;
  --color-botanical-night-50: #ddfdf7;
  --color-botanical-night-100: #d0f4ee;
  --color-botanical-night-200: #b7e2da;
  --color-botanical-night-300: #99cbc3;
  --color-botanical-night-400: #73aba2;
  --color-botanical-night-500: #558e86;
  --color-botanical-night-600: #3a726a;
  --color-botanical-night-700: #265952;
  --color-botanical-night-800: #00453e;
  --color-botanical-night-900: #0e342f;
  --color-botanical-night-950: #06201c;
  --color-dark-purple: #2f153f;
  --color-dark-purple-50: #f9f2ff;
  --color-dark-purple-100: #f3e4ff;
  --color-dark-purple-200: #e4cdf5;
  --color-dark-purple-300: #cfb5e2;
  --color-dark-purple-400: #b194c6;
  --color-dark-purple-500: #9679ab;
  --color-dark-purple-600: #7c608f;
  --color-dark-purple-700: #654b76;
  --color-dark-purple-800: #513a60;
  --color-dark-purple-900: #402d4e;
  --color-dark-purple-950: #2f153f;
}