Pumpkin Orange#D9A952
Chocolate Brown#EB7800
Sandy Taupe#4A342B
Light Caramel#B69979
Muted Beige#C1C5C6
Palette direction

Warm Earthy Creative Color Palette

This palette draws inspiration from warm, earthy tones found in the image's rich oranges, deep browns, and soft neutrals, creating a harmonious system that balances vibrancy with grounded sophistication.

MonochromaticCreativewarmearthyorangebrown
palette-preview.example
Creative color direction

Warm Earthy Creative Color Palette

This palette draws inspiration from warm, earthy tones found in the image's rich oranges, deep browns, and soft neutrals, creating a harmonious system that balances vibrancy with grounded sophistication.

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 Sandy Taupe #4A342B11.6:1 Excellent
Logo Charcoal Black #2B2B2Bon Pumpkin Orange #D9A9526.6:1 Strong
Logo Charcoal Black #2B2B2Bon Chocolate Brown #EB78004.9:1 Strong
Logo Charcoal Black #2B2B2Bon Pure White #FFFFFF14.2:1 Excellent
Icon color
BackgroundPumpkin Orange#D9A952TextCharcoal Black#2B2B2B
Primary Button6.57:1
AA

Best for the main action users should notice first.

BackgroundChocolate Brown#EB7800TextPure White#FFFFFF
Secondary Button2.91:1
Low

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextChocolate Brown#EB7800
Outlined Button2.91:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextPumpkin Orange#D9A952
Text Button2.15:1
Low

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

Palette composition8 colorsMonochromatic color relationship
9:41Warm Earthy Creative 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 Creative Color PaletteCreative 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.Pumpkin Orange #D9A952
HeadlineUsed for main titles and key messages.Pumpkin Orange #D9A952
LinkUsed for links and interactive text.Pumpkin Orange #D9A952

Buttons

Primary Button
BackgroundPumpkin Orange #D9A952
TextCharcoal Black #2B2B2B
Secondary Button
BackgroundChocolate Brown #EB7800
TextPure White #FFFFFF
Outlined Button
BackgroundChocolate Brown #EB7800
TextChocolate Brown #EB7800

Interface

TextDefault readable body text.Charcoal Black #2B2B2B
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Sandy Taupe #4A342B
IconSmall interface icons and marks.Light Caramel #B69979
BorderCards, inputs, and component borders.Light Caramel #B69979
DividerSubtle separators between content.Light Caramel #B69979
OutlineFocus rings and emphasis outlines.Light Caramel #B69979

Palette Colors

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

Main (Brand) Colors

The triadic relationship between warm orange, deep brown, and soft tan generates a dynamic yet balanced color system that feels grounded and approachable.

PrimaryPumpkin Orange

RolesLogo, Link, Btn Primary Bg, Headline

Pumpkin Orange brings warmth and energy, attracting attention with an inviting vibrancy.

HEX#D9A952
RGB217, 169, 82
HSL39, 64, 59
CMYK0, 22, 62, 15
SecondaryChocolate Brown

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Chocolate Brown grounds the palette with richness and depth, providing stability and contrast.

HEX#EB7800
RGB235, 120, 0
HSL31, 100, 46
CMYK0, 49, 100, 8
TertiarySandy Taupe

RolesBg Dark

Sandy Taupe offers a soft, neutral balance, smoothing transitions between stronger hues while maintaining warmth.

HEX#4A342B
RGB74, 52, 43
HSL17, 26, 23
CMYK0, 30, 42, 71

Support Colors

The supporting colors extend the palette with softer, muted shades that complement and balance the main warm tones without competing for attention.

Light Caramel

RolesIcon, Border, Divider, Outline

Light Caramel reinforces warmth with a gentle, muted tone that harmonizes with both vibrant and neutral colors.

HEX#B69979
RGB182, 153, 121
HSL31, 29, 59
CMYK0, 16, 34, 29
Muted Beige

Muted Beige provides a subtle, understated accent that balances the richness of the main tones and enhances usability.

HEX#C1C5C6
RGB193, 197, 198
HSL192, 4, 77
CMYK3, 1, 0, 22

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
Warm Ivory
HEX#F3E6DE
RGB243, 230, 222
HSL23, 47, 91
CMYK0, 5, 9, 5
Charcoal Black

RolesText, Btn Primary Text

HEX#2B2B2B
RGB43, 43, 43
HSL0, 0, 17
CMYK0, 0, 0, 83

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-pumpkin-orange: #D9A952;
  --color-chocolate-brown: #EB7800;
  --color-sandy-taupe: #4A342B;
  --color-light-caramel: #B69979;
  --color-muted-beige: #C1C5C6;
  --color-pure-white: #FFFFFF;
  --color-warm-ivory: #F3E6DE;
  --color-charcoal-black: #2B2B2B;
}

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: #D9A952;
  --role-link: #D9A952;
  --role-btn-primary-bg: #D9A952;
  --role-headline: #D9A952;
  --role-btn-secondary-bg: #EB7800;
  --role-btn-outlined-border: #EB7800;
  --role-btn-outlined-text: #EB7800;
  --role-bg-dark: #4A342B;
  --role-icon: #B69979;
  --role-border: #B69979;
  --role-divider: #B69979;
  --role-outline: #B69979;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-text: #2B2B2B;
  --role-btn-primary-text: #2B2B2B;
}

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.
{
    "pumpkin-orange": "#D9A952",
    "chocolate-brown": "#EB7800",
    "sandy-taupe": "#4A342B",
    "light-caramel": "#B69979",
    "muted-beige": "#C1C5C6",
    "pure-white": "#FFFFFF",
    "warm-ivory": "#F3E6DE",
    "charcoal-black": "#2B2B2B"
}
Press Space to load new palette