Muddy Olive to Royal Decree Color Palette

About this palette

Muddy Olive to Royal Decree is a 5-color muted palette: #4B5E41 (Muddy Olive), #7B836E (Wreath), #C3B0D7 (Moonraker), #EAF3E2 (White Mecca), #3F3648 (Royal Decree). It mixes green, gray, purple, white tones and feels cool overall. The strongest text pairing is #EAF3E2 on #3F3648 with a contrast ratio of 10.05:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Muddy Olive	rgb(75, 94, 65)	hsl(99, 18%, 31%)
Wreath	rgb(123, 131, 110)	hsl(83, 9%, 47%)
Moonraker	rgb(195, 176, 215)	hsl(269, 33%, 77%)
White Mecca	rgb(234, 243, 226)	hsl(92, 41%, 92%)
Royal Decree	rgb(63, 54, 72)	hsl(270, 14%, 25%)

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.

Aa10.05:1 Very good#EAF3E2 on #3F3648
Aa10.05:1 Very good#3F3648 on #EAF3E2
Aa6.19:1 Good#4B5E41 on #EAF3E2
Aa6.19:1 Good#EAF3E2 on #4B5E41
Aa5.74:1 Good#C3B0D7 on #3F3648
Aa5.74:1 Good#3F3648 on #C3B0D7
Aa3.53:1 Poor#4B5E41 on #C3B0D7
Aa3.53:1 Poor#C3B0D7 on #4B5E41

Color blindness preview

CSS variables

/* Muddy Olive to Royal Decree — https://swatchly.xyz/palette/4b5e41-7b836e-c3b0d7-eaf3e2-3f3648 */
:root {
  --muddy-olive: #4b5e41;
  --wreath: #7b836e;
  --moonraker: #c3b0d7;
  --white-mecca: #eaf3e2;
  --royal-decree: #3f3648;
}

Tailwind CSS v4

/* Muddy Olive to Royal Decree — https://swatchly.xyz/palette/4b5e41-7b836e-c3b0d7-eaf3e2-3f3648 */
@theme {
  --color-muddy-olive: #4b5e41;
  --color-muddy-olive-50: #edfae7;
  --color-muddy-olive-100: #e2f0db;
  --color-muddy-olive-200: #cddec5;
  --color-muddy-olive-300: #b6c9ad;
  --color-muddy-olive-400: #96aa8b;
  --color-muddy-olive-500: #7b8f70;
  --color-muddy-olive-600: #617557;
  --color-muddy-olive-700: #4b5e41;
  --color-muddy-olive-800: #3a4932;
  --color-muddy-olive-900: #2c3925;
  --color-muddy-olive-950: #1a2315;
  --color-wreath: #7b836e;
  --color-wreath-50: #f1f6e9;
  --color-wreath-100: #e5ebdc;
  --color-wreath-200: #d0d7c5;
  --color-wreath-300: #b8c0ac;
  --color-wreath-400: #979f8a;
  --color-wreath-500: #7b836e;
  --color-wreath-600: #626a56;
  --color-wreath-700: #4d5442;
  --color-wreath-800: #3c4233;
  --color-wreath-900: #2e3326;
  --color-wreath-950: #1c2016;
  --color-moonraker: #c3b0d7;
  --color-moonraker-50: #f6edff;
  --color-moonraker-100: #ece0fa;
  --color-moonraker-200: #d9cae9;
  --color-moonraker-300: #c3b0d7;
  --color-moonraker-400: #a593b7;
  --color-moonraker-500: #8b789d;
  --color-moonraker-600: #716082;
  --color-moonraker-700: #5b4b6a;
  --color-moonraker-800: #483a56;
  --color-moonraker-900: #392d44;
  --color-moonraker-950: #231b2c;
  --color-white-mecca: #eaf3e2;
  --color-white-mecca-50: #f6fbf2;
  --color-white-mecca-100: #eaf3e2;
  --color-white-mecca-200: #d7ddd1;
  --color-white-mecca-300: #bfc6b9;
  --color-white-mecca-400: #9fa797;
  --color-white-mecca-500: #838b7b;
  --color-white-mecca-600: #686f61;
  --color-white-mecca-700: #51584b;
  --color-white-mecca-800: #3f4539;
  --color-white-mecca-900: #30352b;
  --color-white-mecca-950: #1d211a;
  --color-royal-decree: #3f3648;
  --color-royal-decree-50: #f8f2ff;
  --color-royal-decree-100: #efe8f6;
  --color-royal-decree-200: #dcd4e4;
  --color-royal-decree-300: #c6bccf;
  --color-royal-decree-400: #a89eb3;
  --color-royal-decree-500: #8e8499;
  --color-royal-decree-600: #756b7f;
  --color-royal-decree-700: #5f5669;
  --color-royal-decree-800: #4d4555;
  --color-royal-decree-900: #3f3648;
  --color-royal-decree-950: #28232d;
}