Muddy Brown to Wondrous Wisteria Color Palette

About this palette

Muddy Brown to Wondrous Wisteria is a 5-color vibrant, warm palette: #807000 (Muddy Brown), #008DE1 (Way Beyond the Blue), #FF6162 (Fusion Red), #FF7D39 (Mango Tango), #ADB0FF (Wondrous Wisteria). It mixes brown, blue, red, orange, purple tones and feels warm overall. The strongest text pairing is #807000 on #ADB0FF with a contrast ratio of 2.46:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Muddy Brown	rgb(128, 112, 0)	hsl(52, 100%, 25%)
Way Beyond the Blue	rgb(0, 141, 225)	hsl(202, 100%, 44%)
Fusion Red	rgb(255, 97, 98)	hsl(360, 100%, 69%)
Mango Tango	rgb(255, 125, 57)	hsl(21, 100%, 61%)
Wondrous Wisteria	rgb(173, 176, 255)	hsl(238, 100%, 84%)

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.

Color blindness preview

CSS variables

/* Muddy Brown to Wondrous Wisteria — https://swatchly.xyz/palette/807000-008de1-ff6162-ff7d39-adb0ff */
:root {
  --muddy-brown: #807000;
  --way-beyond-the-blue: #008de1;
  --fusion-red: #ff6162;
  --mango-tango: #ff7d39;
  --wondrous-wisteria: #adb0ff;
}

Tailwind CSS v4

/* Muddy Brown to Wondrous Wisteria — https://swatchly.xyz/palette/807000-008de1-ff6162-ff7d39-adb0ff */
@theme {
  --color-muddy-brown: #807000;
  --color-muddy-brown-50: #fff7c7;
  --color-muddy-brown-100: #f7eeb8;
  --color-muddy-brown-200: #e6db9b;
  --color-muddy-brown-300: #d2c57b;
  --color-muddy-brown-400: #b5a651;
  --color-muddy-brown-500: #9a8a2d;
  --color-muddy-brown-600: #807000;
  --color-muddy-brown-700: #665900;
  --color-muddy-brown-800: #4f4500;
  --color-muddy-brown-900: #3d3500;
  --color-muddy-brown-950: #262000;
  --color-way-beyond-the-blue: #008de1;
  --color-way-beyond-the-blue-50: #eef7ff;
  --color-way-beyond-the-blue-100: #dceeff;
  --color-way-beyond-the-blue-200: #b8ddff;
  --color-way-beyond-the-blue-300: #8bc8ff;
  --color-way-beyond-the-blue-400: #3faafc;
  --color-way-beyond-the-blue-500: #008de1;
  --color-way-beyond-the-blue-600: #0071b6;
  --color-way-beyond-the-blue-700: #005a92;
  --color-way-beyond-the-blue-800: #004674;
  --color-way-beyond-the-blue-900: #00365a;
  --color-way-beyond-the-blue-950: #00213b;
  --color-fusion-red: #ff6162;
  --color-fusion-red-50: #fff0ee;
  --color-fusion-red-100: #ffe1df;
  --color-fusion-red-200: #ffc4c0;
  --color-fusion-red-300: #ffa09b;
  --color-fusion-red-400: #ff6162;
  --color-fusion-red-500: #df4348;
  --color-fusion-red-600: #be2330;
  --color-fusion-red-700: #9f031e;
  --color-fusion-red-800: #7f0015;
  --color-fusion-red-900: #64000e;
  --color-fusion-red-950: #430006;
  --color-mango-tango: #ff7d39;
  --color-mango-tango-50: #fff5f1;
  --color-mango-tango-100: #ffe9e0;
  --color-mango-tango-200: #ffd0bb;
  --color-mango-tango-300: #ffb18d;
  --color-mango-tango-400: #ff7d39;
  --color-mango-tango-500: #de5f0e;
  --color-mango-tango-600: #b54a00;
  --color-mango-tango-700: #903a00;
  --color-mango-tango-800: #712c00;
  --color-mango-tango-900: #582000;
  --color-mango-tango-950: #381200;
  --color-wondrous-wisteria: #adb0ff;
  --color-wondrous-wisteria-50: #eef0ff;
  --color-wondrous-wisteria-100: #e1e3ff;
  --color-wondrous-wisteria-200: #c8ccff;
  --color-wondrous-wisteria-300: #adb0ff;
  --color-wondrous-wisteria-400: #9092dd;
  --color-wondrous-wisteria-500: #7778c2;
  --color-wondrous-wisteria-600: #5f5fa5;
  --color-wondrous-wisteria-700: #4b4a8a;
  --color-wondrous-wisteria-800: #3a3971;
  --color-wondrous-wisteria-900: #2d2c5b;
  --color-wondrous-wisteria-950: #1b1a3c;
}