Lonestar to Ghost White Color Palette

About this palette

Lonestar to Ghost White is a 5-color warm, vintage palette: #4F282D (Lonestar), #813D43 (Wild Berry), #888F4F (Green Olive), #78C8D3 (Wavelet), #F9F7FF (Ghost White). It mixes brown, red, green, turquoise, white tones and feels warm overall. The strongest text pairing is #4F282D on #F9F7FF with a contrast ratio of 11.81:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lonestar	rgb(79, 40, 45)	hsl(352, 33%, 23%)
Wild Berry	rgb(129, 61, 67)	hsl(355, 36%, 37%)
Green Olive	rgb(136, 143, 79)	hsl(67, 29%, 44%)
Wavelet	rgb(120, 200, 211)	hsl(187, 51%, 65%)
Ghost White	rgb(249, 247, 255)	hsl(255, 100%, 98%)

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.

Aa11.81:1 Very good#4F282D on #F9F7FF
Aa11.81:1 Very good#F9F7FF on #4F282D
Aa7.37:1 Very good#813D43 on #F9F7FF
Aa7.37:1 Very good#F9F7FF on #813D43
Aa6.57:1 Good#4F282D on #78C8D3
Aa6.57:1 Good#78C8D3 on #4F282D
Aa4.10:1 Poor#813D43 on #78C8D3
Aa4.10:1 Poor#78C8D3 on #813D43

Color blindness preview

CSS variables

/* Lonestar to Ghost White — https://swatchly.xyz/palette/4f282d-813d43-888f4f-78c8d3-f9f7ff */
:root {
  --lonestar: #4f282d;
  --wild-berry: #813d43;
  --green-olive: #888f4f;
  --wavelet: #78c8d3;
  --ghost-white: #f9f7ff;
}

Tailwind CSS v4

/* Lonestar to Ghost White — https://swatchly.xyz/palette/4f282d-813d43-888f4f-78c8d3-f9f7ff */
@theme {
  --color-lonestar: #4f282d;
  --color-lonestar-50: #fff1f2;
  --color-lonestar-100: #ffe3e5;
  --color-lonestar-200: #f3cccf;
  --color-lonestar-300: #dfb4b8;
  --color-lonestar-400: #c29498;
  --color-lonestar-500: #a7797d;
  --color-lonestar-600: #8b6064;
  --color-lonestar-700: #724b4f;
  --color-lonestar-800: #5c393d;
  --color-lonestar-900: #4f282d;
  --color-lonestar-950: #301a1d;
  --color-wild-berry: #813d43;
  --color-wild-berry-50: #fff1f2;
  --color-wild-berry-100: #ffe4e4;
  --color-wild-berry-200: #ffc7c9;
  --color-wild-berry-300: #f0acaf;
  --color-wild-berry-400: #d48a8e;
  --color-wild-berry-500: #b86e73;
  --color-wild-berry-600: #9a5459;
  --color-wild-berry-700: #813d43;
  --color-wild-berry-800: #662f34;
  --color-wild-berry-900: #502226;
  --color-wild-berry-950: #341316;
  --color-green-olive: #888f4f;
  --color-green-olive-50: #f5fad6;
  --color-green-olive-100: #ebf1c8;
  --color-green-olive-200: #d8deae;
  --color-green-olive-300: #c2c992;
  --color-green-olive-400: #a3aa6d;
  --color-green-olive-500: #888f4f;
  --color-green-olive-600: #6d7435;
  --color-green-olive-700: #565c21;
  --color-green-olive-800: #434812;
  --color-green-olive-900: #333708;
  --color-green-olive-950: #1f2203;
  --color-wavelet: #78c8d3;
  --color-wavelet-50: #d2f9ff;
  --color-wavelet-100: #bef0f7;
  --color-wavelet-200: #a1dde5;
  --color-wavelet-300: #78c8d3;
  --color-wavelet-400: #5ca9b4;
  --color-wavelet-500: #3d8f99;
  --color-wavelet-600: #21757f;
  --color-wavelet-700: #085e67;
  --color-wavelet-800: #004b53;
  --color-wavelet-900: #003a41;
  --color-wavelet-950: #002529;
  --color-ghost-white: #f9f7ff;
  --color-ghost-white-50: #f9f7ff;
  --color-ghost-white-100: #eeedf2;
  --color-ghost-white-200: #dad9de;
  --color-ghost-white-300: #c3c1c8;
  --color-ghost-white-400: #a3a1a8;
  --color-ghost-white-500: #87858c;
  --color-ghost-white-600: #6c6b71;
  --color-ghost-white-700: #56545a;
  --color-ghost-white-800: #434147;
  --color-ghost-white-900: #333236;
  --color-ghost-white-950: #1f1f22;
}