Deep Walnut#4B3621
Russet#B05A2C
Muted Olive#7B8B52
Dove Gray#C7C4BC
Faded Ochre#D9B382
Palette direction

Earthy Mystic Brown Color Palette

This palette draws inspiration from the vintage and mystical qualities of the provided image, combining deep, timeless darks with warm, earthly tones and muted accents to evoke a sense of intrigue and heritage. The main colors establish a strong, recognizable identity with earthy deep brown, warm russet, and muted olive, while the support colors of soft dove gray and faded ochre add balance and subtle contrast, complemented by classic neutrals in white, light beige, and deep charcoal.

AnalogousLuxury And Lifestyleearthymysticvintageheritage
palette-preview.example
Luxury And Lifestyle color direction

Earthy Mystic Brown Color Palette

This palette draws inspiration from the vintage and mystical qualities of the provided image, combining deep, timeless darks with warm, earthly tones and muted accents to evoke a sense of intrigue and heritage. The main colors establish a strong, recognizable identity with earthy deep brown, warm russet, and muted olive, while the support colors of soft dove gray and faded ochre add balance and subtle contrast, complemented by classic neutrals in white, light beige, and deep charcoal.

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 Walnut #4B362111.4:1 Excellent
Logo Pure White #FFFFFFon Russet #B05A2C4.8:1 Strong
Logo Charcoal #2E2926on Pure White #FFFFFF14.4:1 Excellent
Logo Charcoal #2E2926on Soft Ivory #EFEDE712.3:1 Excellent
Icon color
BackgroundDeep Walnut#4B3621TextPure White#FFFFFF
Primary Button11.36:1
AAA

Best for the main action users should notice first.

BackgroundRusset#B05A2CTextPure White#FFFFFF
Secondary Button4.83:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextMuted Olive#7B8B52
Outlined Button3.71:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextDeep Walnut#4B3621
Text Button11.36:1
AAA

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

Palette composition8 colorsAnalogous color relationship
9:41Earthy Mystic Brown 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 Mystic Brown Color PaletteLuxury And Lifestyle brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The three main colors together create a warm, earthy foundation drawing from browns and orange-rust hues harmonious on the color wheel, perfect for a brand with heritage and mystical roots.

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 Walnut #4B3621
HeadlineUsed for main titles and key messages.Russet #B05A2C
LinkUsed for links and interactive text.Deep Walnut #4B3621

Buttons

Primary Button
BackgroundDeep Walnut #4B3621
TextPure White #FFFFFF
Secondary Button
BackgroundRusset #B05A2C
TextPure White #FFFFFF
Outlined Button
BackgroundDeep Walnut #4B3621
TextMuted Olive #7B8B52

Interface

TextDefault readable body text.Charcoal #2E2926
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Soft Ivory #EFEDE7
IconSmall interface icons and marks.Dove Gray #C7C4BC
BorderCards, inputs, and component borders.Dove Gray #C7C4BC
DividerSubtle separators between content.Dove Gray #C7C4BC
OutlineFocus rings and emphasis outlines.Dove Gray #C7C4BC

Palette Colors

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

Main (Brand) Colors

The three main colors together create a warm, earthy foundation drawing from browns and orange-rust hues harmonious on the color wheel, perfect for a brand with heritage and mystical roots.

PrimaryDeep Walnut

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border

Deep Walnut conveys strength and classic reliability, anchoring the palette with a rich, timeless brown tone.

HEX#4B3621
RGB75, 54, 33
HSL30, 39, 21
CMYK0, 28, 56, 71
SecondaryRusset

RolesBtn Secondary Bg, Headline

Russet offers warm energy and friendliness, adding vibrancy and intrigue without overwhelming.

HEX#B05A2C
RGB176, 90, 44
HSL21, 60, 43
CMYK0, 49, 75, 31
TertiaryMuted Olive

RolesBtn Outlined Text

Muted Olive introduces nature-inspired calm and complements the warmth of the browns to create a balanced, grounded feel.

HEX#7B8B52
RGB123, 139, 82
HSL77, 26, 43
CMYK12, 0, 41, 45

Support Colors

Support colors extend the palette with soft, muted neutrals that provide contrast and subtlety, enhancing usability without overtaking the main colors.

Dove Gray

RolesIcon, Border, Divider, Outline

Dove Gray adds softness and neutrality, perfect for delicate accents and separating elements.

HEX#C7C4BC
RGB199, 196, 188
HSL44, 9, 76
CMYK0, 2, 6, 22
Faded Ochre

Faded Ochre brings a gentle warmth as an accent that supports the main russet without overpowering it, enhancing visual harmony.

HEX#D9B382
RGB217, 179, 130
HSL34, 53, 68
CMYK0, 18, 40, 15

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
Soft Ivory

RolesBg Dark

HEX#EFEDE7
RGB239, 237, 231
HSL45, 20, 92
CMYK0, 1, 3, 6
Charcoal

RolesText

HEX#2E2926
RGB46, 41, 38
HSL23, 10, 16
CMYK0, 11, 17, 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-walnut: #4B3621;
  --color-russet: #B05A2C;
  --color-muted-olive: #7B8B52;
  --color-dove-gray: #C7C4BC;
  --color-faded-ochre: #D9B382;
  --color-pure-white: #FFFFFF;
  --color-soft-ivory: #EFEDE7;
  --color-charcoal: #2E2926;
}

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: #4B3621;
  --role-link: #4B3621;
  --role-btn-primary-bg: #4B3621;
  --role-btn-outlined-border: #4B3621;
  --role-btn-secondary-bg: #B05A2C;
  --role-headline: #B05A2C;
  --role-btn-outlined-text: #7B8B52;
  --role-icon: #C7C4BC;
  --role-border: #C7C4BC;
  --role-divider: #C7C4BC;
  --role-outline: #C7C4BC;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #EFEDE7;
  --role-text: #2E2926;
}

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-walnut": "#4B3621",
    "russet": "#B05A2C",
    "muted-olive": "#7B8B52",
    "dove-gray": "#C7C4BC",
    "faded-ochre": "#D9B382",
    "pure-white": "#FFFFFF",
    "soft-ivory": "#EFEDE7",
    "charcoal": "#2E2926"
}
Press Space to load new palette