Ochre#D9982C
Olive Green#3B5520
Cream#F3E8D5
Muted Mustard#9B7A3A
Warm Taupe#A8997F
Palette direction

Ochre Green Earthy Color Palette

This warm and earthy palette draws inspiration from the vibrant ochre walls, soft white moldings, and deep green door seen in the image, creating a balanced and inviting color system ideal for brands valuing heritage and warmth.

AnalogousCreativeochregreenearthywarm
palette-preview.example
Creative color direction

Ochre Green Earthy Color Palette

This warm and earthy palette draws inspiration from the vibrant ochre walls, soft white moldings, and deep green door seen in the image, creating a balanced and inviting color system ideal for brands valuing heritage and warmth.

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 Ebony #26221Eon Cream #F3E8D513.0:1 Excellent
Logo White #FFFFFFon Olive Green #3B55208.4:1 Excellent
Logo Ebony #26221Eon Ochre #D9982C6.4:1 Strong
Logo Ebony #26221Eon White #FFFFFF15.8:1 Excellent
Icon color
BackgroundOchre#D9982CTextEbony#26221E
Primary Button6.37:1
AA

Best for the main action users should notice first.

BackgroundOlive Green#3B5520TextWhite#FFFFFF
Secondary Button8.38:1
AAA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextOlive Green#3B5520
Outlined Button8.38:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextOchre#D9982C
Text Button2.48:1
Low

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

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

COchre Green Earthy Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine a vibrant ochre yellow with a deep olive green and a soft cream, creating a warm, balanced, and harmonious look that evokes traditional architecture and natural 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.Ochre #D9982C
HeadlineUsed for main titles and key messages.Cream #F3E8D5
LinkUsed for links and interactive text.Ochre #D9982C

Buttons

Primary Button
BackgroundOchre #D9982C
TextEbony #26221E
Secondary Button
BackgroundOlive Green #3B5520
TextWhite #FFFFFF
Outlined Button
BackgroundOchre #D9982C
TextOlive Green #3B5520

Interface

TextDefault readable body text.Ebony #26221E
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ebony #26221E
IconSmall interface icons and marks.Muted Mustard #9B7A3A
BorderCards, inputs, and component borders.Muted Mustard #9B7A3A
DividerSubtle separators between content.Muted Mustard #9B7A3A
OutlineFocus rings and emphasis outlines.Muted Mustard #9B7A3A

Palette Colors

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

Main (Brand) Colors

The main colors combine a vibrant ochre yellow with a deep olive green and a soft cream, creating a warm, balanced, and harmonious look that evokes traditional architecture and natural elements.

PrimaryOchre

RolesLogo, Btn Primary Bg, Btn Outlined Border, Link

Ochre delivers warmth and energy, grounding the palette in a rich heritage feel while grabbing attention with its brightness.

HEX#D9982C
RGB217, 152, 44
HSL37, 69, 51
CMYK0, 30, 80, 15
SecondaryOlive Green

RolesBtn Secondary Bg, Btn Outlined Text

Olive Green brings a deep, natural balance that provides contrast and a sense of calm alongside the brighter ochre.

HEX#3B5520
RGB59, 85, 32
HSL89, 45, 23
CMYK31, 0, 62, 67
TertiaryCream

RolesHeadline

Cream introduces softness and clarity to headlines, complementing the strong earthy tones without overwhelming the palette.

HEX#F3E8D5
RGB243, 232, 213
HSL38, 56, 89
CMYK0, 5, 12, 5

Support Colors

Supporting colors extend the palette with muted browns and warm grays that reinforce the earthiness and add subtle depth without competing with the main colors.

Muted Mustard

RolesIcon, Border, Divider, Outline

Muted Mustard echoes ochre’s warmth in a softer tone, perfect for subtle UI elements like borders and icons.

HEX#9B7A3A
RGB155, 122, 58
HSL40, 46, 42
CMYK0, 21, 63, 39
Warm Taupe

Warm Taupe adds a neutral warmth that balances the vibrancy of ochre and the depth of olive, supporting visual hierarchy.

HEX#A8997F
RGB168, 153, 127
HSL38, 19, 58
CMYK0, 9, 24, 34

Neutral Colors

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

White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Almond
HEX#EFE9DF
RGB239, 233, 223
HSL38, 33, 91
CMYK0, 3, 7, 6
Ebony

RolesBg Dark, Text, Btn Primary Text

HEX#26221E
RGB38, 34, 30
HSL30, 12, 13
CMYK0, 11, 21, 85

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-ochre: #D9982C;
  --color-olive-green: #3B5520;
  --color-cream: #F3E8D5;
  --color-muted-mustard: #9B7A3A;
  --color-warm-taupe: #A8997F;
  --color-white: #FFFFFF;
  --color-almond: #EFE9DF;
  --color-ebony: #26221E;
}

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: #D9982C;
  --role-btn-primary-bg: #D9982C;
  --role-btn-outlined-border: #D9982C;
  --role-link: #D9982C;
  --role-btn-secondary-bg: #3B5520;
  --role-btn-outlined-text: #3B5520;
  --role-headline: #F3E8D5;
  --role-icon: #9B7A3A;
  --role-border: #9B7A3A;
  --role-divider: #9B7A3A;
  --role-outline: #9B7A3A;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #26221E;
  --role-text: #26221E;
  --role-btn-primary-text: #26221E;
}

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.
{
    "ochre": "#D9982C",
    "olive-green": "#3B5520",
    "cream": "#F3E8D5",
    "muted-mustard": "#9B7A3A",
    "warm-taupe": "#A8997F",
    "white": "#FFFFFF",
    "almond": "#EFE9DF",
    "ebony": "#26221E"
}
Press Space to load new palette