Feminism to Ginger Ale color palette

9C5B7DFeminism DCE8FFCloudless 00271CNightmare 6A4A08Very Coffee C1A86EGinger Ale

About this palette

Feminism to Ginger Ale is a 5-color warm, vintage palette: #9C5B7D (Feminism), #DCE8FF (Cloudless), #00271C (Nightmare), #6A4A08 (Very Coffee), #C1A86E (Ginger Ale). It mixes red, gray, turquoise, brown, yellow tones and feels warm overall. The strongest text pairing is #DCE8FF on #00271C with a contrast ratio of 13.03:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Feminism	rgb(156, 91, 125)	hsl(329, 26%, 48%)
Cloudless	rgb(220, 232, 255)	hsl(219, 100%, 93%)
Nightmare	rgb(0, 39, 28)	hsl(163, 100%, 8%)
Very Coffee	rgb(106, 74, 8)	hsl(40, 86%, 22%)
Ginger Ale	rgb(193, 168, 110)	hsl(42, 40%, 59%)

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.03:1 Super#DCE8FF on #00271C
Aa13.03:1 Super#00271C on #DCE8FF
Aa6.96:1 Good#00271C on #C1A86E
Aa6.96:1 Good#C1A86E on #00271C
Aa6.56:1 Good#DCE8FF on #6A4A08
Aa6.56:1 Good#6A4A08 on #DCE8FF
Aa4.05:1 Poor#9C5B7D on #DCE8FF
Aa4.05:1 Poor#DCE8FF on #9C5B7D

Color blindness preview

CSS variables

/* Feminism to Ginger Ale — https://swatchly.xyz/palette/9c5b7d-dce8ff-00271c-6a4a08-c1a86e */
:root {
  --feminism: #9c5b7d;
  --cloudless: #dce8ff;
  --nightmare: #00271c;
  --very-coffee: #6a4a08;
  --ginger-ale: #c1a86e;
}

Tailwind CSS v4

/* Feminism to Ginger Ale — https://swatchly.xyz/palette/9c5b7d-dce8ff-00271c-6a4a08-c1a86e */
@theme {
  --color-feminism: #9c5b7d;
  --color-feminism-50: #fff1f7;
  --color-feminism-100: #ffe4f1;
  --color-feminism-200: #fec8e2;
  --color-feminism-300: #edb0ce;
  --color-feminism-400: #d290b1;
  --color-feminism-500: #b77497;
  --color-feminism-600: #9c5b7d;
  --color-feminism-700: #804564;
  --color-feminism-800: #67334f;
  --color-feminism-900: #51253d;
  --color-feminism-950: #341526;
  --color-cloudless: #dce8ff;
  --color-cloudless-50: #ecf2ff;
  --color-cloudless-100: #dce8ff;
  --color-cloudless-200: #ccd5e6;
  --color-cloudless-300: #b5bfd2;
  --color-cloudless-400: #95a0b5;
  --color-cloudless-500: #7b859a;
  --color-cloudless-600: #616c7f;
  --color-cloudless-700: #4c5567;
  --color-cloudless-800: #3b4252;
  --color-cloudless-900: #2c3340;
  --color-cloudless-950: #1a1f29;
  --color-nightmare: #00271c;
  --color-nightmare-50: #e5fbf2;
  --color-nightmare-100: #d9f2e8;
  --color-nightmare-200: #c1e0d4;
  --color-nightmare-300: #a8cabc;
  --color-nightmare-400: #85ab9d;
  --color-nightmare-500: #699081;
  --color-nightmare-600: #507567;
  --color-nightmare-700: #3c5e51;
  --color-nightmare-800: #2c4a3f;
  --color-nightmare-900: #203930;
  --color-nightmare-950: #00271c;
  --color-very-coffee: #6a4a08;
  --color-very-coffee-50: #fff4e2;
  --color-very-coffee-100: #ffe8c4;
  --color-very-coffee-200: #eed2a7;
  --color-very-coffee-300: #d9ba89;
  --color-very-coffee-400: #bb9962;
  --color-very-coffee-500: #9f7d43;
  --color-very-coffee-600: #826229;
  --color-very-coffee-700: #6a4a08;
  --color-very-coffee-800: #533a08;
  --color-very-coffee-900: #412c02;
  --color-very-coffee-950: #291a00;
  --color-ginger-ale: #c1a86e;
  --color-ginger-ale-50: #fff8e8;
  --color-ginger-ale-100: #feefcd;
  --color-ginger-ale-200: #eedcb3;
  --color-ginger-ale-300: #dcc797;
  --color-ginger-ale-400: #c1a86e;
  --color-ginger-ale-500: #a38b52;
  --color-ginger-ale-600: #866e36;
  --color-ginger-ale-700: #6c5621;
  --color-ginger-ale-800: #554211;
  --color-ginger-ale-900: #413207;
  --color-ginger-ale-950: #291d02;
}