Goldenrod#C79B43
Olive Brown#8B6E3D
Light Mustard#DAB563
Tan#B4986F
Muted Olive#747230
Palette direction

Golden Earthy Warm Color Palette

This strategic color palette is inspired by the warm, earthy tones in the image, featuring rich golden yellows, deep browns, and muted ochres that evoke a sense of grounded sophistication and timeless appeal. The main colors are harmonious and balanced, suitable for brands seeking warmth and reliability with an organic feel. Support colors extend the palette with soft tans and muted olive hues, bringing subtle contrast while maintaining visual coherence. The neutrals provide a necessary foundation with pure white, warm off-white, and a solid dark brown for text and details, ensuring high readability and elegant contrast.

MonochromaticLuxury And Lifestylewarmearthygoldenorganic
palette-preview.example
Luxury And Lifestyle color direction

Golden Earthy Warm Color Palette

This strategic color palette is inspired by the warm, earthy tones in the image, featuring rich golden yellows, deep browns, and muted ochres that evoke a sense of grounded sophistication and timeless appeal. The main colors are harmonious and balanced, suitable for brands seeking warmth and reliability with an organic feel. Support colors extend the palette with soft tans and muted olive hues, bringing subtle contrast while maintaining visual coherence. The neutrals provide a necessary foundation with pure white, warm off-white, and a solid dark brown for text and details, ensuring high readability and elegant contrast.

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 Brown #3B2F2Fon Light Mustard #DAB5636.6:1 Strong
Logo Dark Brown #3B2F2Fon Goldenrod #C79B435.0:1 Strong
Logo Pure White #FFFFFFon Olive Brown #8B6E3D4.8:1 Strong
Logo Dark Brown #3B2F2Fon Pure White #FFFFFF12.9:1 Excellent
Icon color
BackgroundGoldenrod#C79B43TextDark Brown#3B2F2F
Primary Button5.02:1
AA

Best for the main action users should notice first.

BackgroundOlive Brown#8B6E3DTextPure White#FFFFFF
Secondary Button4.78:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextOlive Brown#8B6E3D
Outlined Button4.78:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextGoldenrod#C79B43
Text Button2.56:1
Low

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

Palette composition8 colorsMonochromatic color relationship
9:41Golden Earthy Warm Color Palette Color role balance
Monochromatic 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.

CGolden Earthy Warm Color PaletteLuxury And Lifestyle 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.Goldenrod #C79B43
HeadlineUsed for main titles and key messages.Goldenrod #C79B43
LinkUsed for links and interactive text.Goldenrod #C79B43

Buttons

Primary Button
BackgroundGoldenrod #C79B43
TextDark Brown #3B2F2F
Secondary Button
BackgroundOlive Brown #8B6E3D
TextPure White #FFFFFF
Outlined Button
BackgroundOlive Brown #8B6E3D
TextOlive Brown #8B6E3D

Interface

TextDefault readable body text.Dark Brown #3B2F2F
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Ivory #F5F1E6
IconSmall interface icons and marks.Tan #B4986F
BorderCards, inputs, and component borders.Tan #B4986F
DividerSubtle separators between content.Tan #B4986F
OutlineFocus rings and emphasis outlines.Tan #B4986F

Palette Colors

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

Main (Brand) Colors

The main colors are closely related warm tones, creating a harmonious and inviting look that is easily recognizable and visually consistent.

PrimaryGoldenrod

RolesLogo, Link, Btn Primary Bg, Headline

Goldenrod offers a rich and warm hue that conveys optimism and timelessness, ideal for the brand's main identity.

HEX#C79B43
RGB199, 155, 67
HSL40, 54, 52
CMYK0, 22, 66, 22
SecondaryOlive Brown

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Olive Brown grounds the palette with an earthy tone that balances warmth with a sense of reliability.

HEX#8B6E3D
RGB139, 110, 61
HSL38, 39, 39
CMYK0, 21, 56, 45
TertiaryLight Mustard

Light Mustard adds a soft, muted contrast that complements the main golden shade and enhances usability.

HEX#DAB563
RGB218, 181, 99
HSL41, 62, 62
CMYK0, 17, 55, 15

Support Colors

The support colors are softer, muted earth tones that extend the main palette while maintaining subtlety and balance.

Tan

RolesIcon, Border, Divider, Outline

Tan provides a gentle, warm support that enhances the main palette with subtle contrast without overpowering it.

HEX#B4986F
RGB180, 152, 111
HSL36, 32, 57
CMYK0, 16, 38, 29
Muted Olive

Muted Olive introduces a natural, subdued green hue that balances the yellows and browns, adding depth and versatility.

HEX#747230
RGB116, 114, 48
HSL58, 41, 32
CMYK0, 2, 59, 55

Neutral Colors

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

Pure White

RolesBg Light, Btn Secondary Text

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

RolesBg Dark

HEX#F5F1E6
RGB245, 241, 230
HSL44, 43, 93
CMYK0, 2, 6, 4
Dark Brown

RolesText, Btn Primary Text

HEX#3B2F2F
RGB59, 47, 47
HSL0, 11, 21
CMYK0, 20, 20, 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-goldenrod: #C79B43;
  --color-olive-brown: #8B6E3D;
  --color-light-mustard: #DAB563;
  --color-tan: #B4986F;
  --color-muted-olive: #747230;
  --color-pure-white: #FFFFFF;
  --color-ivory: #F5F1E6;
  --color-dark-brown: #3B2F2F;
}

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: #C79B43;
  --role-link: #C79B43;
  --role-btn-primary-bg: #C79B43;
  --role-headline: #C79B43;
  --role-btn-secondary-bg: #8B6E3D;
  --role-btn-outlined-border: #8B6E3D;
  --role-btn-outlined-text: #8B6E3D;
  --role-icon: #B4986F;
  --role-border: #B4986F;
  --role-divider: #B4986F;
  --role-outline: #B4986F;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F5F1E6;
  --role-text: #3B2F2F;
  --role-btn-primary-text: #3B2F2F;
}

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.
{
    "goldenrod": "#C79B43",
    "olive-brown": "#8B6E3D",
    "light-mustard": "#DAB563",
    "tan": "#B4986F",
    "muted-olive": "#747230",
    "pure-white": "#FFFFFF",
    "ivory": "#F5F1E6",
    "dark-brown": "#3B2F2F"
}
Press Space to load new palette