Magenta Memoir to Ginger Beer Color Palette

About this palette

Magenta Memoir to Ginger Beer is a 5-color cool palette: #AF599E (Magenta Memoir), #112F13 (Haunted Forest), #B1D8FF (Droplet), #005286 (Dark Denim), #C48437 (Ginger Beer). It mixes pink, green, blue, orange tones and feels cool overall. The strongest text pairing is #112F13 on #B1D8FF with a contrast ratio of 9.82:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Magenta Memoir	rgb(175, 89, 158)	hsl(312, 35%, 52%)
Haunted Forest	rgb(17, 47, 19)	hsl(124, 47%, 13%)
Droplet	rgb(177, 216, 255)	hsl(210, 100%, 85%)
Dark Denim	rgb(0, 82, 134)	hsl(203, 100%, 26%)
Ginger Beer	rgb(196, 132, 55)	hsl(33, 56%, 49%)

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.

Aa9.82:1 Very good#112F13 on #B1D8FF
Aa9.82:1 Very good#B1D8FF on #112F13
Aa5.54:1 Good#B1D8FF on #005286
Aa5.54:1 Good#005286 on #B1D8FF
Aa4.66:1 Good#112F13 on #C48437
Aa4.66:1 Good#C48437 on #112F13
Aa3.30:1 Poor#AF599E on #112F13
Aa3.30:1 Poor#112F13 on #AF599E

Color blindness preview

CSS variables

/* Magenta Memoir to Ginger Beer — https://swatchly.xyz/palette/af599e-112f13-b1d8ff-005286-c48437 */
:root {
  --magenta-memoir: #af599e;
  --haunted-forest: #112f13;
  --droplet: #b1d8ff;
  --dark-denim: #005286;
  --ginger-beer: #c48437;
}

Tailwind CSS v4

/* Magenta Memoir to Ginger Beer — https://swatchly.xyz/palette/af599e-112f13-b1d8ff-005286-c48437 */
@theme {
  --color-magenta-memoir: #af599e;
  --color-magenta-memoir-50: #ffedfa;
  --color-magenta-memoir-100: #ffdbf6;
  --color-magenta-memoir-200: #ffb8ee;
  --color-magenta-memoir-300: #ec9bda;
  --color-magenta-memoir-400: #cd77bb;
  --color-magenta-memoir-500: #af599e;
  --color-magenta-memoir-600: #924183;
  --color-magenta-memoir-700: #782f6b;
  --color-magenta-memoir-800: #612156;
  --color-magenta-memoir-900: #4d1744;
  --color-magenta-memoir-950: #330b2c;
  --color-haunted-forest: #112f13;
  --color-haunted-forest-50: #e8fce8;
  --color-haunted-forest-100: #dcf2dc;
  --color-haunted-forest-200: #c6e0c5;
  --color-haunted-forest-300: #adcaac;
  --color-haunted-forest-400: #8bac8b;
  --color-haunted-forest-500: #719271;
  --color-haunted-forest-600: #597959;
  --color-haunted-forest-700: #456346;
  --color-haunted-forest-800: #365036;
  --color-haunted-forest-900: #2a412a;
  --color-haunted-forest-950: #112f13;
  --color-droplet: #b1d8ff;
  --color-droplet-50: #e9f4ff;
  --color-droplet-100: #d6eaff;
  --color-droplet-200: #b1d8ff;
  --color-droplet-300: #a0c2e3;
  --color-droplet-400: #7fa3c7;
  --color-droplet-500: #6488ac;
  --color-droplet-600: #4b6e90;
  --color-droplet-700: #385876;
  --color-droplet-800: #294560;
  --color-droplet-900: #1d354b;
  --color-droplet-950: #0f2131;
  --color-dark-denim: #005286;
  --color-dark-denim-50: #edf6ff;
  --color-dark-denim-100: #dbeeff;
  --color-dark-denim-200: #b4dbff;
  --color-dark-denim-300: #8bc5f8;
  --color-dark-denim-400: #63a4dc;
  --color-dark-denim-500: #4487bf;
  --color-dark-denim-600: #286a9f;
  --color-dark-denim-700: #005286;
  --color-dark-denim-800: #064068;
  --color-dark-denim-900: #003153;
  --color-dark-denim-950: #001e36;
  --color-ginger-beer: #c48437;
  --color-ginger-beer-50: #fff6ed;
  --color-ginger-beer-100: #ffedda;
  --color-ginger-beer-200: #ffd7ad;
  --color-ginger-beer-300: #f5bf84;
  --color-ginger-beer-400: #dc9f5b;
  --color-ginger-beer-500: #c48437;
  --color-ginger-beer-600: #a4670f;
  --color-ginger-beer-700: #845000;
  --color-ginger-beer-800: #673d00;
  --color-ginger-beer-900: #4f2e00;
  --color-ginger-beer-950: #321b00;
}