Muddy Green to Oasis Color Palette

About this palette

Muddy Green to Oasis is a 5-color cool, vintage palette: #6F6A00 (Muddy Green), #FFDBDA (Strawberry Blonde), #B7ACFF (Purple Illusion), #003E45 (Rich Black), #009196 (Oasis). It mixes brown, pink, purple, turquoise tones and feels cool overall. The strongest text pairing is #FFDBDA on #003E45 with a contrast ratio of 9.24:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Muddy Green	rgb(111, 106, 0)	hsl(57, 100%, 22%)
Strawberry Blonde	rgb(255, 219, 218)	hsl(2, 100%, 93%)
Purple Illusion	rgb(183, 172, 255)	hsl(248, 100%, 84%)
Rich Black	rgb(0, 62, 69)	hsl(186, 100%, 14%)
Oasis	rgb(0, 145, 150)	hsl(182, 100%, 29%)

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.24:1 Very good#FFDBDA on #003E45
Aa9.24:1 Very good#003E45 on #FFDBDA
Aa5.84:1 Good#B7ACFF on #003E45
Aa5.84:1 Good#003E45 on #B7ACFF
Aa4.39:1 Poor#6F6A00 on #FFDBDA
Aa4.39:1 Poor#FFDBDA on #6F6A00
Aa3.09:1 Poor#003E45 on #009196
Aa3.09:1 Poor#009196 on #003E45

Color blindness preview

CSS variables

/* Muddy Green to Oasis — https://swatchly.xyz/palette/6f6a00-ffdbda-b7acff-003e45-009196 */
:root {
  --muddy-green: #6f6a00;
  --strawberry-blonde: #ffdbda;
  --purple-illusion: #b7acff;
  --rich-black: #003e45;
  --oasis: #009196;
}

Tailwind CSS v4

/* Muddy Green to Oasis — https://swatchly.xyz/palette/6f6a00-ffdbda-b7acff-003e45-009196 */
@theme {
  --color-muddy-green: #6f6a00;
  --color-muddy-green-50: #faf9ca;
  --color-muddy-green-100: #efeeb9;
  --color-muddy-green-200: #dcda9a;
  --color-muddy-green-300: #c5c279;
  --color-muddy-green-400: #a6a24f;
  --color-muddy-green-500: #8a862d;
  --color-muddy-green-600: #6f6a00;
  --color-muddy-green-700: #585400;
  --color-muddy-green-800: #454100;
  --color-muddy-green-900: #353200;
  --color-muddy-green-950: #211f00;
  --color-strawberry-blonde: #ffdbda;
  --color-strawberry-blonde-50: #ffeaea;
  --color-strawberry-blonde-100: #ffdbda;
  --color-strawberry-blonde-200: #e6cbca;
  --color-strawberry-blonde-300: #d3b5b4;
  --color-strawberry-blonde-400: #b69595;
  --color-strawberry-blonde-500: #9b7b7a;
  --color-strawberry-blonde-600: #806261;
  --color-strawberry-blonde-700: #694d4d;
  --color-strawberry-blonde-800: #533b3b;
  --color-strawberry-blonde-900: #412d2d;
  --color-strawberry-blonde-950: #291b1b;
  --color-purple-illusion: #b7acff;
  --color-purple-illusion-50: #f0efff;
  --color-purple-illusion-100: #e4e2ff;
  --color-purple-illusion-200: #cfc9ff;
  --color-purple-illusion-300: #b7acff;
  --color-purple-illusion-400: #998edd;
  --color-purple-illusion-500: #8074c2;
  --color-purple-illusion-600: #675ba5;
  --color-purple-illusion-700: #53478a;
  --color-purple-illusion-800: #413671;
  --color-purple-illusion-900: #33295b;
  --color-purple-illusion-950: #1f183c;
  --color-rich-black: #003e45;
  --color-rich-black-50: #e0fbff;
  --color-rich-black-100: #d1f2f7;
  --color-rich-black-200: #b8e0e6;
  --color-rich-black-300: #9dcad1;
  --color-rich-black-400: #79acb4;
  --color-rich-black-500: #5d9199;
  --color-rich-black-600: #44777e;
  --color-rich-black-700: #306067;
  --color-rich-black-800: #214d53;
  --color-rich-black-900: #003e45;
  --color-rich-black-950: #0a262a;
  --color-oasis: #009196;
  --color-oasis-50: #d3fdff;
  --color-oasis-100: #b6f6f9;
  --color-oasis-200: #95e4e7;
  --color-oasis-300: #71ced1;
  --color-oasis-400: #3faeb3;
  --color-oasis-500: #009196;
  --color-oasis-600: #007579;
  --color-oasis-700: #005d60;
  --color-oasis-800: #00494c;
  --color-oasis-900: #00393b;
  --color-oasis-950: #002426;
}