Olive Green#6B7A4F
Warm Beige#A69E82
Soft Cream#D0C9B6
Muted Taupe#8A7F6E
Sage Gray#B9B499
Palette direction

Earthy Olive Green Color Palette

This palette draws inspiration from the earthy green, warm beige, and soft cream tones in the image, creating a grounded and natural color system. The main green hues provide a strong organic foundation, while the support colors add warmth and balance without overpowering. The neutrals offer versatility and clear readability, ensuring accessible contrasts throughout the interface.

AnalogousHealth Wellnessolive greenearthyorganicnature
palette-preview.example
Health Wellness color direction

Earthy Olive Green Color Palette

This palette draws inspiration from the earthy green, warm beige, and soft cream tones in the image, creating a grounded and natural color system. The main green hues provide a strong organic foundation, while the support colors add warmth and balance without overpowering. The neutrals offer versatility and clear readability, ensuring accessible contrasts throughout the interface.

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 Dark Charcoal #3F3A2Eon Soft Cream #D0C9B66.8:1 Strong
Logo Pure White #FFFFFFon Olive Green #6B7A4F4.6:1 Strong
Logo Dark Charcoal #3F3A2Eon Pure White #FFFFFF11.3:1 Excellent
Logo Pure White #FFFFFFon Dark Charcoal #3F3A2E11.3:1 Excellent
Icon color
BackgroundOlive Green#6B7A4FTextPure White#FFFFFF
Primary Button4.64:1
AA

Best for the main action users should notice first.

BackgroundWarm Beige#A69E82TextDark Charcoal#3F3A2E
Secondary Button4.22:1
Large text

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextWarm Beige#A69E82
Outlined Button2.68:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextOlive Green#6B7A4F
Text Button4.64:1
AA

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

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

CEarthy Olive Green Color PaletteHealth Wellness brand direction ColorFly.design
Strategic palette preview

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.Olive Green #6B7A4F
HeadlineUsed for main titles and key messages.Olive Green #6B7A4F
LinkUsed for links and interactive text.Olive Green #6B7A4F

Buttons

Primary Button
BackgroundOlive Green #6B7A4F
TextPure White #FFFFFF
Secondary Button
BackgroundWarm Beige #A69E82
TextDark Charcoal #3F3A2E
Outlined Button
BackgroundWarm Beige #A69E82
TextWarm Beige #A69E82

Interface

TextDefault readable body text.Dark Charcoal #3F3A2E
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Light Ivory #F3F0E6
IconSmall interface icons and marks.Muted Taupe #8A7F6E
BorderCards, inputs, and component borders.Muted Taupe #8A7F6E
DividerSubtle separators between content.Muted Taupe #8A7F6E
OutlineFocus rings and emphasis outlines.Muted Taupe #8A7F6E

Palette Colors

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

Main (Brand) Colors

The palette uses an analogous harmony of green hues to evoke feelings of nature, growth, and stability, creating a cohesive and recognizable brand identity.

PrimaryOlive Green

RolesLogo, Link, Btn Primary Bg, Headline

Olive Green delivers a grounded organic feel that anchors the brand in nature and growth.

HEX#6B7A4F
RGB107, 122, 79
HSL81, 21, 39
CMYK12, 0, 35, 52
SecondaryWarm Beige

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Warm Beige softens the palette with warmth, adding approachability and balance.

HEX#A69E82
RGB166, 158, 130
HSL47, 17, 58
CMYK0, 5, 22, 35
TertiarySoft Cream

Soft Cream offers lightness and clarity, supporting contrast and highlighting content.

HEX#D0C9B6
RGB208, 201, 182
HSL44, 22, 76
CMYK0, 3, 13, 18

Support Colors

The support colors extend the main analogous greens by adding muted earth tones with a harmonious warmth that reinforces the natural theme.

Muted Taupe

RolesIcon, Border, Divider, Outline

Muted Taupe complements Olive Green with a grounded neutral tone for subtle graphical elements.

HEX#8A7F6E
RGB138, 127, 110
HSL36, 11, 49
CMYK0, 8, 20, 46
Sage Gray

Sage Gray balances the warm beige with a cooler undertone, enhancing depth without distraction.

HEX#B9B499
RGB185, 180, 153
HSL51, 19, 66
CMYK0, 3, 17, 27

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Light Ivory

RolesBg Dark

HEX#F3F0E6
RGB243, 240, 230
HSL46, 35, 93
CMYK0, 1, 5, 5
Dark Charcoal

RolesText, Btn Secondary Text

HEX#3F3A2E
RGB63, 58, 46
HSL42, 16, 21
CMYK0, 8, 27, 75

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-olive-green: #6B7A4F;
  --color-warm-beige: #A69E82;
  --color-soft-cream: #D0C9B6;
  --color-muted-taupe: #8A7F6E;
  --color-sage-gray: #B9B499;
  --color-pure-white: #FFFFFF;
  --color-light-ivory: #F3F0E6;
  --color-dark-charcoal: #3F3A2E;
}

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: #6B7A4F;
  --role-link: #6B7A4F;
  --role-btn-primary-bg: #6B7A4F;
  --role-headline: #6B7A4F;
  --role-btn-secondary-bg: #A69E82;
  --role-btn-outlined-border: #A69E82;
  --role-btn-outlined-text: #A69E82;
  --role-icon: #8A7F6E;
  --role-border: #8A7F6E;
  --role-divider: #8A7F6E;
  --role-outline: #8A7F6E;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F3F0E6;
  --role-text: #3F3A2E;
  --role-btn-secondary-text: #3F3A2E;
}

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.
{
    "olive-green": "#6B7A4F",
    "warm-beige": "#A69E82",
    "soft-cream": "#D0C9B6",
    "muted-taupe": "#8A7F6E",
    "sage-gray": "#B9B499",
    "pure-white": "#FFFFFF",
    "light-ivory": "#F3F0E6",
    "dark-charcoal": "#3F3A2E"
}
Press Space to load new palette