Light Brown#D3A25C
Mustard Yellow#D88B04
Pumpkin Orange#E15900
Taupe Brown#B99678
Muted Gray#C9C7C7
Palette direction

Warm Earthy Orange Color Palette

This palette blends warm earthy tones with vibrant orange accents to evoke a welcoming, energetic, and grounded brand identity. The palette balances boldness with subtle neutrality to create strong visual hierarchy and readability.

MonochromaticHospitality Eventswarmearthyorangeneutral
palette-preview.example
Hospitality Events color direction

Warm Earthy Orange Color Palette

This palette blends warm earthy tones with vibrant orange accents to evoke a welcoming, energetic, and grounded brand identity. The palette balances boldness with subtle neutrality to create strong visual hierarchy and readability.

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 #241A0Bon Light Brown #D3A25C7.4:1 Excellent
Logo Dark Brown #241A0Bon Mustard Yellow #D88B046.2:1 Strong
Logo Dark Brown #241A0Bon Pumpkin Orange #E159004.6:1 Strong
Logo Dark Brown #241A0Bon White #FFFFFF17.1:1 Excellent
Icon color
BackgroundLight Brown#D3A25CTextDark Brown#241A0B
Primary Button7.41:1
AAA

Best for the main action users should notice first.

BackgroundMustard Yellow#D88B04TextDark Brown#241A0B
Secondary Button6.20:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextMustard Yellow#D88B04
Outlined Button2.76:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextLight Brown#D3A25C
Text Button2.31:1
Low

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

Palette composition8 colorsMonochromatic color relationship
9:41Warm Earthy Orange 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 Orange Color PaletteHospitality Events 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 #D3A25C
HeadlineUsed for main titles and key messages.Light Brown #D3A25C
LinkUsed for links and interactive text.Light Brown #D3A25C

Buttons

Primary Button
BackgroundLight Brown #D3A25C
TextDark Brown #241A0B
Secondary Button
BackgroundMustard Yellow #D88B04
TextDark Brown #241A0B
Outlined Button
BackgroundMustard Yellow #D88B04
TextMustard Yellow #D88B04

Interface

TextDefault readable body text.Dark Brown #241A0B
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Dark Brown #241A0B
IconSmall interface icons and marks.Taupe Brown #B99678
BorderCards, inputs, and component borders.Taupe Brown #B99678
DividerSubtle separators between content.Taupe Brown #B99678
OutlineFocus rings and emphasis outlines.Taupe Brown #B99678

Palette Colors

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

Main (Brand) Colors

The main colors are warm and vibrant, ranging from mustard yellow to bright orange and deep brown, providing energetic yet harmonious contrast.

PrimaryLight Brown

RolesLogo, Link, Btn Primary Bg, Headline

Light Brown conveys warmth and approachability, making it an excellent foundational color for the brand's visual identity.

HEX#D3A25C
RGB211, 162, 92
HSL35, 57, 59
CMYK0, 23, 56, 17
SecondaryMustard Yellow

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Mustard Yellow adds cheerful brightness and energy, creating a strong contrast to support call-to-actions and outlines.

HEX#D88B04
RGB216, 139, 4
HSL38, 96, 43
CMYK0, 36, 98, 15
TertiaryPumpkin Orange

Pumpkin Orange provides vibrant emphasis that energizes interactive elements and enhances brand memorability.

HEX#E15900
RGB225, 89, 0
HSL24, 100, 44
CMYK0, 60, 100, 12

Support Colors

The support colors extend the warm palette with softer and muted earth tones that complement and balance the lively main colors without overpowering them.

Taupe Brown

RolesIcon, Border, Divider, Outline

Taupe Brown offers subtle sophistication and clean separation between sections, complementing the warm main hues.

HEX#B99678
RGB185, 150, 120
HSL28, 32, 60
CMYK0, 19, 35, 27
Muted Gray

Muted Gray introduces neutrality and calm, helping to balance the intensity of the warm colors while maintaining legibility.

HEX#C9C7C7
RGB201, 199, 199
HSL0, 2, 78
CMYK0, 1, 1, 21

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
Dark Brown

RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text

HEX#241A0B
RGB36, 26, 11
HSL36, 53, 9
CMYK0, 28, 69, 86
Deep Coffee
HEX#3E2E20
RGB62, 46, 32
HSL28, 32, 18
CMYK0, 26, 48, 76

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: #D3A25C;
  --color-mustard-yellow: #D88B04;
  --color-pumpkin-orange: #E15900;
  --color-taupe-brown: #B99678;
  --color-muted-gray: #C9C7C7;
  --color-white: #FFFFFF;
  --color-dark-brown: #241A0B;
  --color-deep-coffee: #3E2E20;
}

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: #D3A25C;
  --role-link: #D3A25C;
  --role-btn-primary-bg: #D3A25C;
  --role-headline: #D3A25C;
  --role-btn-secondary-bg: #D88B04;
  --role-btn-outlined-border: #D88B04;
  --role-btn-outlined-text: #D88B04;
  --role-icon: #B99678;
  --role-border: #B99678;
  --role-divider: #B99678;
  --role-outline: #B99678;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #241A0B;
  --role-text: #241A0B;
  --role-btn-primary-text: #241A0B;
  --role-btn-secondary-text: #241A0B;
}

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": "#D3A25C",
    "mustard-yellow": "#D88B04",
    "pumpkin-orange": "#E15900",
    "taupe-brown": "#B99678",
    "muted-gray": "#C9C7C7",
    "white": "#FFFFFF",
    "dark-brown": "#241A0B",
    "deep-coffee": "#3E2E20"
}
Press Space to load new palette