Hot to Ginger Ale Color Palette

About this palette

Hot to Ginger Ale is a 4-color vintage palette: #A74662 (Hot), #004437 (Botanical Night), #EFF3FF (Cloud Break), #C4A76C (Ginger Ale). It mixes red, turquoise, white, yellow tones and feels warm overall. The strongest text pairing is #004437 on #EFF3FF with a contrast ratio of 10.06:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hot	rgb(167, 70, 98)	hsl(343, 41%, 46%)
Botanical Night	rgb(0, 68, 55)	hsl(169, 100%, 13%)
Cloud Break	rgb(239, 243, 255)	hsl(225, 100%, 97%)
Ginger Ale	rgb(196, 167, 108)	hsl(40, 43%, 60%)

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.

Aa10.06:1 Very good#004437 on #EFF3FF
Aa10.06:1 Very good#EFF3FF on #004437
Aa5.12:1 Good#A74662 on #EFF3FF
Aa5.12:1 Good#EFF3FF on #A74662
Aa4.83:1 Good#004437 on #C4A76C
Aa4.83:1 Good#C4A76C on #004437

Color blindness preview

CSS variables

/* Hot to Ginger Ale — https://swatchly.xyz/palette/a74662-004437-eff3ff-c4a76c */
:root {
  --hot: #a74662;
  --botanical-night: #004437;
  --cloud-break: #eff3ff;
  --ginger-ale: #c4a76c;
}

Tailwind CSS v4

/* Hot to Ginger Ale — https://swatchly.xyz/palette/a74662-004437-eff3ff-c4a76c */
@theme {
  --color-hot: #a74662;
  --color-hot-50: #fff1f4;
  --color-hot-100: #ffe3e8;
  --color-hot-200: #ffc6d2;
  --color-hot-300: #fea2b8;
  --color-hot-400: #e27e97;
  --color-hot-500: #c5617c;
  --color-hot-600: #a74662;
  --color-hot-700: #89324d;
  --color-hot-800: #6f233b;
  --color-hot-900: #58172c;
  --color-hot-950: #3a0b1b;
  --color-botanical-night: #004437;
  --color-botanical-night-50: #defef3;
  --color-botanical-night-100: #d0f5e9;
  --color-botanical-night-200: #b7e2d5;
  --color-botanical-night-300: #9ccdbe;
  --color-botanical-night-400: #79b0a0;
  --color-botanical-night-500: #5d9686;
  --color-botanical-night-600: #447c6d;
  --color-botanical-night-700: #306558;
  --color-botanical-night-800: #215246;
  --color-botanical-night-900: #004437;
  --color-botanical-night-950: #0a2b23;
  --color-cloud-break: #eff3ff;
  --color-cloud-break-50: #eff3ff;
  --color-cloud-break-100: #e7e9f1;
  --color-cloud-break-200: #d3d6df;
  --color-cloud-break-300: #bcc0ca;
  --color-cloud-break-400: #9da1ab;
  --color-cloud-break-500: #828690;
  --color-cloud-break-600: #686b76;
  --color-cloud-break-700: #52555e;
  --color-cloud-break-800: #3f424a;
  --color-cloud-break-900: #303339;
  --color-cloud-break-950: #1d1f24;
  --color-ginger-ale: #c4a76c;
  --color-ginger-ale-50: #fff8e9;
  --color-ginger-ale-100: #ffeece;
  --color-ginger-ale-200: #f1dcb2;
  --color-ginger-ale-300: #dec696;
  --color-ginger-ale-400: #c4a76c;
  --color-ginger-ale-500: #a68a50;
  --color-ginger-ale-600: #896d33;
  --color-ginger-ale-700: #6e551e;
  --color-ginger-ale-800: #57410e;
  --color-ginger-ale-900: #433104;
  --color-ginger-ale-950: #2a1d01;
}