Muddy Brown to Paella Color Palette

About this palette

Muddy Brown to Paella is a 4-color vibrant, warm, gradient palette: #817000 (Muddy Brown), #D56000 (Cinnamon), #3DBA1B (Sour Apple Rings), #DEC800 (Paella). It mixes brown, orange, green, yellow tones and feels warm overall. The strongest text pairing is #817000 on #DEC800 with a contrast ratio of 2.91:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Muddy Brown	rgb(129, 112, 0)	hsl(52, 100%, 25%)
Cinnamon	rgb(213, 96, 0)	hsl(27, 100%, 42%)
Sour Apple Rings	rgb(61, 186, 27)	hsl(107, 75%, 42%)
Paella	rgb(222, 200, 0)	hsl(54, 100%, 44%)

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 Paella — https://swatchly.xyz/palette/817000-d56000-3dba1b-dec800 */
:root {
  --muddy-brown: #817000;
  --cinnamon: #d56000;
  --sour-apple-rings: #3dba1b;
  --paella: #dec800;
}

Tailwind CSS v4

/* Muddy Brown to Paella — https://swatchly.xyz/palette/817000-d56000-3dba1b-dec800 */
@theme {
  --color-muddy-brown: #817000;
  --color-muddy-brown-50: #fff7c9;
  --color-muddy-brown-100: #f7edb8;
  --color-muddy-brown-200: #e7db9b;
  --color-muddy-brown-300: #d3c57b;
  --color-muddy-brown-400: #b6a551;
  --color-muddy-brown-500: #9b8a2d;
  --color-muddy-brown-600: #817000;
  --color-muddy-brown-700: #665900;
  --color-muddy-brown-800: #504500;
  --color-muddy-brown-900: #3e3500;
  --color-muddy-brown-950: #272000;
  --color-cinnamon: #d56000;
  --color-cinnamon-50: #fff2ec;
  --color-cinnamon-100: #ffe6d9;
  --color-cinnamon-200: #ffcbb1;
  --color-cinnamon-300: #ffab7e;
  --color-cinnamon-400: #f17f3a;
  --color-cinnamon-500: #d56000;
  --color-cinnamon-600: #ad4c00;
  --color-cinnamon-700: #8a3c00;
  --color-cinnamon-800: #6d2d00;
  --color-cinnamon-900: #552200;
  --color-cinnamon-950: #371300;
  --color-sour-apple-rings: #3dba1b;
  --color-sour-apple-rings-50: #dcffd5;
  --color-sour-apple-rings-100: #b6ffa8;
  --color-sour-apple-rings-200: #96ee84;
  --color-sour-apple-rings-300: #72d95e;
  --color-sour-apple-rings-400: #3dba1b;
  --color-sour-apple-rings-500: #2a9c00;
  --color-sour-apple-rings-600: #207e00;
  --color-sour-apple-rings-700: #176400;
  --color-sour-apple-rings-800: #104f00;
  --color-sour-apple-rings-900: #0b3e00;
  --color-sour-apple-rings-950: #042700;
  --color-paella: #dec800;
  --color-paella-50: #fffad0;
  --color-paella-100: #fdf1a0;
  --color-paella-200: #eddf7a;
  --color-paella-300: #dec800;
  --color-paella-400: #baa700;
  --color-paella-500: #9a8b00;
  --color-paella-600: #7c6f00;
  --color-paella-700: #625800;
  --color-paella-800: #4c4400;
  --color-paella-900: #3a3300;
  --color-paella-950: #242000;
}