Burnt Orange#C75B3A
Soft Beige#E2C5A4
Deep Sienna#6B4A26
Muted Sage#8A9A89
Palette direction

Terracotta Earthy Hospitality Color Palette

This palette draws inspiration from the warm terracotta roof tiles, soft beige walls, and dark accents in the storefront image to create a welcoming and grounded brand identity. The rich burnt orange and creamy beige form a friendly, earthy base, complemented by a calm muted green that emphasizes harmony and stability. The neutrals support readability and balance throughout the interface with clean white and deep charcoal.

MonochromaticHospitality Eventsterracottaearthywarmneutral
palette-preview.example
Hospitality Events color direction

Terracotta Earthy Hospitality Color Palette

This palette draws inspiration from the warm terracotta roof tiles, soft beige walls, and dark accents in the storefront image to create a welcoming and grounded brand identity. The rich burnt orange and creamy beige form a friendly, earthy base, complemented by a calm muted green that emphasizes harmony and stability. The neutrals support readability and balance throughout the interface with clean white 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 Charcoal Black #2B2B2Bon Soft Beige #E2C5A48.6:1 Excellent
Logo Pure White #FFFFFFon Deep Sienna #6B4A268.0:1 Excellent
Logo Charcoal Black #2B2B2Bon Pure White #FFFFFF14.2:1 Excellent
Logo Charcoal Black #2B2B2Bon Muted Sage #8A9A894.8:1 Strong
Icon color
BackgroundBurnt Orange#C75B3ATextPure White#FFFFFF
Primary Button4.21:1
Large text

Best for the main action users should notice first.

BackgroundSoft Beige#E2C5A4TextCharcoal Black#2B2B2B
Secondary Button8.60:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextBurnt Orange#C75B3A
Outlined Button4.21:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextBurnt Orange#C75B3A
Text Button4.21:1
Large text

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

Palette composition7 colorsMonochromatic color relationship
9:41Terracotta Earthy Hospitality 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.

CTerracotta Earthy Hospitality Color PaletteHospitality Events brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors are a harmonious range of warm oranges and browns that evoke natural clay and complemented by a soft beige base, creating a recognizable and welcoming palette.

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.Burnt Orange #C75B3A
HeadlineUsed for main titles and key messages.Soft Beige #E2C5A4
LinkUsed for links and interactive text.Burnt Orange #C75B3A

Buttons

Primary Button
BackgroundBurnt Orange #C75B3A
TextPure White #FFFFFF
Secondary Button
BackgroundSoft Beige #E2C5A4
TextCharcoal Black #2B2B2B
Outlined Button
BackgroundBurnt Orange #C75B3A
TextBurnt Orange #C75B3A

Interface

TextDefault readable body text.Charcoal Black #2B2B2B
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Charcoal Black #2B2B2B
IconSmall interface icons and marks.Muted Sage #8A9A89
BorderCards, inputs, and component borders.Muted Sage #8A9A89
DividerSubtle separators between content.Muted Sage #8A9A89
OutlineFocus rings and emphasis outlines.Muted Sage #8A9A89

Palette Colors

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

Main (Brand) Colors

The main colors are a harmonious range of warm oranges and browns that evoke natural clay and complemented by a soft beige base, creating a recognizable and welcoming palette.

PrimaryBurnt Orange

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

Burnt Orange provides energy and friendliness, anchoring the palette with a recognizable traditional warmth.

HEX#C75B3A
RGB199, 91, 58
HSL14, 56, 50
CMYK0, 54, 71, 22
SecondarySoft Beige

RolesBtn Secondary Bg, Headline

Soft Beige offers a gentle earthiness that balances intensity while maintaining warmth.

HEX#E2C5A4
RGB226, 197, 164
HSL32, 52, 76
CMYK0, 13, 27, 11
TertiaryDeep Sienna

Deep Sienna adds richness and depth, reinforcing the natural and grounded feel.

HEX#6B4A26
RGB107, 74, 38
HSL31, 48, 28
CMYK0, 31, 64, 58

Support Colors

This muted, soft green extends the palette subtly, adding visual interest and balancing the warmth with cooler undertones.

Muted Sage

RolesIcon, Border, Divider, Outline

Muted Sage complements the warm browns with a calming, natural touch reminiscent of foliage.

HEX#8A9A89
RGB138, 154, 137
HSL116, 8, 57
CMYK10, 0, 11, 40

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory Cream
HEX#F6EFE7
RGB246, 239, 231
HSL32, 45, 94
CMYK0, 3, 6, 4
Charcoal Black

RolesBg Dark, Text, Btn Secondary 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-burnt-orange: #C75B3A;
  --color-soft-beige: #E2C5A4;
  --color-deep-sienna: #6B4A26;
  --color-muted-sage: #8A9A89;
  --color-pure-white: #FFFFFF;
  --color-ivory-cream: #F6EFE7;
  --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: #C75B3A;
  --role-link: #C75B3A;
  --role-btn-primary-bg: #C75B3A;
  --role-btn-outlined-border: #C75B3A;
  --role-btn-outlined-text: #C75B3A;
  --role-btn-secondary-bg: #E2C5A4;
  --role-headline: #E2C5A4;
  --role-icon: #8A9A89;
  --role-border: #8A9A89;
  --role-divider: #8A9A89;
  --role-outline: #8A9A89;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #2B2B2B;
  --role-text: #2B2B2B;
  --role-btn-secondary-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.
{
    "burnt-orange": "#C75B3A",
    "soft-beige": "#E2C5A4",
    "deep-sienna": "#6B4A26",
    "muted-sage": "#8A9A89",
    "pure-white": "#FFFFFF",
    "ivory-cream": "#F6EFE7",
    "charcoal-black": "#2B2B2B"
}
Press Space to load new palette