Muddy Brown to Bruise Color Palette

About this palette

Muddy Brown to Bruise is a 5-color warm palette: #8D6B00 (Muddy Brown), #72D7F2 (Sky), #49004B (Clairvoyant), #C8A037 (Local Curry), #7F3B76 (Bruise). It mixes brown, blue, purple, yellow, pink tones and feels warm overall. The strongest text pairing is #72D7F2 on #49004B with a contrast ratio of 9.18:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Muddy Brown	rgb(141, 107, 0)	hsl(46, 100%, 28%)
Sky	rgb(114, 215, 242)	hsl(193, 83%, 70%)
Clairvoyant	rgb(73, 0, 75)	hsl(298, 100%, 15%)
Local Curry	rgb(200, 160, 55)	hsl(43, 57%, 50%)
Bruise	rgb(127, 59, 118)	hsl(308, 37%, 36%)

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.18:1 Very good#72D7F2 on #49004B
Aa9.18:1 Very good#49004B on #72D7F2
Aa6.17:1 Good#49004B on #C8A037
Aa6.17:1 Good#C8A037 on #49004B
Aa4.56:1 Good#72D7F2 on #7F3B76
Aa4.56:1 Good#7F3B76 on #72D7F2
Aa3.06:1 Poor#C8A037 on #7F3B76
Aa3.06:1 Poor#7F3B76 on #C8A037

Color blindness preview

CSS variables

/* Muddy Brown to Bruise — https://swatchly.xyz/palette/8d6b00-72d7f2-49004b-c8a037-7f3b76 */
:root {
  --muddy-brown: #8d6b00;
  --sky: #72d7f2;
  --clairvoyant: #49004b;
  --local-curry: #c8a037;
  --bruise: #7f3b76;
}

Tailwind CSS v4

/* Muddy Brown to Bruise — https://swatchly.xyz/palette/8d6b00-72d7f2-49004b-c8a037-7f3b76 */
@theme {
  --color-muddy-brown: #8d6b00;
  --color-muddy-brown-50: #fff4dc;
  --color-muddy-brown-100: #ffeabc;
  --color-muddy-brown-200: #f1d69b;
  --color-muddy-brown-300: #dec07b;
  --color-muddy-brown-400: #c2a051;
  --color-muddy-brown-500: #a8852d;
  --color-muddy-brown-600: #8d6b00;
  --color-muddy-brown-700: #705500;
  --color-muddy-brown-800: #584200;
  --color-muddy-brown-900: #443200;
  --color-muddy-brown-950: #2b1e00;
  --color-sky: #72d7f2;
  --color-sky-50: #edfbff;
  --color-sky-100: #d6f6ff;
  --color-sky-200: #a5e9fc;
  --color-sky-300: #72d7f2;
  --color-sky-400: #56b5ce;
  --color-sky-500: #2c98b2;
  --color-sky-600: #007b93;
  --color-sky-700: #006175;
  --color-sky-800: #004c5b;
  --color-sky-900: #003a46;
  --color-sky-950: #00242d;
  --color-clairvoyant: #49004b;
  --color-clairvoyant-50: #ffeffe;
  --color-clairvoyant-100: #ffdffe;
  --color-clairvoyant-200: #fbc1f9;
  --color-clairvoyant-300: #e8a7e7;
  --color-clairvoyant-400: #c982c9;
  --color-clairvoyant-500: #ac64ac;
  --color-clairvoyant-600: #8d498d;
  --color-clairvoyant-700: #703370;
  --color-clairvoyant-800: #562357;
  --color-clairvoyant-900: #49004b;
  --color-clairvoyant-950: #280b28;
  --color-local-curry: #c8a037;
  --color-local-curry-50: #fff6e1;
  --color-local-curry-100: #ffecc0;
  --color-local-curry-200: #f5d793;
  --color-local-curry-300: #e2c070;
  --color-local-curry-400: #c8a037;
  --color-local-curry-500: #aa8308;
  --color-local-curry-600: #8a6900;
  --color-local-curry-700: #6d5300;
  --color-local-curry-800: #554000;
  --color-local-curry-900: #423100;
  --color-local-curry-950: #291d00;
  --color-bruise: #7f3b76;
  --color-bruise-50: #fff0fc;
  --color-bruise-100: #ffe0f9;
  --color-bruise-200: #fdc3f2;
  --color-bruise-300: #eba9e0;
  --color-bruise-400: #cf87c3;
  --color-bruise-500: #b36ba9;
  --color-bruise-600: #97528d;
  --color-bruise-700: #7f3b76;
  --color-bruise-800: #642d5d;
  --color-bruise-900: #4f2049;
  --color-bruise-950: #34112f;
}