Light Brown#B87E31
Honey Yellow#C99617
Persimmon Orange#E46000
Rugged Brown#7A5631
Muted Grey#9D968F
Palette direction

Warm Earthy Construction Color Palette

This color palette draws inspiration from a warm, earthy image, combining rich browns and oranges with muted greys to create a grounded and inviting visual identity. The main colors provide depth and recognition while the support colors subtly reinforce warmth and balance. Neutrals offer clean contrasts for text and backgrounds in digital interfaces.

MonochromaticConstructionwarmearthybrownorange
palette-preview.example
Construction color direction

Warm Earthy Construction Color Palette

This color palette draws inspiration from a warm, earthy image, combining rich browns and oranges with muted greys to create a grounded and inviting visual identity. The main colors provide depth and recognition while the support colors subtly reinforce warmth and balance. Neutrals offer clean contrasts for text and backgrounds in digital interfaces.

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 Charcoal Brown #3B3226on Honey Yellow #C996174.7:1 Strong
Logo Charcoal Brown #3B3226on White #FFFFFF12.6:1 Excellent
Logo White #FFFFFFon Charcoal Brown #3B322612.6:1 Excellent
Logo Charcoal Brown #3B3226on Ivory #E2DED79.4:1 Excellent
Icon color
BackgroundPersimmon Orange#E46000TextCharcoal Brown#3B3226
Primary Button3.58:1
Large text

Best for the main action users should notice first.

BackgroundLight Brown#B87E31TextCharcoal Brown#3B3226
Secondary Button3.63:1
Large text

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextLight Brown#B87E31
Outlined Button3.46:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextLight Brown#B87E31
Text Button3.46:1
Large text

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

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

CWarm Earthy Construction Color PaletteConstruction 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.Light Brown #B87E31
HeadlineUsed for main titles and key messages.Honey Yellow #C99617
LinkUsed for links and interactive text.Light Brown #B87E31

Buttons

Primary Button
BackgroundPersimmon Orange #E46000
TextCharcoal Brown #3B3226
Secondary Button
BackgroundLight Brown #B87E31
TextCharcoal Brown #3B3226
Outlined Button
BackgroundLight Brown #B87E31
TextLight Brown #B87E31

Interface

TextDefault readable body text.Charcoal Brown #3B3226
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ivory #E2DED7
IconSmall interface icons and marks.Rugged Brown #7A5631
BorderCards, inputs, and component borders.Rugged Brown #7A5631
DividerSubtle separators between content.Rugged Brown #7A5631
OutlineFocus rings and emphasis outlines.Rugged Brown #7A5631

Palette Colors

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

Main (Brand) Colors

The main colors form an analogous harmony of warm browns and oranges, creating a cohesive and inviting brand presence with strong visual recognition.

PrimaryLight Brown

RolesLogo, Link, Btn Outlined Border, Btn Outlined Text, Btn Secondary Bg

Light Brown conveys reliability and warmth, establishing a trustworthy and approachable brand foundation.

HEX#B87E31
RGB184, 126, 49
HSL34, 58, 46
CMYK0, 32, 73, 28
SecondaryHoney Yellow

RolesHeadline

Honey Yellow adds a bright, optimistic touch that energizes and uplifts the palette with an inviting glow.

HEX#C99617
RGB201, 150, 23
HSL43, 79, 44
CMYK0, 25, 89, 21
TertiaryPersimmon Orange

RolesBtn Primary Bg

Persimmon Orange creates a vibrant, attention-grabbing call to action that contrasts well with the neutral text for strong usability.

HEX#E46000
RGB228, 96, 0
HSL25, 100, 45
CMYK0, 58, 100, 11

Support Colors

Support colors extend the main palette with grounded, muted neutrals that add balance and subtle textural contrast without overpowering the warmth of the main colors.

Rugged Brown

RolesIcon, Border, Divider, Outline

Rugged Brown anchors the palette with a deeper, softer brown that complements the main warm tones and enhances visual stability.

HEX#7A5631
RGB122, 86, 49
HSL30, 43, 34
CMYK0, 30, 60, 52
Muted Grey

Muted Grey offers a gentle, visually balancing accent that complements the warmth of the main colors while ensuring readability for secondary button text.

HEX#9D968F
RGB157, 150, 143
HSL30, 7, 59
CMYK0, 4, 9, 38

Neutral Colors

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

White

RolesBg Light

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

RolesBg Dark

HEX#E2DED7
RGB226, 222, 215
HSL38, 16, 86
CMYK0, 2, 5, 11
Charcoal Brown

RolesText, Btn Primary Text, Btn Secondary Text

HEX#3B3226
RGB59, 50, 38
HSL34, 22, 19
CMYK0, 15, 36, 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-light-brown: #B87E31;
  --color-honey-yellow: #C99617;
  --color-persimmon-orange: #E46000;
  --color-rugged-brown: #7A5631;
  --color-muted-grey: #9D968F;
  --color-white: #FFFFFF;
  --color-ivory: #E2DED7;
  --color-charcoal-brown: #3B3226;
}

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: #B87E31;
  --role-link: #B87E31;
  --role-btn-outlined-border: #B87E31;
  --role-btn-outlined-text: #B87E31;
  --role-btn-secondary-bg: #B87E31;
  --role-headline: #C99617;
  --role-btn-primary-bg: #E46000;
  --role-icon: #7A5631;
  --role-border: #7A5631;
  --role-divider: #7A5631;
  --role-outline: #7A5631;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #E2DED7;
  --role-text: #3B3226;
  --role-btn-primary-text: #3B3226;
  --role-btn-secondary-text: #3B3226;
}

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.
{
    "light-brown": "#B87E31",
    "honey-yellow": "#C99617",
    "persimmon-orange": "#E46000",
    "rugged-brown": "#7A5631",
    "muted-grey": "#9D968F",
    "white": "#FFFFFF",
    "ivory": "#E2DED7",
    "charcoal-brown": "#3B3226"
}
Press Space to load new palette