Navy Blue Cottage Color Palette for Airbnb Hospitality

Navy Blue Cottage Color Palette

This palette features a deep Navy Blue as the anchor, complemented by a natural Forest Green and a warm Burnt Orange to evoke a welcoming, beach-cottage atmosphere that balances fresh coastal serenity with earthy comfort. The support colors of Soft Sage and Muted Clay reinforce the main colors quietly, enhancing the natural feel without overpowering, while the neutrals provide crisp contrast for readability and interface clarity.

Split ComplementaryHospitality Eventsnavy blueforest greenburnt orangebeach cottage

Main (Brand) Colors

The triadic harmony of deep navy blue, forest green, and burnt orange creates a vibrant yet balanced palette that feels both natural and inviting, perfectly reflecting the coastal and rustic charm of the cottage.

PrimaryNavy Blue

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

Navy Blue establishes a firm and trustworthy foundation echoing the deep coastal waters surrounding the property.

HEX#05344B

RGB5, 52, 75

HSL200, 88, 16

CMYK93, 31, 0, 71

SecondaryForest Green

RolesHeadline, Btn Secondary Bg

Forest Green brings a refreshing natural touch, evoking the nearby flora and grounding the palette in organic warmth.

HEX#2F5D42

RGB47, 93, 66

HSL145, 33, 27

CMYK49, 0, 29, 64

TertiaryBurnt Orange

Burnt Orange adds vibrant energy and warmth reminiscent of cozy cottage sunsets and inviting interiors.

HEX#C35325

RGB195, 83, 37

HSL17, 68, 45

CMYK0, 57, 81, 24

Support Colors

Soft Sage and Muted Clay act as calm, earthy accents that enhance the main colors by adding subtle texture and depth while maintaining an understated presence.

Soft Sage

RolesIcon, Border, Divider, Outline

Soft Sage complements the Forest Green by extending the natural palette with a gentle and soothing cast.

HEX#A1B29F

RGB161, 178, 159

HSL114, 11, 66

CMYK10, 0, 11, 30

Muted Clay

Muted Clay balances the Burnt Orange with a softer, earthier tone that supports warmth without overpowering.

HEX#B67A56

RGB182, 122, 86

HSL23, 40, 53

CMYK0, 33, 53, 29

Neutral Colors

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

White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Alabaster

HEX#F6F6F6

RGB246, 246, 246

HSL0, 0, 96

CMYK0, 0, 0, 4

Charcoal

RolesBg Dark, Text

HEX#222222

RGB34, 34, 34

HSL0, 0, 13

CMYK0, 0, 0, 87

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Navy Blue", "hex": "#05344B", "role": "main", "cmyk": { "c": 93, "m": 31, "y": 0, "k": 71, "source": "colorfly" } }, { "name": "Forest Green", "hex": "#2F5D42", "role": "main", "cmyk": { "c": 49, "m": 0, "y": 29, "k": 64, "source": "colorfly" } }, { "name": "Burnt Orange", "hex": "#C35325", "role": "main", "cmyk": { "c": 0, "m": 57, "y": 81, "k": 24, "source": "colorfly" } }, { "name": "Soft Sage", "hex": "#A1B29F", "role": "support", "cmyk": { "c": 10, "m": 0, "y": 11, "k": 30, "source": "colorfly" } }, { "name": "Muted Clay", "hex": "#B67A56", "role": "support", "cmyk": { "c": 0, "m": 33, "y": 53, "k": 29, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Alabaster", "hex": "#F6F6F6", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 4, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#222222", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 87, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-navy-blue: #05344B; --color-forest-green: #2F5D42; --color-burnt-orange: #C35325; --color-soft-sage: #A1B29F; --color-muted-clay: #B67A56; --color-white: #FFFFFF; --color-alabaster: #F6F6F6; --color-charcoal: #222222; }

:root { --role-logo: #05344B; --role-link: #05344B; --role-btn-primary-bg: #05344B; --role-btn-outlined-border: #05344B; --role-btn-outlined-text: #05344B; --role-headline: #2F5D42; --role-btn-secondary-bg: #2F5D42; --role-icon: #A1B29F; --role-border: #A1B29F; --role-divider: #A1B29F; --role-outline: #A1B29F; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #222222; --role-text: #222222; }

{ "navy-blue": "#05344B", "forest-green": "#2F5D42", "burnt-orange": "#C35325", "soft-sage": "#A1B29F", "muted-clay": "#B67A56", "white": "#FFFFFF", "alabaster": "#F6F6F6", "charcoal": "#222222" }

<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: #05344B; --gradient-partner: #768F9C; --gradient-accent: #A1B29F; --gradient-text: #FFFFFF; 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: #05344B; --gradient-text-b: #768F9C; --gradient-text-c: #A1B29F; 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>