Earthy Warm Hospitality Color Palette

This palette draws inspiration from the natural, warm, and inviting colors of the image. It balances earthy tones with subtle greens and warm accents to evoke a cozy, wholesome atmosphere suitable for a lifestyle or hospitality brand focused on natural and artisanal products.

AnalogousHospitality Eventsearthywarmnaturalcozy

Main (Brand) Colors

The main colors combine warm, earthy browns with soft green hues to create a balanced and inviting color system that reflects natural and artisanal qualities.

PrimarySaddle Brown

RolesLogo, Btn Primary Bg, Link

Saddle Brown conveys warmth, earthiness, and a grounded, natural feel that supports brand recognition and trust.

HEX#825A2C

RGB130, 90, 44

HSL32, 49, 34

CMYK0, 31, 66, 49

SecondaryDark Khaki

RolesBtn Secondary Bg, Headline

Dark Khaki offers a softer, lighter warm tone that complements the deeper brown, adding approachability and subtle sophistication.

HEX#C3A16B

RGB195, 161, 107

HSL37, 42, 59

CMYK0, 17, 45, 24

TertiaryMoss Green

RolesBtn Outlined Border, Btn Outlined Text

Moss Green brings a muted natural accent that balances the warm tones with a touch of freshness and vitality.

HEX#7E9B7A

RGB126, 155, 122

HSL113, 14, 54

CMYK19, 0, 21, 39

Support Colors

The support colors extend the main palette by introducing softer, muted earth tones and complementary green shades that enhance usability and balance without overpowering the core colors.

Sage Green

RolesIcon, Border, Divider, Outline

Sage Green reinforces the natural theme with calmness and subtlety, harmonizing well with the main greens and browns.

HEX#A6B89C

RGB166, 184, 156

HSL99, 16, 67

CMYK10, 0, 15, 28

Neutral Colors

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

White

RolesBg Light, Btn Primary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Bone

RolesBg Dark

HEX#F2EFEA

RGB242, 239, 234

HSL38, 24, 93

CMYK0, 1, 3, 5

Dark Olive

RolesText, Btn Secondary Text

HEX#3B3324

RGB59, 51, 36

HSL39, 24, 19

CMYK0, 14, 39, 77

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Saddle Brown", "hex": "#825A2C", "role": "main", "cmyk": { "c": 0, "m": 31, "y": 66, "k": 49, "source": "colorfly" } }, { "name": "Dark Khaki", "hex": "#C3A16B", "role": "main", "cmyk": { "c": 0, "m": 17, "y": 45, "k": 24, "source": "colorfly" } }, { "name": "Moss Green", "hex": "#7E9B7A", "role": "main", "cmyk": { "c": 19, "m": 0, "y": 21, "k": 39, "source": "colorfly" } }, { "name": "Sage Green", "hex": "#A6B89C", "role": "support", "cmyk": { "c": 10, "m": 0, "y": 15, "k": 28, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Bone", "hex": "#F2EFEA", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 3, "k": 5, "source": "colorfly" } }, { "name": "Dark Olive", "hex": "#3B3324", "role": "neutral", "cmyk": { "c": 0, "m": 14, "y": 39, "k": 77, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-saddle-brown: #825A2C; --color-dark-khaki: #C3A16B; --color-moss-green: #7E9B7A; --color-sage-green: #A6B89C; --color-white: #FFFFFF; --color-bone: #F2EFEA; --color-dark-olive: #3B3324; }

:root { --role-logo: #825A2C; --role-btn-primary-bg: #825A2C; --role-link: #825A2C; --role-btn-secondary-bg: #C3A16B; --role-headline: #C3A16B; --role-btn-outlined-border: #7E9B7A; --role-btn-outlined-text: #7E9B7A; --role-icon: #A6B89C; --role-border: #A6B89C; --role-divider: #A6B89C; --role-outline: #A6B89C; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #F2EFEA; --role-text: #3B3324; --role-btn-secondary-text: #3B3324; }

<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: #825A2C; --gradient-partner: #BAA48B; --gradient-accent: #A6B89C; --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: #825A2C; --gradient-text-b: #BAA48B; --gradient-text-c: #5A6354; 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>