Warm Cozy Woodland Color Palette for Luxury and Lifestyle Brands

Warm Cozy Woodland Color Palette

This palette is inspired by the warm, rich wood tones, soft greens, and earthy neutrals of an upscale lounge setting, combining classic elegance with modern comfort. The three main colors provide a harmonious triadic scheme that balances warmth and freshness, while the support colors offer subtle depth and refinement. Neutrals ensure readability and interface clarity with a timeless feel.

ComplementaryLuxury And Lifestylewarm woodsoft greenearth tonesclassic

Main (Brand) Colors

The palette's three main colors form a triadic harmony combining warm burnt orange, soft olive green, and muted teal blue which together create a distinctive, balanced identity that is both luxurious and inviting.

PrimaryBurnt Sienna

RolesLogo, Link, Btn Primary Bg

Burnt Sienna provides rich warmth and a grounded, natural elegance that serves as a memorable brand anchor.

HEX#8B5E3C

RGB139, 94, 60

HSL26, 40, 39

CMYK0, 32, 57, 45

SecondaryOlive Green

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Olive Green adds a serene and sophisticated touch that balances warmth with freshness in the palette.

HEX#7A9461

RGB122, 148, 97

HSL91, 21, 48

CMYK18, 0, 34, 42

TertiarySlate Teal

RolesHeadline

Slate Teal injects cool refinement and depth, harmonizing with the other hues for a composed, upscale feel.

HEX#54717A

RGB84, 113, 122

HSL194, 18, 40

CMYK31, 7, 0, 52

Support Colors

The two support colors extend the palette with softer, muted tones inspired by natural wood and foliage textures, enhancing the palette’s warmth and organic sensation without competing with the main colors.

Sandy Taupe

RolesIcon, Border, Divider, Outline

Sandy Taupe complements the main colors with a soft, warm neutral that echoes natural wood surfaces and provides subtle contrast.

HEX#AD956E

RGB173, 149, 110

HSL37, 28, 55

CMYK0, 14, 36, 32

Moss Gray

RolesBg Light, Bg Dark

Moss Gray grounds the palette by lending an earthy, muted balance that supports readability and interface usability.

HEX#9B8F73

RGB155, 143, 115

HSL42, 17, 53

CMYK0, 8, 26, 39

Neutral Colors

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

Pure White

RolesBtn Primary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Soft Ivory

HEX#F5F2ED

RGB245, 242, 237

HSL37, 29, 95

CMYK0, 1, 3, 4

Charcoal

RolesText, Btn Secondary Text

HEX#3A3A3A

RGB58, 58, 58

HSL0, 0, 23

CMYK0, 0, 0, 77

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Burnt Sienna", "hex": "#8B5E3C", "role": "main", "cmyk": { "c": 0, "m": 32, "y": 57, "k": 45, "source": "colorfly" } }, { "name": "Olive Green", "hex": "#7A9461", "role": "main", "cmyk": { "c": 18, "m": 0, "y": 34, "k": 42, "source": "colorfly" } }, { "name": "Slate Teal", "hex": "#54717A", "role": "main", "cmyk": { "c": 31, "m": 7, "y": 0, "k": 52, "source": "colorfly" } }, { "name": "Sandy Taupe", "hex": "#AD956E", "role": "support", "cmyk": { "c": 0, "m": 14, "y": 36, "k": 32, "source": "colorfly" } }, { "name": "Moss Gray", "hex": "#9B8F73", "role": "support", "cmyk": { "c": 0, "m": 8, "y": 26, "k": 39, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Soft Ivory", "hex": "#F5F2ED", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 3, "k": 4, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#3A3A3A", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 77, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-burnt-sienna: #8B5E3C; --color-olive-green: #7A9461; --color-slate-teal: #54717A; --color-sandy-taupe: #AD956E; --color-moss-gray: #9B8F73; --color-pure-white: #FFFFFF; --color-soft-ivory: #F5F2ED; --color-charcoal: #3A3A3A; }

:root { --role-logo: #8B5E3C; --role-link: #8B5E3C; --role-btn-primary-bg: #8B5E3C; --role-btn-secondary-bg: #7A9461; --role-btn-outlined-border: #7A9461; --role-btn-outlined-text: #7A9461; --role-headline: #54717A; --role-icon: #AD956E; --role-border: #AD956E; --role-divider: #AD956E; --role-outline: #AD956E; --role-bg-light: #9B8F73; --role-bg-dark: #9B8F73; --role-btn-primary-text: #FFFFFF; --role-text: #3A3A3A; --role-btn-secondary-text: #3A3A3A; }

{ "burnt-sienna": "#8B5E3C", "olive-green": "#7A9461", "slate-teal": "#54717A", "sandy-taupe": "#AD956E", "moss-gray": "#9B8F73", "pure-white": "#FFFFFF", "soft-ivory": "#F5F2ED", "charcoal": "#3A3A3A" }

<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: #8B5E3C; --gradient-partner: #BFA694; --gradient-accent: #AD956E; --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: #8B5E3C; --gradient-text-b: #BFA694; --gradient-text-c: #AD956E; 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>