Muddy Brown to Peach Fizz Color Palette

About this palette

Muddy Brown to Peach Fizz is a 4-color vibrant, warm palette: #7F7100 (Muddy Brown), #009F5C (Shamrock), #F56C00 (Apocalyptic Orange), #FFA57E (Peach Fizz). It mixes brown, green, orange tones and feels warm overall. The strongest text pairing is #7F7100 on #FFA57E with a contrast ratio of 2.56:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Muddy Brown	rgb(127, 113, 0)	hsl(53, 100%, 25%)
Shamrock	rgb(0, 159, 92)	hsl(155, 100%, 31%)
Apocalyptic Orange	rgb(245, 108, 0)	hsl(26, 100%, 48%)
Peach Fizz	rgb(255, 165, 126)	hsl(18, 100%, 75%)

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 Peach Fizz — https://swatchly.xyz/palette/7f7100-009f5c-f56c00-ffa57e */
:root {
  --muddy-brown: #7f7100;
  --shamrock: #009f5c;
  --apocalyptic-orange: #f56c00;
  --peach-fizz: #ffa57e;
}

Tailwind CSS v4

/* Muddy Brown to Peach Fizz — https://swatchly.xyz/palette/7f7100-009f5c-f56c00-ffa57e */
@theme {
  --color-muddy-brown: #7f7100;
  --color-muddy-brown-50: #fef7c7;
  --color-muddy-brown-100: #f6eeb8;
  --color-muddy-brown-200: #e5db9b;
  --color-muddy-brown-300: #d1c57b;
  --color-muddy-brown-400: #b3a651;
  --color-muddy-brown-500: #998b2e;
  --color-muddy-brown-600: #7f7100;
  --color-muddy-brown-700: #655900;
  --color-muddy-brown-800: #4f4600;
  --color-muddy-brown-900: #3d3500;
  --color-muddy-brown-950: #262100;
  --color-shamrock: #009f5c;
  --color-shamrock-50: #ddffe8;
  --color-shamrock-100: #b8fed0;
  --color-shamrock-200: #98edb7;
  --color-shamrock-300: #74d99c;
  --color-shamrock-400: #42bb79;
  --color-shamrock-500: #009f5c;
  --color-shamrock-600: #008049;
  --color-shamrock-700: #006639;
  --color-shamrock-800: #00502b;
  --color-shamrock-900: #003e20;
  --color-shamrock-950: #002712;
  --color-apocalyptic-orange: #f56c00;
  --color-apocalyptic-orange-50: #ffefe8;
  --color-apocalyptic-orange-100: #ffe0d2;
  --color-apocalyptic-orange-200: #ffc4a7;
  --color-apocalyptic-orange-300: #ffa070;
  --color-apocalyptic-orange-400: #f56c00;
  --color-apocalyptic-orange-500: #cd5900;
  --color-apocalyptic-orange-600: #a74700;
  --color-apocalyptic-orange-700: #863700;
  --color-apocalyptic-orange-800: #6a2b00;
  --color-apocalyptic-orange-900: #542000;
  --color-apocalyptic-orange-950: #381200;
  --color-peach-fizz: #ffa57e;
  --color-peach-fizz-50: #fff1eb;
  --color-peach-fizz-100: #ffe3d7;
  --color-peach-fizz-200: #ffc7b0;
  --color-peach-fizz-300: #ffa57e;
  --color-peach-fizz-400: #db8763;
  --color-peach-fizz-500: #bf6b45;
  --color-peach-fizz-600: #a1512c;
  --color-peach-fizz-700: #853d19;
  --color-peach-fizz-800: #6c2c0b;
  --color-peach-fizz-900: #562004;
  --color-peach-fizz-950: #381101;
}