Sage Green#7A9E8A
Light Beige#C6B492
Muted Moss#A3BBA1
Olive Drab#B0AA93
Warm Taupe#987F62
Palette direction

Sage Green Beige Color Palette

This palette is inspired by the image's warm, understated greens and natural beige tones, combined with soft neutrals to create a calming and inviting retail atmosphere. The main colors capture the earthy, serene vibe, while the support colors provide balance and subtle accents without overpowering the primary scheme. The neutral colors offer clarity and legibility, ensuring strong contrast for text and UI elements.

CustomEcommercesage greenbeigecalmnatural
palette-preview.example
Ecommerce color direction

Sage Green Beige Color Palette

This palette is inspired by the image's warm, understated greens and natural beige tones, combined with soft neutrals to create a calming and inviting retail atmosphere. The main colors capture the earthy, serene vibe, while the support colors provide balance and subtle accents without overpowering the primary scheme. The neutral colors offer clarity and legibility, ensuring strong contrast for text and UI elements.

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 #3B3B38on Light Beige #C6B4925.5:1 Strong
Logo Charcoal #3B3B38on Muted Moss #A3BBA15.4:1 Strong
Logo Charcoal #3B3B38on Pure White #FFFFFF11.2:1 Excellent
Logo Pure White #FFFFFFon Charcoal #3B3B3811.2:1 Excellent
Icon color
BackgroundSage Green#7A9E8ATextCharcoal#3B3B38
Primary Button3.79:1
Large text

Best for the main action users should notice first.

BackgroundLight Beige#C6B492TextCharcoal#3B3B38
Secondary Button5.54:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextSage Green#7A9E8A
Outlined Button2.96:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextSage Green#7A9E8A
Text Button2.96:1
Low

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

Palette composition8 colorsCustom color relationship
9:41Sage Green Beige Color Palette Color role balance
Custom 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.

CSage Green Beige Color PaletteEcommerce brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors form an analogous green-beige palette that feels natural, soft, and approachable, ideal for a retail brand that wants to evoke calmness and quality.

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.Sage Green #7A9E8A
HeadlineUsed for main titles and key messages.Light Beige #C6B492
LinkUsed for links and interactive text.Sage Green #7A9E8A

Buttons

Primary Button
BackgroundSage Green #7A9E8A
TextCharcoal #3B3B38
Secondary Button
BackgroundLight Beige #C6B492
TextCharcoal #3B3B38
Outlined Button
BackgroundSage Green #7A9E8A
TextSage Green #7A9E8A

Interface

TextDefault readable body text.Charcoal #3B3B38
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Warm Taupe #987F62
IconSmall interface icons and marks.Olive Drab #B0AA93
BorderCards, inputs, and component borders.Olive Drab #B0AA93
DividerSubtle separators between content.Olive Drab #B0AA93
OutlineFocus rings and emphasis outlines.Olive Drab #B0AA93

Palette Colors

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

Main (Brand) Colors

The main colors form an analogous green-beige palette that feels natural, soft, and approachable, ideal for a retail brand that wants to evoke calmness and quality.

PrimarySage Green

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

Sage Green brings a fresh, earthy calm that anchors the brand with confidence and serenity.

HEX#7A9E8A
RGB122, 158, 138
HSL147, 16, 55
CMYK23, 0, 13, 38
SecondaryLight Beige

RolesBtn Secondary Bg, Headline

Light Beige adds warmth and subtle elegance, supporting the main green with gentle softness.

HEX#C6B492
RGB198, 180, 146
HSL39, 31, 67
CMYK0, 9, 26, 22
TertiaryMuted Moss

Muted Moss complements and balances the main colors by providing a subdued yet harmonious accent.

HEX#A3BBA1
RGB163, 187, 161
HSL115, 16, 68
CMYK13, 0, 14, 27

Support Colors

Soft, muted green and earthy brown support colors extend the palette with subtlety, enhancing the natural feel without overpowering the main colors.

Olive Drab

RolesIcon, Border, Divider, Outline

Olive Drab offers a gentle, subdued accent that harmonizes with the greens, used for UI elements like borders and icons to maintain a natural atmosphere.

HEX#B0AA93
RGB176, 170, 147
HSL48, 16, 63
CMYK0, 3, 16, 31
Warm Taupe

RolesBg Dark

Warm Taupe provides a richer, grounding tone that balances the lighter beiges while reinforcing the cozy, earthy character.

HEX#987F62
RGB152, 127, 98
HSL32, 22, 49
CMYK0, 16, 36, 40

Neutral Colors

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

Pure White

RolesBg Light

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory
HEX#F4F2EB
RGB244, 242, 235
HSL47, 29, 94
CMYK0, 1, 4, 4
Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#3B3B38
RGB59, 59, 56
HSL60, 3, 23
CMYK0, 0, 5, 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-sage-green: #7A9E8A;
  --color-light-beige: #C6B492;
  --color-muted-moss: #A3BBA1;
  --color-olive-drab: #B0AA93;
  --color-warm-taupe: #987F62;
  --color-pure-white: #FFFFFF;
  --color-ivory: #F4F2EB;
  --color-charcoal: #3B3B38;
}

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: #7A9E8A;
  --role-link: #7A9E8A;
  --role-btn-primary-bg: #7A9E8A;
  --role-btn-outlined-border: #7A9E8A;
  --role-btn-outlined-text: #7A9E8A;
  --role-btn-secondary-bg: #C6B492;
  --role-headline: #C6B492;
  --role-icon: #B0AA93;
  --role-border: #B0AA93;
  --role-divider: #B0AA93;
  --role-outline: #B0AA93;
  --role-bg-dark: #987F62;
  --role-bg-light: #FFFFFF;
  --role-text: #3B3B38;
  --role-btn-primary-text: #3B3B38;
  --role-btn-secondary-text: #3B3B38;
}

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.
{
    "sage-green": "#7A9E8A",
    "light-beige": "#C6B492",
    "muted-moss": "#A3BBA1",
    "olive-drab": "#B0AA93",
    "warm-taupe": "#987F62",
    "pure-white": "#FFFFFF",
    "ivory": "#F4F2EB",
    "charcoal": "#3B3B38"
}
Press Space to load new palette