Mahogany#5C2B0C
Pine Green#244524
Sage#9CAF88
Charcoal#444444
Sand#D7C9B6
Palette direction

Mahogany Green Luxury Color Palette

This bespoke luxury wood garden palette combines rich, warm browns and deep greens to evoke natural elegance and craftsmanship, balanced with soft sage and charcoal accents that provide depth and refinement. The palette uses creamy Ivory and deep Charcoal neutrals to ensure clarity and contrast across digital and print applications.

CustomLuxury And Lifestyleluxurywoodgardenbespoke
palette-preview.example
Luxury And Lifestyle color direction

Mahogany Green Luxury Color Palette

This bespoke luxury wood garden palette combines rich, warm browns and deep greens to evoke natural elegance and craftsmanship, balanced with soft sage and charcoal accents that provide depth and refinement. The palette uses creamy Ivory and deep Charcoal neutrals to ensure clarity and contrast across digital and print applications.

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 Ivory #FFFFFFon Mahogany #5C2B0C11.6:1 Excellent
Logo Charcoal Black #1B1B1Bon Sage #9CAF887.3:1 Excellent
Logo Charcoal Black #1B1B1Bon Ivory #FFFFFF17.2:1 Excellent
Logo Charcoal Black #1B1B1Bon Sand #D7C9B610.6:1 Excellent
Icon color
BackgroundMahogany#5C2B0CTextIvory#FFFFFF
Primary Button11.63:1
AAA

Best for the main action users should notice first.

BackgroundPine Green#244524TextIvory#FFFFFF
Secondary Button10.76:1
AAA

Useful for softer choices and secondary paths.

BackgroundSand#D7C9B6TextPine Green#244524
Outlined Button6.62:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundSand#D7C9B6TextPine Green#244524
Text Button6.62:1
AA

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

Palette composition8 colorsCustom color relationship
9:41Mahogany Green Luxury Color Palette Color role balance
Custom 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.

CMahogany Green Luxury Color PaletteLuxury And Lifestyle brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The palette's main colors are warm Mahogany, deep Pine Green, and soft Sage forming an analogous harmony that captures natural luxury and understated elegance for bespoke garden structures.

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.Mahogany #5C2B0C
HeadlineUsed for main titles and key messages.Sage #9CAF88
LinkUsed for links and interactive text.Pine Green #244524

Buttons

Primary Button
BackgroundMahogany #5C2B0C
TextIvory #FFFFFF
Secondary Button
BackgroundPine Green #244524
TextIvory #FFFFFF
Outlined Button
BackgroundMahogany #5C2B0C
TextPine Green #244524

Interface

TextDefault readable body text.Charcoal Black #1B1B1B
Bg LightLight page or section background.Sand #D7C9B6
Bg DarkDark page or section background.Sand #D7C9B6
IconSmall interface icons and marks.Charcoal #444444
BorderCards, inputs, and component borders.Charcoal #444444
DividerSubtle separators between content.Charcoal #444444
OutlineFocus rings and emphasis outlines.Charcoal #444444

Palette Colors

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

Main (Brand) Colors

The palette's main colors are warm Mahogany, deep Pine Green, and soft Sage forming an analogous harmony that captures natural luxury and understated elegance for bespoke garden structures.

PrimaryMahogany

RolesLogo, Btn Primary Bg, Btn Outlined Border

Mahogany brings rich warmth and classic luxury resonance, symbolizing fine wood craftsmanship and quality.

HEX#5C2B0C
RGB92, 43, 12
HSL23, 77, 20
CMYK0, 53, 87, 64
SecondaryPine Green

RolesLink, Btn Secondary Bg, Btn Outlined Text

Pine Green provides deep natural grounding that enhances the botanical connection and complements wood tones.

HEX#244524
RGB36, 69, 36
HSL120, 31, 21
CMYK48, 0, 48, 73
TertiarySage

RolesHeadline

Sage softly balances the strong natural hues with a muted, calming presence that evokes refined garden serenity.

HEX#9CAF88
RGB156, 175, 136
HSL89, 20, 61
CMYK11, 0, 22, 31

Support Colors

The support colors soften and enrich the main palette by introducing subtle charcoal gray and warm sand tones that provide contrast and sophistication without competing with the primary wood-inspired hues.

Charcoal

RolesIcon, Border, Divider, Outline

Charcoal adds depth and a contemporary touch, grounding the palette and supporting the visual hierarchy while maintaining a natural feel.

HEX#444444
RGB68, 68, 68
HSL0, 0, 27
CMYK0, 0, 0, 73
Sand

RolesBg Light, Bg Dark

Sand offers a warm, neutral backdrop evocative of natural stone or fine sand, enhancing the palette's earthy and luxurious quality.

HEX#D7C9B6
RGB215, 201, 182
HSL35, 29, 78
CMYK0, 7, 15, 16

Neutral Colors

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

Ivory

RolesBtn Primary Text, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Cream
HEX#F7F3EC
RGB247, 243, 236
HSL38, 41, 95
CMYK0, 2, 4, 3
Charcoal Black

RolesText

HEX#1B1B1B
RGB27, 27, 27
HSL0, 0, 11
CMYK0, 0, 0, 89

Export and Handoff

Copy palette values for design systems, websites, and client handoff. You can also copy this palette for Logo Export on myLogo.review, so your colors are ready there in one click.

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-mahogany: #5C2B0C;
  --color-pine-green: #244524;
  --color-sage: #9CAF88;
  --color-charcoal: #444444;
  --color-sand: #D7C9B6;
  --color-ivory: #FFFFFF;
  --color-cream: #F7F3EC;
  --color-charcoal-black: #1B1B1B;
}

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: #5C2B0C;
  --role-btn-primary-bg: #5C2B0C;
  --role-btn-outlined-border: #5C2B0C;
  --role-link: #244524;
  --role-btn-secondary-bg: #244524;
  --role-btn-outlined-text: #244524;
  --role-headline: #9CAF88;
  --role-icon: #444444;
  --role-border: #444444;
  --role-divider: #444444;
  --role-outline: #444444;
  --role-bg-light: #D7C9B6;
  --role-bg-dark: #D7C9B6;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-text: #1B1B1B;
}

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.
{
    "mahogany": "#5C2B0C",
    "pine-green": "#244524",
    "sage": "#9CAF88",
    "charcoal": "#444444",
    "sand": "#D7C9B6",
    "ivory": "#FFFFFF",
    "cream": "#F7F3EC",
    "charcoal-black": "#1B1B1B"
}
Press Space to load new palette