Fading Horizon to Milk Foam Color Palette

About this palette

Fading Horizon to Milk Foam is a 5-color cool palette: #46206A (Fading Horizon), #577502 (Topiary Green), #B37AF4 (Illicit Purple), #CFB9FF (Violet Heaven), #EFFFDE (Milk Foam). It mixes purple, green, white tones and feels cool overall. The strongest text pairing is #46206A on #EFFFDE with a contrast ratio of 11.96:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fading Horizon	rgb(70, 32, 106)	hsl(271, 54%, 27%)
Topiary Green	rgb(87, 117, 2)	hsl(76, 97%, 23%)
Illicit Purple	rgb(179, 122, 244)	hsl(268, 85%, 72%)
Violet Heaven	rgb(207, 185, 255)	hsl(259, 100%, 86%)
Milk Foam	rgb(239, 255, 222)	hsl(89, 100%, 94%)

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.96:1 Very good#46206A on #EFFFDE
Aa11.96:1 Very good#EFFFDE on #46206A
Aa7.19:1 Very good#46206A on #CFB9FF
Aa7.19:1 Very good#CFB9FF on #46206A
Aa5.07:1 Good#577502 on #EFFFDE
Aa5.07:1 Good#EFFFDE on #577502
Aa4.18:1 Poor#46206A on #B37AF4
Aa4.18:1 Poor#B37AF4 on #46206A

Color blindness preview

CSS variables

/* Fading Horizon to Milk Foam — https://swatchly.xyz/palette/46206a-577502-b37af4-cfb9ff-efffde */
:root {
  --fading-horizon: #46206a;
  --topiary-green: #577502;
  --illicit-purple: #b37af4;
  --violet-heaven: #cfb9ff;
  --milk-foam: #efffde;
}

Tailwind CSS v4

/* Fading Horizon to Milk Foam — https://swatchly.xyz/palette/46206a-577502-b37af4-cfb9ff-efffde */
@theme {
  --color-fading-horizon: #46206a;
  --color-fading-horizon-50: #f7f2ff;
  --color-fading-horizon-100: #f0e6ff;
  --color-fading-horizon-200: #e2ccff;
  --color-fading-horizon-300: #d0b0f9;
  --color-fading-horizon-400: #b38fdf;
  --color-fading-horizon-500: #9874c4;
  --color-fading-horizon-600: #7e5aa8;
  --color-fading-horizon-700: #67458d;
  --color-fading-horizon-800: #533574;
  --color-fading-horizon-900: #46206a;
  --color-fading-horizon-950: #2b1740;
  --color-topiary-green: #577502;
  --color-topiary-green-50: #eafeca;
  --color-topiary-green-100: #def5ba;
  --color-topiary-green-200: #c7e29b;
  --color-topiary-green-300: #aecc7b;
  --color-topiary-green-400: #8dad50;
  --color-topiary-green-500: #71912e;
  --color-topiary-green-600: #577502;
  --color-topiary-green-700: #445d00;
  --color-topiary-green-800: #354900;
  --color-topiary-green-900: #283800;
  --color-topiary-green-950: #182300;
  --color-illicit-purple: #b37af4;
  --color-illicit-purple-50: #f6f0ff;
  --color-illicit-purple-100: #ede1ff;
  --color-illicit-purple-200: #dec6ff;
  --color-illicit-purple-300: #cda6ff;
  --color-illicit-purple-400: #b37af4;
  --color-illicit-purple-500: #985fd7;
  --color-illicit-purple-600: #7e45b8;
  --color-illicit-purple-700: #67319a;
  --color-illicit-purple-800: #52227f;
  --color-illicit-purple-900: #411767;
  --color-illicit-purple-950: #2a0b46;
  --color-violet-heaven: #cfb9ff;
  --color-violet-heaven-50: #f9f7ff;
  --color-violet-heaven-100: #f1ecff;
  --color-violet-heaven-200: #e1d5ff;
  --color-violet-heaven-300: #cfb9ff;
  --color-violet-heaven-400: #ae99da;
  --color-violet-heaven-500: #927cbe;
  --color-violet-heaven-600: #7661a0;
  --color-violet-heaven-700: #5e4a83;
  --color-violet-heaven-800: #493869;
  --color-violet-heaven-900: #382953;
  --color-violet-heaven-950: #231836;
  --color-milk-foam: #efffde;
  --color-milk-foam-50: #efffde;
  --color-milk-foam-100: #e8f2de;
  --color-milk-foam-200: #d3dec7;
  --color-milk-foam-300: #bbc8ad;
  --color-milk-foam-400: #9aa88b;
  --color-milk-foam-500: #7e8c6f;
  --color-milk-foam-600: #647155;
  --color-milk-foam-700: #4e5a41;
  --color-milk-foam-800: #3c4730;
  --color-milk-foam-900: #2e3623;
  --color-milk-foam-950: #1b2214;
}