Smusher's palette blends warm earthy tones inspired by mushrooms with fresh natural greens and warm neutrals to embody health, flavor, and comfort in a balanced, approachable system.
Smusher's palette blends warm earthy tones inspired by mushrooms with fresh natural greens and warm neutrals to embody health, flavor, and comfort in a balanced, approachable system.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine warm mushroom-inspired browns with fresh natural greens to create a recognizable and harmonious system that represents wholesome nutrition and liveliness.
Clear roles create a consistent brand experience.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this system.
The main colors combine warm mushroom-inspired browns with fresh natural greens to create a recognizable and harmonious system that represents wholesome nutrition and liveliness.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Chestnut provides a warm, earthy base evoking the mushroom's rich flavor and the brand's wholesome approach.
#7C4A2A124, 74, 4223, 49, 330, 40, 66, 51RolesHeadline, Btn Secondary Bg
Tan softens the palette with a comforting warmth that reflects the brand's approachable and satisfying character.
#A97449169, 116, 7327, 40, 470, 31, 57, 34Forest Green adds a fresh, natural vibrancy to highlight health and vitality in the brand’s messaging.
#4C7D4776, 125, 71114, 28, 3839, 0, 43, 51Support colors extend the main palette with muted earth tones and softer greens that subtly reinforce the natural and wholesome qualities without overpowering.
RolesIcon, Border, Divider, Outline
Saddle Brown complements Chestnut by adding a muted, grounded tone for interface elements, reinforcing the earthy mood.
#8C6B4F140, 107, 7928, 28, 430, 24, 44, 45Sage offers a softer green accent that balances Forest Green with a gentle, fresh nuance reflecting nature and wellness.
#7FA46B127, 164, 10799, 24, 5323, 0, 35, 36Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F5F5F5245, 245, 2450, 0, 960, 0, 0, 4RolesText
#3E3E3E62, 62, 620, 0, 240, 0, 0, 76Copy palette values for design systems, websites, and client handoff.
Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.
Use when: you need the actual colors.:root {
--color-chestnut: #7C4A2A;
--color-tan: #A97449;
--color-forest-green: #4C7D47;
--color-saddle-brown: #8C6B4F;
--color-sage: #7FA46B;
--color-white: #FFFFFF;
--color-cultured: #F5F5F5;
--color-charcoal: #3E3E3E;
}Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.
Use when: you need UI roles, not just swatches.:root {
--role-logo: #7C4A2A;
--role-link: #7C4A2A;
--role-btn-primary-bg: #7C4A2A;
--role-btn-outlined-border: #7C4A2A;
--role-btn-outlined-text: #7C4A2A;
--role-headline: #A97449;
--role-btn-secondary-bg: #A97449;
--role-icon: #8C6B4F;
--role-border: #8C6B4F;
--role-divider: #8C6B4F;
--role-outline: #8C6B4F;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F5F5F5;
--role-text: #3E3E3E;
}Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.
Use when: a developer or app needs data.{
"chestnut": "#7C4A2A",
"tan": "#A97449",
"forest-green": "#4C7D47",
"saddle-brown": "#8C6B4F",
"sage": "#7FA46B",
"white": "#FFFFFF",
"cultured": "#F5F5F5",
"charcoal": "#3E3E3E"
}