Lonestar to Shallow Water Color Palette

About this palette

Lonestar to Shallow Water is a 5-color warm palette: #5A1F19 (Lonestar), #515680 (Dusk), #C36553 (Barbecue), #E2BB5B (Crisps), #7EEDFA (Shallow Water). It mixes brown, purple, red, yellow, turquoise tones and feels warm overall. The strongest text pairing is #5A1F19 on #7EEDFA with a contrast ratio of 9.35:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lonestar	rgb(90, 31, 25)	hsl(6, 57%, 23%)
Dusk	rgb(81, 86, 128)	hsl(234, 22%, 41%)
Barbecue	rgb(195, 101, 83)	hsl(10, 48%, 55%)
Crisps	rgb(226, 187, 91)	hsl(43, 70%, 62%)
Shallow Water	rgb(126, 237, 250)	hsl(186, 93%, 74%)

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.35:1 Very good#5A1F19 on #7EEDFA
Aa9.35:1 Very good#7EEDFA on #5A1F19
Aa6.99:1 Good#5A1F19 on #E2BB5B
Aa6.99:1 Good#E2BB5B on #5A1F19
Aa5.14:1 Good#515680 on #7EEDFA
Aa5.14:1 Good#7EEDFA on #515680
Aa3.84:1 Poor#515680 on #E2BB5B
Aa3.84:1 Poor#E2BB5B on #515680

Color blindness preview

CSS variables

/* Lonestar to Shallow Water — https://swatchly.xyz/palette/5a1f19-515680-c36553-e2bb5b-7eedfa */
:root {
  --lonestar: #5a1f19;
  --dusk: #515680;
  --barbecue: #c36553;
  --crisps: #e2bb5b;
  --shallow-water: #7eedfa;
}

Tailwind CSS v4

/* Lonestar to Shallow Water — https://swatchly.xyz/palette/5a1f19-515680-c36553-e2bb5b-7eedfa */
@theme {
  --color-lonestar: #5a1f19;
  --color-lonestar-50: #fff2ef;
  --color-lonestar-100: #ffe4e0;
  --color-lonestar-200: #ffc8c0;
  --color-lonestar-300: #eeafa5;
  --color-lonestar-400: #d28e84;
  --color-lonestar-500: #b67268;
  --color-lonestar-600: #995950;
  --color-lonestar-700: #7e443c;
  --color-lonestar-800: #67332d;
  --color-lonestar-900: #5a1f19;
  --color-lonestar-950: #361612;
  --color-dusk: #515680;
  --color-dusk-50: #f3f4ff;
  --color-dusk-100: #e6eaff;
  --color-dusk-200: #d0d6fa;
  --color-dusk-300: #b9c0e9;
  --color-dusk-400: #9aa1cd;
  --color-dusk-500: #8086b3;
  --color-dusk-600: #666c97;
  --color-dusk-700: #515680;
  --color-dusk-800: #3f4365;
  --color-dusk-900: #2f3350;
  --color-dusk-950: #1d1f34;
  --color-barbecue: #c36553;
  --color-barbecue-50: #fff1ee;
  --color-barbecue-100: #ffe3dd;
  --color-barbecue-200: #ffc7bb;
  --color-barbecue-300: #fca694;
  --color-barbecue-400: #e08270;
  --color-barbecue-500: #c36553;
  --color-barbecue-600: #a44b3b;
  --color-barbecue-700: #883728;
  --color-barbecue-800: #6e271b;
  --color-barbecue-900: #581b11;
  --color-barbecue-950: #3a0e07;
  --color-crisps: #e2bb5b;
  --color-crisps-50: #fff4da;
  --color-crisps-100: #ffe9b5;
  --color-crisps-200: #f1d490;
  --color-crisps-300: #e2bb5b;
  --color-crisps-400: #c09c3f;
  --color-crisps-500: #a58010;
  --color-crisps-600: #866600;
  --color-crisps-700: #6b5100;
  --color-crisps-800: #543f00;
  --color-crisps-900: #413000;
  --color-crisps-950: #291d00;
  --color-shallow-water: #7eedfa;
  --color-shallow-water-50: #e2fcff;
  --color-shallow-water-100: #c1f8ff;
  --color-shallow-water-200: #7eedfa;
  --color-shallow-water-300: #79d3de;
  --color-shallow-water-400: #48b4c0;
  --color-shallow-water-500: #1498a5;
  --color-shallow-water-600: #007b86;
  --color-shallow-water-700: #00616a;
  --color-shallow-water-800: #004c53;
  --color-shallow-water-900: #003b40;
  --color-shallow-water-950: #002529;
}