Start generating

Ginger Ale to Elegant Purple Gown color palette

C3AB65Ginger AleA78A72Gramps Shoehorn8C6877Moonscape724678Purple Passion5A1D76Elegant Purple Gown
Open in generator Export PNG, PDF, ASE…

About this palette

Ginger Ale to Elegant Purple Gown is a 5-color warm, vintage palette: #C3AB65 (Ginger Ale), #A78A72 (Gramps Shoehorn), #8C6877 (Moonscape), #724678 (Purple Passion), #5A1D76 (Elegant Purple Gown). It mixes yellow, orange, red, pink, purple tones and feels warm overall. The strongest text pairing is #C3AB65 on #5A1D76 with a contrast ratio of 4.99:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Ginger Alergb(195, 171, 101)hsl(45, 44%, 58%)
Gramps Shoehornrgb(167, 138, 114)hsl(27, 23%, 55%)
Moonscapergb(140, 104, 119)hsl(335, 15%, 48%)
Purple Passionrgb(114, 70, 120)hsl(293, 26%, 37%)
Elegant Purple Gownrgb(90, 29, 118)hsl(281, 61%, 29%)

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.

  • Aa4.99:1 Good#C3AB65 on #5A1D76
  • Aa4.99:1 Good#5A1D76 on #C3AB65
  • Aa3.48:1 Poor#A78A72 on #5A1D76
  • Aa3.48:1 Poor#5A1D76 on #A78A72
  • Aa3.26:1 Poor#C3AB65 on #724678
  • Aa3.26:1 Poor#724678 on #C3AB65

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Ginger Ale to Elegant Purple Gown — https://swatchly.xyz/palette/c3ab65-a78a72-8c6877-724678-5a1d76 */
:root {
  --ginger-ale: #c3ab65;
  --gramps-shoehorn: #a78a72;
  --moonscape: #8c6877;
  --purple-passion: #724678;
  --elegant-purple-gown: #5a1d76;
}

Tailwind CSS v4

/* Ginger Ale to Elegant Purple Gown — https://swatchly.xyz/palette/c3ab65-a78a72-8c6877-724678-5a1d76 */
@theme {
  --color-ginger-ale: #c3ab65;
  --color-ginger-ale-50: #fff9e8;
  --color-ginger-ale-100: #fff1c9;
  --color-ginger-ale-200: #efdfaf;
  --color-ginger-ale-300: #ddca92;
  --color-ginger-ale-400: #c3ab65;
  --color-ginger-ale-500: #a58d48;
  --color-ginger-ale-600: #87702a;
  --color-ginger-ale-700: #6d5811;
  --color-ginger-ale-800: #564300;
  --color-ginger-ale-900: #413300;
  --color-ginger-ale-950: #281e00;
  --color-gramps-shoehorn: #a78a72;
  --color-gramps-shoehorn-50: #fff5ed;
  --color-gramps-shoehorn-100: #feebdc;
  --color-gramps-shoehorn-200: #efd8c6;
  --color-gramps-shoehorn-300: #dcc3ae;
  --color-gramps-shoehorn-400: #c0a48d;
  --color-gramps-shoehorn-500: #a78a72;
  --color-gramps-shoehorn-600: #896e57;
  --color-gramps-shoehorn-700: #6f5641;
  --color-gramps-shoehorn-800: #58422f;
  --color-gramps-shoehorn-900: #443122;
  --color-gramps-shoehorn-950: #2b1d12;
  --color-moonscape: #8c6877;
  --color-moonscape-50: #fff1f6;
  --color-moonscape-100: #fee5ef;
  --color-moonscape-200: #efd1dd;
  --color-moonscape-300: #dcbbc8;
  --color-moonscape-400: #c09caa;
  --color-moonscape-500: #a68190;
  --color-moonscape-600: #8c6877;
  --color-moonscape-700: #71515f;
  --color-moonscape-800: #5a3e4a;
  --color-moonscape-900: #462e38;
  --color-moonscape-950: #2d1b23;
  --color-purple-passion: #724678;
  --color-purple-passion-50: #fdf0ff;
  --color-purple-passion-100: #fce1ff;
  --color-purple-passion-200: #efcaf4;
  --color-purple-passion-300: #dcb2e1;
  --color-purple-passion-400: #bf91c5;
  --color-purple-passion-500: #a476aa;
  --color-purple-passion-600: #895c8f;
  --color-purple-passion-700: #724678;
  --color-purple-passion-800: #5a365f;
  --color-purple-passion-900: #46284b;
  --color-purple-passion-950: #2d1730;
  --color-elegant-purple-gown: #5a1d76;
  --color-elegant-purple-gown-50: #faf2ff;
  --color-elegant-purple-gown-100: #f5e4ff;
  --color-elegant-purple-gown-200: #ebc8ff;
  --color-elegant-purple-gown-300: #dda8fb;
  --color-elegant-purple-gown-400: #bf84e0;
  --color-elegant-purple-gown-500: #a367c3;
  --color-elegant-purple-gown-600: #864ca5;
  --color-elegant-purple-gown-700: #6d3788;
  --color-elegant-purple-gown-800: #5a1d76;
  --color-elegant-purple-gown-900: #431b57;
  --color-elegant-purple-gown-950: #2b0e39;
}

Similar palettes