Mushroom Forest to Nettle Color Palette

About this palette

Mushroom Forest to Nettle is a 5-color warm, vintage palette: #948260 (Mushroom Forest), #724850 (Nocturne Red), #004332 (Zucchini), #C2CEF4 (Frost Fairy), #BCB27C (Nettle). It mixes yellow, red, turquoise, blue tones and feels warm overall. The strongest text pairing is #004332 on #C2CEF4 with a contrast ratio of 7.26:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mushroom Forest	rgb(148, 130, 96)	hsl(39, 21%, 48%)
Nocturne Red	rgb(114, 72, 80)	hsl(349, 23%, 36%)
Zucchini	rgb(0, 67, 50)	hsl(165, 100%, 13%)
Frost Fairy	rgb(194, 206, 244)	hsl(226, 69%, 86%)
Nettle	rgb(188, 178, 124)	hsl(51, 32%, 61%)

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.

Aa7.26:1 Very good#004332 on #C2CEF4
Aa7.26:1 Very good#C2CEF4 on #004332
Aa5.30:1 Good#004332 on #BCB27C
Aa5.30:1 Good#BCB27C on #004332
Aa4.87:1 Good#724850 on #C2CEF4
Aa4.87:1 Good#C2CEF4 on #724850
Aa3.55:1 Poor#724850 on #BCB27C
Aa3.55:1 Poor#BCB27C on #724850

Color blindness preview

CSS variables

/* Mushroom Forest to Nettle — https://swatchly.xyz/palette/948260-724850-004332-c2cef4-bcb27c */
:root {
  --mushroom-forest: #948260;
  --nocturne-red: #724850;
  --zucchini: #004332;
  --frost-fairy: #c2cef4;
  --nettle: #bcb27c;
}

Tailwind CSS v4

/* Mushroom Forest to Nettle — https://swatchly.xyz/palette/948260-724850-004332-c2cef4-bcb27c */
@theme {
  --color-mushroom-forest: #948260;
  --color-mushroom-forest-50: #fef4df;
  --color-mushroom-forest-100: #f5e9d2;
  --color-mushroom-forest-200: #e3d5ba;
  --color-mushroom-forest-300: #cebe9f;
  --color-mushroom-forest-400: #b09e7c;
  --color-mushroom-forest-500: #948260;
  --color-mushroom-forest-600: #796848;
  --color-mushroom-forest-700: #615234;
  --color-mushroom-forest-800: #4d4026;
  --color-mushroom-forest-900: #3c311a;
  --color-mushroom-forest-950: #261e0e;
  --color-nocturne-red: #724850;
  --color-nocturne-red-50: #fff1f3;
  --color-nocturne-red-100: #ffe3e7;
  --color-nocturne-red-200: #f2ccd2;
  --color-nocturne-red-300: #dfb4bb;
  --color-nocturne-red-400: #c2949c;
  --color-nocturne-red-500: #a67880;
  --color-nocturne-red-600: #8a5e66;
  --color-nocturne-red-700: #724850;
  --color-nocturne-red-800: #5a383e;
  --color-nocturne-red-900: #462a2f;
  --color-nocturne-red-950: #2d191d;
  --color-zucchini: #004332;
  --color-zucchini-50: #defef1;
  --color-zucchini-100: #d1f5e6;
  --color-zucchini-200: #b8e3d2;
  --color-zucchini-300: #9ccebb;
  --color-zucchini-400: #79b09c;
  --color-zucchini-500: #5d9681;
  --color-zucchini-600: #447b68;
  --color-zucchini-700: #306553;
  --color-zucchini-800: #215141;
  --color-zucchini-900: #004332;
  --color-zucchini-950: #0a2a20;
  --color-frost-fairy: #c2cef4;
  --color-frost-fairy-50: #eaefff;
  --color-frost-fairy-100: #dbe3fd;
  --color-frost-fairy-200: #c2cef4;
  --color-frost-fairy-300: #afb9da;
  --color-frost-fairy-400: #909bbe;
  --color-frost-fairy-500: #7681a4;
  --color-frost-fairy-600: #5e6889;
  --color-frost-fairy-700: #4a5370;
  --color-frost-fairy-800: #39415b;
  --color-frost-fairy-900: #2b3248;
  --color-frost-fairy-950: #1a1e2e;
  --color-nettle: #bcb27c;
  --color-nettle-50: #fffbe6;
  --color-nettle-100: #faf4d5;
  --color-nettle-200: #eae3be;
  --color-nettle-300: #d7cfa4;
  --color-nettle-400: #bcb27c;
  --color-nettle-500: #9d935f;
  --color-nettle-600: #807642;
  --color-nettle-700: #665d2c;
  --color-nettle-800: #4f471c;
  --color-nettle-900: #3c3510;
  --color-nettle-950: #241f06;
}