Dusty Rose Vintage Color Palette for Warm Hospitality Brands

Dusty Rose Vintage Color Palette

This color palette reflects a warm and inviting vintage aesthetic inspired by the muted dusty rose and cream with contrasting dark brown accents from the image. It combines distinctive muted reds as main colors with soft green and warm beige support colors to complement the vintage vibe while the neutrals ground the palette for versatile use in brand design.

MonochromaticHospitality Eventsdusty rosevintagewarmmuted red

Main (Brand) Colors

The main palette harmoniously blends muted dusty red, deep terracotta, and a soft cream to create a recognizable warm and vintage aesthetic that balances softness with grounded energy.

PrimaryDusty Rose

RolesLogo, Link, Btn Primary Bg

Dusty Rose imparts a nostalgic and warm personality suitable for inviting and elegant branding.

HEX#B76E6E

RGB183, 110, 110

HSL0, 34, 57

CMYK0, 40, 40, 28

SecondaryTerracotta

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Terracotta adds earthy depth and contrasts with dusty rose to emphasize focus and groundedness.

HEX#8B4C3B

RGB139, 76, 59

HSL13, 40, 39

CMYK0, 45, 58, 45

TertiaryCream

RolesHeadline

Cream brightens the palette with softness, providing a gentle highlight suitable for headlines.

HEX#F5E6DC

RGB245, 230, 220

HSL24, 56, 91

CMYK0, 6, 10, 4

Support Colors

The support colors extend the vintage warmth with muted olive green and soft beige hues that balance the reds without competing visually, adding subtle freshness and warmth.

Muted Olive

RolesIcon, Border, Divider, Outline

Muted Olive complements the reds with a subtle earthy green that balances warmth with calmness.

HEX#9EAA91

RGB158, 170, 145

HSL89, 13, 62

CMYK7, 0, 15, 33

Warm Beige

RolesBg Light

Warm Beige provides a light, neutral background that supports and enhances the main warm tones.

HEX#D8C3B3

RGB216, 195, 179

HSL26, 32, 77

CMYK0, 10, 17, 15

Neutral Colors

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

White

RolesBg Dark, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Off White

HEX#F8F6F4

RGB248, 246, 244

HSL30, 22, 96

CMYK0, 1, 2, 3

Dark Brown

RolesText

HEX#3B2F2F

RGB59, 47, 47

HSL0, 11, 21

CMYK0, 20, 20, 77

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Dusty Rose", "hex": "#B76E6E", "role": "main", "cmyk": { "c": 0, "m": 40, "y": 40, "k": 28, "source": "colorfly" } }, { "name": "Terracotta", "hex": "#8B4C3B", "role": "main", "cmyk": { "c": 0, "m": 45, "y": 58, "k": 45, "source": "colorfly" } }, { "name": "Cream", "hex": "#F5E6DC", "role": "main", "cmyk": { "c": 0, "m": 6, "y": 10, "k": 4, "source": "colorfly" } }, { "name": "Muted Olive", "hex": "#9EAA91", "role": "support", "cmyk": { "c": 7, "m": 0, "y": 15, "k": 33, "source": "colorfly" } }, { "name": "Warm Beige", "hex": "#D8C3B3", "role": "support", "cmyk": { "c": 0, "m": 10, "y": 17, "k": 15, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Off White", "hex": "#F8F6F4", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 2, "k": 3, "source": "colorfly" } }, { "name": "Dark Brown", "hex": "#3B2F2F", "role": "neutral", "cmyk": { "c": 0, "m": 20, "y": 20, "k": 77, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-dusty-rose: #B76E6E; --color-terracotta: #8B4C3B; --color-cream: #F5E6DC; --color-muted-olive: #9EAA91; --color-warm-beige: #D8C3B3; --color-white: #FFFFFF; --color-off-white: #F8F6F4; --color-dark-brown: #3B2F2F; }

:root { --role-logo: #B76E6E; --role-link: #B76E6E; --role-btn-primary-bg: #B76E6E; --role-btn-secondary-bg: #8B4C3B; --role-btn-outlined-border: #8B4C3B; --role-btn-outlined-text: #8B4C3B; --role-headline: #F5E6DC; --role-icon: #9EAA91; --role-border: #9EAA91; --role-divider: #9EAA91; --role-outline: #9EAA91; --role-bg-light: #D8C3B3; --role-bg-dark: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-text: #3B2F2F; }

{ "dusty-rose": "#B76E6E", "terracotta": "#8B4C3B", "cream": "#F5E6DC", "muted-olive": "#9EAA91", "warm-beige": "#D8C3B3", "white": "#FFFFFF", "off-white": "#F8F6F4", "dark-brown": "#3B2F2F" }

<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: #B76E6E; --gradient-partner: #D7AFAF; --gradient-accent: #9EAA91; --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: #B76E6E; --gradient-text-b: #745F5F; --gradient-text-c: #9EAA91; 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>