Terracotta and Earthy Color Palette for Hospitality Branding

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

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

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Burnt Orange", "hex": "#C75B3A", "role": "main", "cmyk": { "c": 0, "m": 54, "y": 71, "k": 22, "source": "colorfly" } }, { "name": "Soft Beige", "hex": "#E2C5A4", "role": "main", "cmyk": { "c": 0, "m": 13, "y": 27, "k": 11, "source": "colorfly" } }, { "name": "Deep Sienna", "hex": "#6B4A26", "role": "main", "cmyk": { "c": 0, "m": 31, "y": 64, "k": 58, "source": "colorfly" } }, { "name": "Muted Sage", "hex": "#8A9A89", "role": "support", "cmyk": { "c": 10, "m": 0, "y": 11, "k": 40, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory Cream", "hex": "#F6EFE7", "role": "neutral", "cmyk": { "c": 0, "m": 3, "y": 6, "k": 4, "source": "colorfly" } }, { "name": "Charcoal Black", "hex": "#2B2B2B", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 83, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

: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; }

: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; }

{ "burnt-orange": "#C75B3A", "soft-beige": "#E2C5A4", "deep-sienna": "#6B4A26", "muted-sage": "#8A9A89", "pure-white": "#FFFFFF", "ivory-cream": "#F6EFE7", "charcoal-black": "#2B2B2B" }

<div class="colorfly-moving-gradient-bg"> <span class="colorfly-gradient-spark" aria-hidden="true"></span> <div> <small>Motion gradient</small> <h2>Gradient background</h2> <p>A moving brand gradient built from your palette.</p> </div> </div> <style> .colorfly-moving-gradient-bg { --gradient-anchor: #C75B3A; --gradient-partner: #E0A593; --gradient-accent: #8A9A89; --gradient-text: #000000; position: relative; display: grid; place-items: center; min-height: 340px; overflow: hidden; padding: 42px; color: var(--gradient-text); border-radius: 28px; background: radial-gradient(circle at 20% 82%, color-mix(in srgb, var(--gradient-accent) 48%, transparent) 0 14%, transparent 42%), radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--gradient-partner) 52%, transparent) 0 16%, transparent 46%), linear-gradient(135deg, var(--gradient-anchor), color-mix(in srgb, var(--gradient-anchor) 72%, black 18%), var(--gradient-partner), var(--gradient-anchor)); background-size: 160% 160%, 180% 180%, 240% 240%; animation: colorfly-gradient-bg 10.5s cubic-bezier(.72, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg > div { position: relative; z-index: 1; max-width: 640px; text-align: center; } .colorfly-moving-gradient-bg::before, .colorfly-moving-gradient-bg::after, .colorfly-gradient-spark { content: ""; position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; } .colorfly-moving-gradient-bg::before { left: -10%; top: -18%; width: min(520px, 72%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-partner) 88%, white 8%) 0%, transparent 66%), radial-gradient(circle at 68% 32%, color-mix(in srgb, var(--gradient-accent) 58%, white 10%) 0%, transparent 38%); opacity: .86; animation: colorfly-gradient-orb-one 11s cubic-bezier(.65, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg::after { right: -12%; bottom: -24%; width: min(620px, 82%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-accent) 86%, white 6%) 0%, transparent 68%), radial-gradient(circle at 28% 72%, color-mix(in srgb, var(--gradient-partner) 62%, white 8%) 0%, transparent 42%); opacity: .78; animation: colorfly-gradient-orb-two 12.8s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-spark { left: 42%; top: 44%; width: min(360px, 54%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-anchor) 64%, white 12%) 0%, transparent 62%); opacity: .46; animation: colorfly-gradient-spark 9.2s cubic-bezier(.62, 0, .2, 1) infinite; } @keyframes colorfly-gradient-bg { 0%, 100% { background-position: 0% 46%, 100% 24%, 0% 50%; } 18% { background-position: 44% 88%, 58% 12%, 34% 22%; } 39% { background-position: 86% 38%, 18% 74%, 86% 64%; } 63% { background-position: 26% 16%, 84% 92%, 42% 100%; } 82% { background-position: 68% 68%, 32% 30%, 100% 34%; } } @keyframes colorfly-gradient-orb-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 22% { transform: translate3d(78%, 22%, 0) scale(1.12); } 47% { transform: translate3d(44%, 86%, 0) scale(.92); } 72% { transform: translate3d(112%, 56%, 0) scale(1.2); } } @keyframes colorfly-gradient-orb-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); } 19% { transform: translate3d(-48%, -18%, 0) scale(.9); } 53% { transform: translate3d(-92%, -62%, 0) scale(1.14); } 79% { transform: translate3d(-22%, -86%, 0) scale(.98); } } @keyframes colorfly-gradient-spark { 0%, 100% { transform: translate3d(-12%, -8%, 0) scale(.84); } 28% { transform: translate3d(52%, -34%, 0) scale(1.08); } 58% { transform: translate3d(-44%, 38%, 0) scale(.96); } 84% { transform: translate3d(20%, 28%, 0) scale(1.18); } } </style>

<div class="colorfly-gradient-text-card"> <small>Gradient type</small> <h2>Gradient on text</h2> <p>A moving text gradient built from your palette.</p> </div> <style> .colorfly-gradient-text-card { --gradient-text-a: #C75B3A; --gradient-text-b: #79594F; --gradient-text-c: #8A9A89; position: relative; display: grid; place-items: center; min-height: 310px; overflow: hidden; padding: 42px; text-align: center; border-radius: 28px; background: radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--gradient-text-a) 8%, transparent), transparent 28%), linear-gradient(135deg, #fff, #fbfbfd); } .colorfly-gradient-text-card::before, .colorfly-gradient-text-card::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(2px); } .colorfly-gradient-text-card::before { left: 9%; top: 15%; width: min(330px, 48%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-a) 20%, transparent) 0%, transparent 68%); animation: colorfly-gradient-text-glow-one 8s cubic-bezier(.62, 0, .2, 1) infinite; } .colorfly-gradient-text-card::after { right: 7%; bottom: 6%; width: min(360px, 52%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-c) 18%, transparent) 0%, transparent 70%); animation: colorfly-gradient-text-glow-two 9.5s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-text-card small, .colorfly-gradient-text-card p { position: relative; z-index: 1; color: #65616d; } .colorfly-gradient-text-card h2 { position: relative; z-index: 1; margin: 10px 0 12px; color: transparent; font-size: clamp(42px, 8vw, 96px); line-height: .92; background: radial-gradient(circle at 18% 50%, var(--gradient-text-b) 0 12%, transparent 38%), radial-gradient(circle at 82% 44%, var(--gradient-text-c) 0 14%, transparent 40%), linear-gradient(100deg, var(--gradient-text-a), var(--gradient-text-b), var(--gradient-text-c), var(--gradient-text-a)); background-size: 220% 220%, 240% 240%, 280% 100%; -webkit-background-clip: text; background-clip: text; animation: colorfly-gradient-text-shift 6.2s cubic-bezier(.68, 0, .22, 1) infinite; } @keyframes colorfly-gradient-text-shift { 0%, 100% { background-position: 8% 52%, 92% 42%, 0% 50%; } 27% { background-position: 78% 18%, 28% 82%, 42% 50%; } 61% { background-position: 36% 92%, 86% 24%, 100% 50%; } 84% { background-position: 92% 48%, 18% 40%, 58% 50%; } } @keyframes colorfly-gradient-text-glow-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(.92); } 42% { transform: translate3d(80%, 32%, 0) scale(1.12); } 72% { transform: translate3d(28%, 86%, 0) scale(.98); } } @keyframes colorfly-gradient-text-glow-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 36% { transform: translate3d(-62%, -18%, 0) scale(.9); } 76% { transform: translate3d(-36%, -78%, 0) scale(1.12); } } </style>

Terracotta Earthy Hospitality Color Palette

Terracotta Earthy Hospitality Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system

Palette workspace

Terracotta Earthy Hospitality Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system