Hot Sauce to Lonestar Color Palette

About this palette

Hot Sauce to Lonestar is a 4-color vintage palette: #A64D50 (Hot Sauce), #CBEFFF (Water), #48AF90 (Hole in One), #512325 (Lonestar). It mixes red, blue, turquoise, brown tones and feels balanced overall. The strongest text pairing is #CBEFFF on #512325 with a contrast ratio of 10.72:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hot Sauce	rgb(166, 77, 80)	hsl(358, 37%, 48%)
Water	rgb(203, 239, 255)	hsl(198, 100%, 90%)
Hole in One	rgb(72, 175, 144)	hsl(162, 42%, 48%)
Lonestar	rgb(81, 35, 37)	hsl(357, 40%, 23%)

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.72:1 Very good#CBEFFF on #512325
Aa10.72:1 Very good#512325 on #CBEFFF
Aa4.83:1 Good#48AF90 on #512325
Aa4.83:1 Good#512325 on #48AF90
Aa4.56:1 Good#A64D50 on #CBEFFF
Aa4.56:1 Good#CBEFFF on #A64D50

Color blindness preview

CSS variables

/* Hot Sauce to Lonestar — https://swatchly.xyz/palette/a64d50-cbefff-48af90-512325 */
:root {
  --hot-sauce: #a64d50;
  --water: #cbefff;
  --hole-in-one: #48af90;
  --lonestar: #512325;
}

Tailwind CSS v4

/* Hot Sauce to Lonestar — https://swatchly.xyz/palette/a64d50-cbefff-48af90-512325 */
@theme {
  --color-hot-sauce: #a64d50;
  --color-hot-sauce-50: #fff1f1;
  --color-hot-sauce-100: #ffe4e3;
  --color-hot-sauce-200: #ffc8c7;
  --color-hot-sauce-300: #fca7a7;
  --color-hot-sauce-400: #e08485;
  --color-hot-sauce-500: #c46869;
  --color-hot-sauce-600: #a64d50;
  --color-hot-sauce-700: #88393c;
  --color-hot-sauce-800: #6e292c;
  --color-hot-sauce-900: #581c20;
  --color-hot-sauce-950: #390f12;
  --color-water: #cbefff;
  --color-water-50: #e3f6ff;
  --color-water-100: #cbefff;
  --color-water-200: #c0dae6;
  --color-water-300: #a7c5d2;
  --color-water-400: #85a6b4;
  --color-water-500: #6a8b9a;
  --color-water-600: #51717f;
  --color-water-700: #3d5a67;
  --color-water-800: #2d4751;
  --color-water-900: #213640;
  --color-water-950: #122228;
  --color-hole-in-one: #48af90;
  --color-hole-in-one-50: #cfffed;
  --color-hole-in-one-100: #b9f7e0;
  --color-hole-in-one-200: #9ae4ca;
  --color-hole-in-one-300: #78ceb1;
  --color-hole-in-one-400: #48af90;
  --color-hole-in-one-500: #279476;
  --color-hole-in-one-600: #00795e;
  --color-hole-in-one-700: #00614b;
  --color-hole-in-one-800: #004c3a;
  --color-hole-in-one-900: #003c2d;
  --color-hole-in-one-950: #00261c;
  --color-lonestar: #512325;
  --color-lonestar-50: #fff1f1;
  --color-lonestar-100: #ffe4e3;
  --color-lonestar-200: #f8cbca;
  --color-lonestar-300: #e5b2b2;
  --color-lonestar-400: #c89191;
  --color-lonestar-500: #ac7676;
  --color-lonestar-600: #8f5c5c;
  --color-lonestar-700: #754747;
  --color-lonestar-800: #5e3636;
  --color-lonestar-900: #512325;
  --color-lonestar-950: #301718;
}