Forest Green#228B22
Amber#FFBF00
Sage#A9BA9D
Toasted Almond#D2B48C
Palette direction

Forest Green Amber Color Palette

Smusher's color palette combines earthy natural greens and warm ambers with soft support tones to embody the brand's focus on wholesome, satisfying mushroom-based meals that balance nutrition with indulgence. The fresh Forest Green and warm Amber main colors create a friendly, approachable vibe, while muted Sage and Toasted Almond accents extend this inviting feel without overpowering the core palette. Neutral off-white, warm cream, and deep Espresso provide clean, accessible backgrounds and texts that ensure legibility and comfort across digital interfaces.

AnalogousFood Beveragemushroomhealthier eatingburgernatural
palette-preview.example
Food Beverage color direction

Forest Green Amber Color Palette

Smusher's color palette combines earthy natural greens and warm ambers with soft support tones to embody the brand's focus on wholesome, satisfying mushroom-based meals that balance nutrition with indulgence. The fresh Forest Green and warm Amber main colors create a friendly, approachable vibe, while muted Sage and Toasted Almond accents extend this inviting feel without overpowering the core palette. Neutral off-white, warm cream, and deep Espresso provide clean, accessible backgrounds and texts that ensure legibility and comfort across digital interfaces.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Espresso #3B2F2Fon Amber #FFBF007.8:1 Excellent
Logo Espresso #3B2F2Fon Ivory #FFFFFF12.9:1 Excellent
Logo Ivory #FFFFFFon Espresso #3B2F2F12.9:1 Excellent
Logo Espresso #3B2F2Fon Toasted Almond #D2B48C6.5:1 Strong
Icon color
BackgroundForest Green#228B22TextIvory#FFFFFF
Primary Button4.39:1
Large text

Best for the main action users should notice first.

BackgroundAmber#FFBF00TextEspresso#3B2F2F
Secondary Button7.78:1
AAA

Useful for softer choices and secondary paths.

BackgroundIvory#FFFFFFTextForest Green#228B22
Outlined Button4.39:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundIvory#FFFFFFTextForest Green#228B22
Text Button4.39:1
Large text

A quiet action for links, navigation, and inline decisions.

Palette composition7 colorsAnalogous color relationship
9:41Forest Green Amber Color Palette Color role balance
Analogous system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CForest Green Amber Color PaletteFood Beverage brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors, Forest Green and Amber, work together as complementary hues to represent natural freshness and warm approachability, defining Smusher's recognizable brand identity that balances healthy ingredients with flavorful indulgence.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Forest Green #228B22
HeadlineUsed for main titles and key messages.Forest Green #228B22
LinkUsed for links and interactive text.Forest Green #228B22

Buttons

Primary Button
BackgroundForest Green #228B22
TextIvory #FFFFFF
Secondary Button
BackgroundAmber #FFBF00
TextEspresso #3B2F2F
Outlined Button
BackgroundForest Green #228B22
TextForest Green #228B22

Interface

TextDefault readable body text.Espresso #3B2F2F
Bg LightLight page or section background.Ivory #FFFFFF
Bg DarkDark page or section background.Cream #FAF5E4
IconSmall interface icons and marks.Sage #A9BA9D
BorderCards, inputs, and component borders.Sage #A9BA9D
DividerSubtle separators between content.Sage #A9BA9D
OutlineFocus rings and emphasis outlines.Sage #A9BA9D

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

The main colors, Forest Green and Amber, work together as complementary hues to represent natural freshness and warm approachability, defining Smusher's recognizable brand identity that balances healthy ingredients with flavorful indulgence.

PrimaryForest Green

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline

Forest Green symbolizes the fresh, natural, and nutritious qualities of mushrooms central to Smusher’s brand, communicating vitality and growth.

HEX#228B22
RGB34, 139, 34
HSL120, 61, 34
CMYK76, 0, 76, 45
SecondaryAmber

RolesBtn Secondary Bg

Amber brings warmth and energy, adding a friendly, inviting tone that balances the freshness with a sense of comfort and indulgence.

HEX#FFBF00
RGB255, 191, 0
HSL45, 100, 50
CMYK0, 25, 100, 0

Support Colors

The support colors, muted Sage and Toasted Almond, subtly complement and soften the strong main colors by adding natural, subdued earth tones that enhance balance and readability without competing for visual attention.

Sage

RolesIcon, Border, Divider, Outline

Sage introduces a gentle, muted green that harmonizes with Forest Green, reinforcing a natural and grounded feeling in functional elements.

HEX#A9BA9D
RGB169, 186, 157
HSL95, 17, 67
CMYK9, 0, 16, 27
Toasted Almond

Toasted Almond provides a warm, soft neutral accent that enriches the amber's warmth while maintaining subtlety in secondary textual elements.

HEX#D2B48C
RGB210, 180, 140
HSL34, 44, 69
CMYK0, 14, 33, 18

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

Ivory

RolesBg Light, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Cream

RolesBg Dark

HEX#FAF5E4
RGB250, 245, 228
HSL46, 69, 94
CMYK0, 2, 9, 2
Espresso

RolesText, Btn Secondary Text

HEX#3B2F2F
RGB59, 47, 47
HSL0, 11, 21
CMYK0, 20, 20, 77

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

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-forest-green: #228B22;
  --color-amber: #FFBF00;
  --color-sage: #A9BA9D;
  --color-toasted-almond: #D2B48C;
  --color-ivory: #FFFFFF;
  --color-cream: #FAF5E4;
  --color-espresso: #3B2F2F;
}

Role tokens

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: #228B22;
  --role-link: #228B22;
  --role-btn-primary-bg: #228B22;
  --role-btn-outlined-border: #228B22;
  --role-btn-outlined-text: #228B22;
  --role-headline: #228B22;
  --role-btn-secondary-bg: #FFBF00;
  --role-icon: #A9BA9D;
  --role-border: #A9BA9D;
  --role-divider: #A9BA9D;
  --role-outline: #A9BA9D;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #FAF5E4;
  --role-text: #3B2F2F;
  --role-btn-secondary-text: #3B2F2F;
}

JSON

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.
{
    "forest-green": "#228B22",
    "amber": "#FFBF00",
    "sage": "#A9BA9D",
    "toasted-almond": "#D2B48C",
    "ivory": "#FFFFFF",
    "cream": "#FAF5E4",
    "espresso": "#3B2F2F"
}
Press Space to load new palette