Burnt Sienna#8B5E3C
Olive Green#7A9461
Slate Teal#54717A
Sandy Taupe#AD956E
Moss Gray#9B8F73
Palette direction

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
palette-preview.example
Luxury And Lifestyle color direction

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.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Pure White #FFFFFFon Burnt Sienna #8B5E3C5.6:1 Strong
Logo Pure White #FFFFFFon Slate Teal #54717A5.2:1 Strong
Logo Charcoal #3A3A3Aon Pure White #FFFFFF11.4:1 Excellent
Logo Pure White #FFFFFFon Charcoal #3A3A3A11.4:1 Excellent
Icon color
BackgroundBurnt Sienna#8B5E3CTextPure White#FFFFFF
Primary Button5.58:1
AA

Best for the main action users should notice first.

BackgroundOlive Green#7A9461TextCharcoal#3A3A3A
Secondary Button3.38:1
Large text

Useful for softer choices and secondary paths.

BackgroundMoss Gray#9B8F73TextOlive Green#7A9461
Outlined Button1.05:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundMoss Gray#9B8F73TextBurnt Sienna#8B5E3C
Text Button1.75:1
Low

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsComplementary color relationship
9:41Warm Cozy Woodland Color Palette Color role balance
Complementary system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CWarm Cozy Woodland Color PaletteLuxury And Lifestyle brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

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.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Burnt Sienna #8B5E3C
HeadlineUsed for main titles and key messages.Slate Teal #54717A
LinkUsed for links and interactive text.Burnt Sienna #8B5E3C

Buttons

Primary Button
BackgroundBurnt Sienna #8B5E3C
TextPure White #FFFFFF
Secondary Button
BackgroundOlive Green #7A9461
TextCharcoal #3A3A3A
Outlined Button
BackgroundOlive Green #7A9461
TextOlive Green #7A9461

Interface

TextDefault readable body text.Charcoal #3A3A3A
Bg LightLight page or section background.Moss Gray #9B8F73
Bg DarkDark page or section background.Moss Gray #9B8F73
IconSmall interface icons and marks.Sandy Taupe #AD956E
BorderCards, inputs, and component borders.Sandy Taupe #AD956E
DividerSubtle separators between content.Sandy Taupe #AD956E
OutlineFocus rings and emphasis outlines.Sandy Taupe #AD956E

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

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

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.

Use when: you need the actual colors.
: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;
}

Role tokens

Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.

Use when: you need UI roles, not just swatches.
: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;
}

JSON

Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.

Use when: a developer or app needs data.
{
    "burnt-sienna": "#8B5E3C",
    "olive-green": "#7A9461",
    "slate-teal": "#54717A",
    "sandy-taupe": "#AD956E",
    "moss-gray": "#9B8F73",
    "pure-white": "#FFFFFF",
    "soft-ivory": "#F5F2ED",
    "charcoal": "#3A3A3A"
}
Press Space to load new palette