Walnut Brown#7A5C40
Clay Brown#A9745B
Sandstone#C59571
Slate Grey#5A6A6E
Sky Blue#91A5B4
Palette direction

Earthy Adventure Fashion Color Palette

This color palette is inspired by the image's earthy and natural tones, evoking a sense of adventurous spirit and grounded sophistication. The main colors capture the rugged textures of leather and stone, while the support colors provide subtle contrasts reflecting natural shadows and sky tones. The neutrals anchor the palette, offering versatile options for text and backgrounds that maintain readability and visual balance.

MonochromaticFashion Beautyearthyadventureruggednatural
palette-preview.example
Fashion Beauty color direction

Earthy Adventure Fashion Color Palette

This color palette is inspired by the image's earthy and natural tones, evoking a sense of adventurous spirit and grounded sophistication. The main colors capture the rugged textures of leather and stone, while the support colors provide subtle contrasts reflecting natural shadows and sky tones. The neutrals anchor the palette, offering versatile options for text and backgrounds that maintain readability and visual balance.

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 Walnut Brown #7A5C406.1:1 Strong
Logo Charcoal #2E2B28on Sandstone #C595715.3:1 Strong
Logo Charcoal #2E2B28on Pure White #FFFFFF14.1:1 Excellent
Logo Pure White #FFFFFFon Charcoal #2E2B2814.1:1 Excellent
Icon color
BackgroundWalnut Brown#7A5C40TextPure White#FFFFFF
Primary Button6.12:1
AA

Best for the main action users should notice first.

BackgroundClay Brown#A9745BTextPure White#FFFFFF
Secondary Button3.94:1
Large text

Useful for softer choices and secondary paths.

BackgroundSky Blue#91A5B4TextSandstone#C59571
Outlined Button1.04:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundSky Blue#91A5B4TextWalnut Brown#7A5C40
Text Button2.40:1
Low

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

Palette composition8 colorsMonochromatic color relationship
9:41Earthy Adventure Fashion 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.

CEarthy Adventure Fashion Color PaletteFashion Beauty 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.Walnut Brown #7A5C40
HeadlineUsed for main titles and key messages.Clay Brown #A9745B
LinkUsed for links and interactive text.Walnut Brown #7A5C40

Buttons

Primary Button
BackgroundWalnut Brown #7A5C40
TextPure White #FFFFFF
Secondary Button
BackgroundClay Brown #A9745B
TextPure White #FFFFFF
Outlined Button
BackgroundSandstone #C59571
TextSandstone #C59571

Interface

TextDefault readable body text.Charcoal #2E2B28
Bg LightLight page or section background.Sky Blue #91A5B4
Bg DarkDark page or section background.Sky Blue #91A5B4
IconSmall interface icons and marks.Slate Grey #5A6A6E
BorderCards, inputs, and component borders.Slate Grey #5A6A6E
DividerSubtle separators between content.Slate Grey #5A6A6E
OutlineFocus rings and emphasis outlines.Slate Grey #5A6A6E

Palette Colors

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

Main (Brand) Colors

The main colors blend warm browns and muted oranges to create a cohesive and recognizable system that reflects the organic and rugged feel of the source image.

PrimaryWalnut Brown

RolesLogo, Btn Primary Bg, Link

This deep warm brown conveys strength and natural durability, embodying the leather texture in the image.

HEX#7A5C40
RGB122, 92, 64
HSL29, 31, 36
CMYK0, 25, 48, 52
SecondaryClay Brown

RolesBtn Secondary Bg, Headline

A softer, muted brown that balances intensity with an approachable warmth, supporting the primary color elegantly.

HEX#A9745B
RGB169, 116, 91
HSL19, 31, 51
CMYK0, 31, 46, 34
TertiarySandstone

RolesBtn Outlined Border, Btn Outlined Text

A subdued orange-brown that complements the richer browns by bringing a gentle earthiness and subtle highlight.

HEX#C59571
RGB197, 149, 113
HSL26, 42, 61
CMYK0, 24, 43, 23

Support Colors

Support colors add muted greys and blues reminiscent of stone and sky, providing contrast and subtle accents that enhance the rugged, natural aesthetic without overpowering the main earth tones.

Slate Grey

RolesIcon, Border, Divider, Outline

A cool, muted grey with blue undertones that provides visual balance and supports the warm main colors with understated contrast.

HEX#5A6A6E
RGB90, 106, 110
HSL192, 10, 39
CMYK18, 4, 0, 57
Sky Blue

RolesBg Dark, Bg Light

This soft, desaturated blue reflects the sky, offering a calming backdrop and enhancing the palette's natural feel without competing with warmer tones.

HEX#91A5B4
RGB145, 165, 180
HSL206, 19, 64
CMYK19, 8, 0, 29

Neutral Colors

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

Pure White

RolesBtn Primary Text, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory
HEX#F4F1EB
RGB244, 241, 235
HSL40, 29, 94
CMYK0, 1, 4, 4
Charcoal

RolesText

HEX#2E2B28
RGB46, 43, 40
HSL30, 7, 17
CMYK0, 7, 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-walnut-brown: #7A5C40;
  --color-clay-brown: #A9745B;
  --color-sandstone: #C59571;
  --color-slate-grey: #5A6A6E;
  --color-sky-blue: #91A5B4;
  --color-pure-white: #FFFFFF;
  --color-ivory: #F4F1EB;
  --color-charcoal: #2E2B28;
}

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: #7A5C40;
  --role-btn-primary-bg: #7A5C40;
  --role-link: #7A5C40;
  --role-btn-secondary-bg: #A9745B;
  --role-headline: #A9745B;
  --role-btn-outlined-border: #C59571;
  --role-btn-outlined-text: #C59571;
  --role-icon: #5A6A6E;
  --role-border: #5A6A6E;
  --role-divider: #5A6A6E;
  --role-outline: #5A6A6E;
  --role-bg-dark: #91A5B4;
  --role-bg-light: #91A5B4;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-text: #2E2B28;
}

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.
{
    "walnut-brown": "#7A5C40",
    "clay-brown": "#A9745B",
    "sandstone": "#C59571",
    "slate-grey": "#5A6A6E",
    "sky-blue": "#91A5B4",
    "pure-white": "#FFFFFF",
    "ivory": "#F4F1EB",
    "charcoal": "#2E2B28"
}
Press Space to load new palette