Deep Fern Green#325945
Warm Taupe#8B7E74
Olive Moss#6A7A58
Muted Sage#B1B8AA
Soft Gray-Brown#A89C93
Palette direction

Muted Green Taupe Color Palette

This palette blends muted greens with warm taupe and neutral tones to evoke a serene yet refined atmosphere inspired by the natural hues and textures visible in the image of stacked books with a pale green backdrop. The balanced color system includes distinctive deep green for a trustworthy logo, grounded taupe and supportive olive accents, and a strong range of neutrals for accessibility and versatile usage.

CustomCreativemuted greentaupeoliveneutral palette
palette-preview.example
Creative color direction

Muted Green Taupe Color Palette

This palette blends muted greens with warm taupe and neutral tones to evoke a serene yet refined atmosphere inspired by the natural hues and textures visible in the image of stacked books with a pale green backdrop. The balanced color system includes distinctive deep green for a trustworthy logo, grounded taupe and supportive olive accents, and a strong range of neutrals for accessibility and versatile usage.

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 Pure White #FFFFFFon Deep Fern Green #3259457.9:1 Excellent
Logo Pure White #FFFFFFon Olive Moss #6A7A584.6:1 Strong
Logo Charcoal Black #2E2C28on Pure White #FFFFFF13.9:1 Excellent
Logo Charcoal Black #2E2C28on Light Ivory #E7E5E211.1:1 Excellent
Icon color
BackgroundDeep Fern Green#325945TextPure White#FFFFFF
Primary Button7.92:1
AAA

Best for the main action users should notice first.

BackgroundWarm Taupe#8B7E74TextPure White#FFFFFF
Secondary Button3.94:1
Large text

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextDeep Fern Green#325945
Outlined Button7.92:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextDeep Fern Green#325945
Text Button7.92:1
AAA

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

Palette composition8 colorsCustom color relationship
9:41Muted Green Taupe 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.

CMuted Green Taupe Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The three main colors balance soft, deep green with warm taupe and olive to create a calming yet distinctive triad that visually anchors the brand identity and interface elements.

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.Deep Fern Green #325945
HeadlineUsed for main titles and key messages.Deep Fern Green #325945
LinkUsed for links and interactive text.Deep Fern Green #325945

Buttons

Primary Button
BackgroundDeep Fern Green #325945
TextPure White #FFFFFF
Secondary Button
BackgroundWarm Taupe #8B7E74
TextPure White #FFFFFF
Outlined Button
BackgroundDeep Fern Green #325945
TextDeep Fern Green #325945

Interface

TextDefault readable body text.Charcoal Black #2E2C28
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Charcoal Black #2E2C28
IconSmall interface icons and marks.Olive Moss #6A7A58
BorderCards, inputs, and component borders.Olive Moss #6A7A58
DividerSubtle separators between content.Olive Moss #6A7A58
OutlineFocus rings and emphasis outlines.Olive Moss #6A7A58

Palette Colors

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

Main (Brand) Colors

The three main colors balance soft, deep green with warm taupe and olive to create a calming yet distinctive triad that visually anchors the brand identity and interface elements.

PrimaryDeep Fern Green

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

Deep Fern Green brings trust and calm with its natural, grounded tone, perfect for primary brand elements.

HEX#325945
RGB50, 89, 69
HSL149, 28, 27
CMYK44, 0, 22, 65
SecondaryWarm Taupe

RolesBtn Secondary Bg

Warm Taupe adds refined warmth and softness providing contrast and approachability for secondary actions.

HEX#8B7E74
RGB139, 126, 116
HSL26, 9, 50
CMYK0, 9, 17, 45
TertiaryOlive Moss

RolesIcon, Border, Divider, Outline

Olive Moss supports by giving subtle depth and natural balance without overpowering the main colors.

HEX#6A7A58
RGB106, 122, 88
HSL88, 16, 41
CMYK13, 0, 28, 52

Support Colors

Muted sage and soft gray-brown accents extend the palette by enhancing visual hierarchy and reinforcing the natural, tranquil brand feeling without distraction.

Muted Sage

Muted Sage adds a gentle, low-saturation green that complements the main greens and can be used for backgrounds or subtle accents.

HEX#B1B8AA
RGB177, 184, 170
HSL90, 9, 69
CMYK4, 0, 8, 28
Soft Gray-Brown

Soft Gray-Brown balances the warm taupe with a cooler neutral tone, enhancing usability for secondary accents.

HEX#A89C93
RGB168, 156, 147
HSL26, 11, 62
CMYK0, 7, 13, 34

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Light Ivory
HEX#E7E5E2
RGB231, 229, 226
HSL36, 9, 90
CMYK0, 1, 2, 9
Charcoal Black

RolesBg Dark, Text

HEX#2E2C28
RGB46, 44, 40
HSL40, 7, 17
CMYK0, 4, 13, 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-deep-fern-green: #325945;
  --color-warm-taupe: #8B7E74;
  --color-olive-moss: #6A7A58;
  --color-muted-sage: #B1B8AA;
  --color-soft-gray-brown: #A89C93;
  --color-pure-white: #FFFFFF;
  --color-light-ivory: #E7E5E2;
  --color-charcoal-black: #2E2C28;
}

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: #325945;
  --role-link: #325945;
  --role-btn-primary-bg: #325945;
  --role-btn-outlined-border: #325945;
  --role-btn-outlined-text: #325945;
  --role-headline: #325945;
  --role-btn-secondary-bg: #8B7E74;
  --role-icon: #6A7A58;
  --role-border: #6A7A58;
  --role-divider: #6A7A58;
  --role-outline: #6A7A58;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #2E2C28;
  --role-text: #2E2C28;
}

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.
{
    "deep-fern-green": "#325945",
    "warm-taupe": "#8B7E74",
    "olive-moss": "#6A7A58",
    "muted-sage": "#B1B8AA",
    "soft-gray-brown": "#A89C93",
    "pure-white": "#FFFFFF",
    "light-ivory": "#E7E5E2",
    "charcoal-black": "#2E2C28"
}
Press Space to load new palette