Warm Blonde Natural Color Palette for Hospitality and Events

Warm Blonde Natural Color Palette

This palette draws from the warm blondes, soft browns, and gentle creams in the image, creating a harmonious and naturalistic color system ideal for brands seeking warmth and approachability. The main colors provide a balanced triadic harmony with natural warmth, while the support colors offer subtle muted accents that reinforce the organic aesthetic without overpowering it. The neutral colors anchor the palette with light to dark tones ensuring readability and visual comfort.

MonochromaticHospitality Eventswarm blondenatural brownsoft creamwarmth

Main (Brand) Colors

The three main colors provide a triadic balance with warm blonde, soft caramel brown, and muted cool beige working together to create a natural yet dynamic palette.

PrimaryCaramel Brown

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

Caramel Brown brings warmth and friendliness, establishing a grounded and natural foundation for brand identity.

HEX#A67B5B

RGB166, 123, 91

HSL26, 30, 50

CMYK0, 26, 45, 35

SecondaryWarm Blonde

RolesBtn Secondary Bg

Warm Blonde evokes softness and approachability, complementing the deeper brown with a luminous contrast.

HEX#D8B38A

RGB216, 179, 138

HSL32, 50, 69

CMYK0, 17, 36, 15

TertiaryMuted Beige

Muted Beige balances the palette with its calm neutrality, enhancing legibility and subtle sophistication.

HEX#C1B6A6

RGB193, 182, 166

HSL36, 18, 70

CMYK0, 6, 14, 24

Support Colors

The support colors extend the palette with soft, muted accents in cream and ivory tones, which maintain the organic feel while providing visual interest for icons, borders, and dividers.

Soft Ivory

RolesIcon, Border, Divider, Outline

Soft Ivory offers a light, gentle accent that complements the main colors without competing, reinforcing a natural, clean aesthetic.

HEX#E3D9CE

RGB227, 217, 206

HSL31, 27, 85

CMYK0, 4, 9, 11

Dusty Taupe

Dusty Taupe grounds the palette quietly, adding depth and a refined tone to support main color elements.

HEX#BFAE9E

RGB191, 174, 158

HSL29, 20, 68

CMYK0, 9, 17, 25

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

Light Cream

RolesBg Dark

HEX#F6F1EB

RGB246, 241, 235

HSL33, 38, 94

CMYK0, 2, 4, 4

Dark Charcoal

RolesText, Btn Secondary 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": "Caramel Brown", "hex": "#A67B5B", "role": "main", "cmyk": { "c": 0, "m": 26, "y": 45, "k": 35, "source": "colorfly" } }, { "name": "Warm Blonde", "hex": "#D8B38A", "role": "main", "cmyk": { "c": 0, "m": 17, "y": 36, "k": 15, "source": "colorfly" } }, { "name": "Muted Beige", "hex": "#C1B6A6", "role": "main", "cmyk": { "c": 0, "m": 6, "y": 14, "k": 24, "source": "colorfly" } }, { "name": "Soft Ivory", "hex": "#E3D9CE", "role": "support", "cmyk": { "c": 0, "m": 4, "y": 9, "k": 11, "source": "colorfly" } }, { "name": "Dusty Taupe", "hex": "#BFAE9E", "role": "support", "cmyk": { "c": 0, "m": 9, "y": 17, "k": 25, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Light Cream", "hex": "#F6F1EB", "role": "neutral", "cmyk": { "c": 0, "m": 2, "y": 4, "k": 4, "source": "colorfly" } }, { "name": "Dark Charcoal", "hex": "#3B3227", "role": "neutral", "cmyk": { "c": 0, "m": 15, "y": 34, "k": 77, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-caramel-brown: #A67B5B; --color-warm-blonde: #D8B38A; --color-muted-beige: #C1B6A6; --color-soft-ivory: #E3D9CE; --color-dusty-taupe: #BFAE9E; --color-pure-white: #FFFFFF; --color-light-cream: #F6F1EB; --color-dark-charcoal: #3B3227; }

:root { --role-logo: #A67B5B; --role-link: #A67B5B; --role-btn-primary-bg: #A67B5B; --role-btn-outlined-border: #A67B5B; --role-btn-outlined-text: #A67B5B; --role-headline: #A67B5B; --role-btn-secondary-bg: #D8B38A; --role-icon: #E3D9CE; --role-border: #E3D9CE; --role-divider: #E3D9CE; --role-outline: #E3D9CE; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #F6F1EB; --role-text: #3B3227; --role-btn-secondary-text: #3B3227; }

{ "caramel-brown": "#A67B5B", "warm-blonde": "#D8B38A", "muted-beige": "#C1B6A6", "soft-ivory": "#E3D9CE", "dusty-taupe": "#BFAE9E", "pure-white": "#FFFFFF", "light-cream": "#F6F1EB", "dark-charcoal": "#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: #A67B5B; --gradient-partner: #CEB6A5; --gradient-accent: #E3D9CE; --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: #A67B5B; --gradient-text-b: #6F6259; --gradient-text-c: #88827C; 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>