Sandy Brown#D2691E
Coral#FF6F61
Olive#708238
Sienna#A0522D
Sage#8F9779
Palette direction

Sandy Brown Olive Color Palette

This palette combines warm and earthy main colors that symbolize natural mushrooms and wholesome food, balanced by gentle green accents that reflect freshness and health. Muted ochre and soft olive tones support the vibrant main colors for versatility in accents, while neutrals provide clean backgrounds and strong readability. The strategy creates a friendly, inviting, and distinctive identity that aligns perfectly with Smusher's mission to offer flavorful, nutritious mushroom-based burgers that feel both indulgent and accessible.

AnalogousFood Beveragemushroomhealthy eatingwholesomecomfort food
palette-preview.example
Food Beverage color direction

Sandy Brown Olive Color Palette

This palette combines warm and earthy main colors that symbolize natural mushrooms and wholesome food, balanced by gentle green accents that reflect freshness and health. Muted ochre and soft olive tones support the vibrant main colors for versatility in accents, while neutrals provide clean backgrounds and strong readability. The strategy creates a friendly, inviting, and distinctive identity that aligns perfectly with Smusher's mission to offer flavorful, nutritious mushroom-based burgers that feel both indulgent and accessible.

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 Charcoal #2F2F2Fon Coral #FF6F614.9:1 Strong
Logo Charcoal #2F2F2Fon White #FFFFFF13.4:1 Excellent
Logo White #FFFFFFon Charcoal #2F2F2F13.4:1 Excellent
Logo White #FFFFFFon Sienna #A0522D5.6:1 Strong
Icon color
BackgroundSandy Brown#D2691ETextCharcoal#2F2F2F
Primary Button3.68:1
Large text

Best for the main action users should notice first.

BackgroundCoral#FF6F61TextCharcoal#2F2F2F
Secondary Button4.91:1
AA

Useful for softer choices and secondary paths.

BackgroundSage#8F9779TextCoral#FF6F61
Outlined Button1.12:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundSage#8F9779TextCoral#FF6F61
Text Button1.12:1
Low

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

Palette composition8 colorsAnalogous color relationship
9:41Sandy Brown Olive 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.

CSandy Brown Olive Color PaletteFood Beverage brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors blend warm sandy browns and coral with a fresh olive accent to evoke earthiness and health, producing a harmonious and memorable palette that celebrates natural mushroom-based cuisine.

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.Sandy Brown #D2691E
HeadlineUsed for main titles and key messages.Olive #708238
LinkUsed for links and interactive text.Coral #FF6F61

Buttons

Primary Button
BackgroundSandy Brown #D2691E
TextCharcoal #2F2F2F
Secondary Button
BackgroundCoral #FF6F61
TextCharcoal #2F2F2F
Outlined Button
BackgroundCoral #FF6F61
TextCoral #FF6F61

Interface

TextDefault readable body text.Charcoal #2F2F2F
Bg LightLight page or section background.Sage #8F9779
Bg DarkDark page or section background.White #FFFFFF
IconSmall interface icons and marks.Sienna #A0522D
BorderCards, inputs, and component borders.Sienna #A0522D
DividerSubtle separators between content.Sienna #A0522D
OutlineFocus rings and emphasis outlines.Sienna #A0522D

Palette Colors

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

Main (Brand) Colors

The main colors blend warm sandy browns and coral with a fresh olive accent to evoke earthiness and health, producing a harmonious and memorable palette that celebrates natural mushroom-based cuisine.

PrimarySandy Brown

RolesLogo, Btn Primary Bg

Sandy Brown offers a warm, earthy foundation representing natural mushrooms and comfort, conveying approachability and satisfaction.

HEX#D2691E
RGB210, 105, 30
HSL25, 75, 47
CMYK0, 50, 86, 18
SecondaryCoral

RolesLink, Btn Outlined Border, Btn Outlined Text, Btn Secondary Bg

Coral adds a lively, juicy note that stimulates appetite and expresses the brand's friendly and playful personality.

HEX#FF6F61
RGB255, 111, 97
HSL5, 100, 69
CMYK0, 56, 62, 0
TertiaryOlive

RolesHeadline

Olive introduces a subtle natural freshness, symbolizing health and balanced nutrition without overpowering the warmth of the other colors.

HEX#708238
RGB112, 130, 56
HSL75, 40, 36
CMYK14, 0, 57, 49

Support Colors

Support colors extend the main palette with muted earthy and green tones that maintain a natural feel and provide balanced accents for icons, borders, and outlines without competing for attention.

Sienna

RolesIcon, Border, Divider, Outline

Sienna offers a darker earthy tone to complement Sandy Brown, grounding the palette and enhancing readability for interface elements.

HEX#A0522D
RGB160, 82, 45
HSL19, 56, 40
CMYK0, 49, 72, 37
Sage

RolesBg Light

Sage provides a soft, muted green background that echoes Olive's freshness, creating gentle contrast conducive to comfort and health impressions.

HEX#8F9779
RGB143, 151, 121
HSL76, 13, 53
CMYK5, 0, 20, 41

Neutral Colors

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

White

RolesBg Dark

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory
HEX#F5F5F5
RGB245, 245, 245
HSL0, 0, 96
CMYK0, 0, 0, 4
Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#2F2F2F
RGB47, 47, 47
HSL0, 0, 18
CMYK0, 0, 0, 82

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-sandy-brown: #D2691E;
  --color-coral: #FF6F61;
  --color-olive: #708238;
  --color-sienna: #A0522D;
  --color-sage: #8F9779;
  --color-white: #FFFFFF;
  --color-ivory: #F5F5F5;
  --color-charcoal: #2F2F2F;
}

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: #D2691E;
  --role-btn-primary-bg: #D2691E;
  --role-link: #FF6F61;
  --role-btn-outlined-border: #FF6F61;
  --role-btn-outlined-text: #FF6F61;
  --role-btn-secondary-bg: #FF6F61;
  --role-headline: #708238;
  --role-icon: #A0522D;
  --role-border: #A0522D;
  --role-divider: #A0522D;
  --role-outline: #A0522D;
  --role-bg-light: #8F9779;
  --role-bg-dark: #FFFFFF;
  --role-text: #2F2F2F;
  --role-btn-primary-text: #2F2F2F;
  --role-btn-secondary-text: #2F2F2F;
}

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.
{
    "sandy-brown": "#D2691E",
    "coral": "#FF6F61",
    "olive": "#708238",
    "sienna": "#A0522D",
    "sage": "#8F9779",
    "white": "#FFFFFF",
    "ivory": "#F5F5F5",
    "charcoal": "#2F2F2F"
}
Press Space to load new palette