Autumn Earthy Warmth Color Palette for Hospitality Branding

Autumn Earthy Warmth Color Palette

This palette blends warm earthy tones with soft neutrals inspired by autumnal hues and natural textures from the image. The main colors create a harmonious and approachable identity with orange and brown grounded by a light beige, while the soft grays add subtle support and balance. The neutrals ensure clear readability and interface flexibility.

MonochromaticHospitality Eventswarm tonesearthyorangebrown

Main (Brand) Colors

The main colors combine two warm earthy browns and a bright orange that work together to evoke warmth, approachability, and grounded sophistication.

PrimaryPumpkin Orange

RolesLogo, Link, Btn Primary Bg, Headline

Pumpkin Orange adds vibrant warmth and energy, making the brand feel friendly and inviting.

HEX#F17C00

RGB241, 124, 0

HSL31, 100, 47

CMYK0, 49, 100, 5

SecondaryChestnut Brown

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Chestnut Brown imparts a rich and grounded feel, bringing depth and trustworthiness.

HEX#5A3A1B

RGB90, 58, 27

HSL30, 54, 23

CMYK0, 36, 70, 65

TertiarySandy Beige

RolesBg Light

Sandy Beige provides a gentle, natural warmth that softens and complements the stronger browns and orange.

HEX#CBB7A6

RGB203, 183, 166

HSL28, 26, 72

CMYK0, 10, 18, 20

Support Colors

Support colors extend the palette with muted grays that balance the warmth while enhancing usability and subtle detail.

Driftwood Gray

RolesIcon, Border, Divider, Outline

Driftwood Gray offers a quiet, neutral accent that harmonizes with the earthy tones without competing.

HEX#9E968D

RGB158, 150, 141

HSL32, 8, 59

CMYK0, 5, 11, 38

Mist Gray

RolesBg Dark

Mist Gray lightens the palette in small doses, ensuring good contrast and clarity in text and dark backgrounds.

HEX#DED7D0

RGB222, 215, 208

HSL30, 18, 84

CMYK0, 3, 6, 13

Neutral Colors

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

Pure White

RolesBtn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Almond White

HEX#F5F1EC

RGB245, 241, 236

HSL33, 31, 94

CMYK0, 2, 4, 4

Dark Coffee

RolesText, Btn Primary Text

HEX#3B3227

RGB59, 50, 39

HSL33, 20, 19

CMYK0, 15, 34, 77

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Pumpkin Orange", "hex": "#F17C00", "role": "main", "cmyk": { "c": 0, "m": 49, "y": 100, "k": 5, "source": "colorfly" } }, { "name": "Chestnut Brown", "hex": "#5A3A1B", "role": "main", "cmyk": { "c": 0, "m": 36, "y": 70, "k": 65, "source": "colorfly" } }, { "name": "Sandy Beige", "hex": "#CBB7A6", "role": "main", "cmyk": { "c": 0, "m": 10, "y": 18, "k": 20, "source": "colorfly" } }, { "name": "Driftwood Gray", "hex": "#9E968D", "role": "support", "cmyk": { "c": 0, "m": 5, "y": 11, "k": 38, "source": "colorfly" } }, { "name": "Mist Gray", "hex": "#DED7D0", "role": "support", "cmyk": { "c": 0, "m": 3, "y": 6, "k": 13, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Almond White", "hex": "#F5F1EC", "role": "neutral", "cmyk": { "c": 0, "m": 2, "y": 4, "k": 4, "source": "colorfly" } }, { "name": "Dark Coffee", "hex": "#3B3227", "role": "neutral", "cmyk": { "c": 0, "m": 15, "y": 34, "k": 77, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-pumpkin-orange: #F17C00; --color-chestnut-brown: #5A3A1B; --color-sandy-beige: #CBB7A6; --color-driftwood-gray: #9E968D; --color-mist-gray: #DED7D0; --color-pure-white: #FFFFFF; --color-almond-white: #F5F1EC; --color-dark-coffee: #3B3227; }

:root { --role-logo: #F17C00; --role-link: #F17C00; --role-btn-primary-bg: #F17C00; --role-headline: #F17C00; --role-btn-secondary-bg: #5A3A1B; --role-btn-outlined-border: #5A3A1B; --role-btn-outlined-text: #5A3A1B; --role-bg-light: #CBB7A6; --role-icon: #9E968D; --role-border: #9E968D; --role-divider: #9E968D; --role-outline: #9E968D; --role-bg-dark: #DED7D0; --role-btn-secondary-text: #FFFFFF; --role-text: #3B3227; --role-btn-primary-text: #3B3227; }

{ "pumpkin-orange": "#F17C00", "chestnut-brown": "#5A3A1B", "sandy-beige": "#CBB7A6", "driftwood-gray": "#9E968D", "mist-gray": "#DED7D0", "pure-white": "#FFFFFF", "almond-white": "#F5F1EC", "dark-coffee": "#3B3227" }

<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: #F17C00; --gradient-partner: #F5A34D; --gradient-accent: #F8C28A; --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: #F17C00; --gradient-text-b: #84582A; --gradient-text-c: #86694B; 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>