Mushroom Forest to Oceanic Noir color palette

937E56Mushroom Forest AC9C82Incense 535D75Night Market C4D2E3Misty Mountains 1F2D3COceanic Noir

About this palette

Mushroom Forest to Oceanic Noir is a 5-color muted, vintage palette: #937E56 (Mushroom Forest), #AC9C82 (Incense), #535D75 (Night Market), #C4D2E3 (Misty Mountains), #1F2D3C (Oceanic Noir). It mixes yellow, blue, gray tones and feels warm overall. The strongest text pairing is #C4D2E3 on #1F2D3C with a contrast ratio of 9.12:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mushroom Forest	rgb(147, 126, 86)	hsl(39, 26%, 46%)
Incense	rgb(172, 156, 130)	hsl(37, 20%, 59%)
Night Market	rgb(83, 93, 117)	hsl(222, 17%, 39%)
Misty Mountains	rgb(196, 210, 227)	hsl(213, 36%, 83%)
Oceanic Noir	rgb(31, 45, 60)	hsl(211, 32%, 18%)

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.12:1 Very good#C4D2E3 on #1F2D3C
Aa9.12:1 Very good#1F2D3C on #C4D2E3
Aa5.23:1 Good#AC9C82 on #1F2D3C
Aa5.23:1 Good#1F2D3C on #AC9C82
Aa4.29:1 Poor#535D75 on #C4D2E3
Aa4.29:1 Poor#C4D2E3 on #535D75
Aa3.58:1 Poor#937E56 on #1F2D3C
Aa3.58:1 Poor#1F2D3C on #937E56

Color blindness preview

CSS variables

/* Mushroom Forest to Oceanic Noir — https://swatchly.xyz/palette/937e56-ac9c82-535d75-c4d2e3-1f2d3c */
:root {
  --mushroom-forest: #937e56;
  --incense: #ac9c82;
  --night-market: #535d75;
  --misty-mountains: #c4d2e3;
  --oceanic-noir: #1f2d3c;
}

Tailwind CSS v4

/* Mushroom Forest to Oceanic Noir — https://swatchly.xyz/palette/937e56-ac9c82-535d75-c4d2e3-1f2d3c */
@theme {
  --color-mushroom-forest: #937e56;
  --color-mushroom-forest-50: #fff3dc;
  --color-mushroom-forest-100: #f6e8cd;
  --color-mushroom-forest-200: #e4d3b3;
  --color-mushroom-forest-300: #cebb97;
  --color-mushroom-forest-400: #af9a73;
  --color-mushroom-forest-500: #937e56;
  --color-mushroom-forest-600: #79653e;
  --color-mushroom-forest-700: #614f2c;
  --color-mushroom-forest-800: #4d3e1f;
  --color-mushroom-forest-900: #3c2f15;
  --color-mushroom-forest-950: #271d0a;
  --color-incense: #ac9c82;
  --color-incense-50: #fcf3e3;
  --color-incense-100: #f3e8d7;
  --color-incense-200: #e0d3bf;
  --color-incense-300: #cabca5;
  --color-incense-400: #ac9c82;
  --color-incense-500: #918168;
  --color-incense-600: #766850;
  --color-incense-700: #5f523c;
  --color-incense-800: #4b402d;
  --color-incense-900: #3b3121;
  --color-incense-950: #251e12;
  --color-night-market: #535d75;
  --color-night-market-50: #f1f5ff;
  --color-night-market-100: #e4ebfd;
  --color-night-market-200: #d0d9ee;
  --color-night-market-300: #bac4db;
  --color-night-market-400: #9ba6bf;
  --color-night-market-500: #818ca5;
  --color-night-market-600: #68738b;
  --color-night-market-700: #535d75;
  --color-night-market-800: #40485d;
  --color-night-market-900: #303749;
  --color-night-market-950: #1d222f;
  --color-misty-mountains: #c4d2e3;
  --color-misty-mountains-50: #e9f1fb;
  --color-misty-mountains-100: #dde6f2;
  --color-misty-mountains-200: #c4d2e3;
  --color-misty-mountains-300: #b0bccb;
  --color-misty-mountains-400: #929eae;
  --color-misty-mountains-500: #778494;
  --color-misty-mountains-600: #5f6b7a;
  --color-misty-mountains-700: #4a5563;
  --color-misty-mountains-800: #3a434f;
  --color-misty-mountains-900: #2b343d;
  --color-misty-mountains-950: #1a2027;
  --color-oceanic-noir: #1f2d3c;
  --color-oceanic-noir-50: #eef6ff;
  --color-oceanic-noir-100: #e1edf9;
  --color-oceanic-noir-200: #ccd9e8;
  --color-oceanic-noir-300: #b4c3d3;
  --color-oceanic-noir-400: #92a2b4;
  --color-oceanic-noir-500: #758597;
  --color-oceanic-noir-600: #5a697a;
  --color-oceanic-noir-700: #445261;
  --color-oceanic-noir-800: #323d4a;
  --color-oceanic-noir-900: #1f2d3c;
  --color-oceanic-noir-950: #141a22;
}