Olive Green#7B9E4A
Goldenrod#D8AB4F
Moss Green#4E642E
Sage Green#A7B789
Muted Gold#BFA56A
Palette direction

Sunset Country Road Color Palette

This palette captures the warm, earthy tones of a serene country road at sunset, combining rich natural greens and golden hues with subtle neutral shades. The main colors evoke a comforting and grounded atmosphere, while the support colors balance the palette with softer greens and muted browns. Neutrals provide clean and readable text contrasts against lighter backgrounds and depth for darker elements, ensuring usability and clarity.

AnalogousHospitality Eventssunsetcountryroadearthy
palette-preview.example
Hospitality Events color direction

Sunset Country Road Color Palette

This palette captures the warm, earthy tones of a serene country road at sunset, combining rich natural greens and golden hues with subtle neutral shades. The main colors evoke a comforting and grounded atmosphere, while the support colors balance the palette with softer greens and muted browns. Neutrals provide clean and readable text contrasts against lighter backgrounds and depth for darker elements, ensuring usability and clarity.

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 Moss Green #4E642E6.6:1 Strong
Logo Charcoal #2C2F2Bon Goldenrod #D8AB4F6.4:1 Strong
Logo Charcoal #2C2F2Bon Pure White #FFFFFF13.6:1 Excellent
Logo Charcoal #2C2F2Bon Sage Green #A7B7896.3:1 Strong
Icon color
BackgroundOlive Green#7B9E4ATextCharcoal#2C2F2B
Primary Button4.41:1
Large text

Best for the main action users should notice first.

BackgroundGoldenrod#D8AB4FTextCharcoal#2C2F2B
Secondary Button6.37:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextGoldenrod#D8AB4F
Outlined Button2.13:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextOlive Green#7B9E4A
Text Button3.07:1
Large text

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

Palette composition8 colorsAnalogous color relationship
9:41Sunset Country Road Color Palette Color role balance
Analogous 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.

CSunset Country Road Color PaletteHospitality Events brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors reflect the harmonious transitions of the sunset landscape, blending green and golden hues that work together to create a familiar natural identity.

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.Olive Green #7B9E4A
HeadlineUsed for main titles and key messages.Olive Green #7B9E4A
LinkUsed for links and interactive text.Olive Green #7B9E4A

Buttons

Primary Button
BackgroundOlive Green #7B9E4A
TextCharcoal #2C2F2B
Secondary Button
BackgroundGoldenrod #D8AB4F
TextCharcoal #2C2F2B
Outlined Button
BackgroundGoldenrod #D8AB4F
TextGoldenrod #D8AB4F

Interface

TextDefault readable body text.Charcoal #2C2F2B
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Ivory #F4F1ED
IconSmall interface icons and marks.Sage Green #A7B789
BorderCards, inputs, and component borders.Sage Green #A7B789
DividerSubtle separators between content.Sage Green #A7B789
OutlineFocus rings and emphasis outlines.Sage Green #A7B789

Palette Colors

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

Main (Brand) Colors

The main colors reflect the harmonious transitions of the sunset landscape, blending green and golden hues that work together to create a familiar natural identity.

PrimaryOlive Green

RolesLogo, Link, Btn Primary Bg, Headline

Olive Green conveys natural growth, stability, and an organic feel representing the grass and trees.

HEX#7B9E4A
RGB123, 158, 74
HSL85, 36, 45
CMYK22, 0, 53, 38
SecondaryGoldenrod

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Goldenrod offers warmth and energy akin to the setting sun, enhancing vibrancy without overpowering.

HEX#D8AB4F
RGB216, 171, 79
HSL40, 64, 58
CMYK0, 21, 63, 15
TertiaryMoss Green

Moss Green grounds the palette with depth and calmness, balancing brightness with natural earthiness.

HEX#4E642E
RGB78, 100, 46
HSL84, 37, 29
CMYK22, 0, 54, 61

Support Colors

Support colors complement the main palette by introducing softer and muted tonalities of green and brown, enriching textural complexity without competing for attention.

Sage Green

RolesIcon, Border, Divider, Outline

Sage Green offers a soft, subdued contrast that enhances legibility and visual calmness next to main greens.

HEX#A7B789
RGB167, 183, 137
HSL81, 24, 63
CMYK9, 0, 25, 28
Muted Gold

Muted Gold provides a gentle accent that echoes Goldenrod but with a more reserved presence, ideal for subtle highlights.

HEX#BFA56A
RGB191, 165, 106
HSL42, 40, 58
CMYK0, 14, 45, 25

Neutral Colors

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

Pure White

RolesBg Light

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory

RolesBg Dark

HEX#F4F1ED
RGB244, 241, 237
HSL34, 24, 94
CMYK0, 1, 3, 4
Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#2C2F2B
RGB44, 47, 43
HSL105, 4, 18
CMYK6, 0, 9, 82

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-olive-green: #7B9E4A;
  --color-goldenrod: #D8AB4F;
  --color-moss-green: #4E642E;
  --color-sage-green: #A7B789;
  --color-muted-gold: #BFA56A;
  --color-pure-white: #FFFFFF;
  --color-ivory: #F4F1ED;
  --color-charcoal: #2C2F2B;
}

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: #7B9E4A;
  --role-link: #7B9E4A;
  --role-btn-primary-bg: #7B9E4A;
  --role-headline: #7B9E4A;
  --role-btn-secondary-bg: #D8AB4F;
  --role-btn-outlined-border: #D8AB4F;
  --role-btn-outlined-text: #D8AB4F;
  --role-icon: #A7B789;
  --role-border: #A7B789;
  --role-divider: #A7B789;
  --role-outline: #A7B789;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #F4F1ED;
  --role-text: #2C2F2B;
  --role-btn-primary-text: #2C2F2B;
  --role-btn-secondary-text: #2C2F2B;
}

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.
{
    "olive-green": "#7B9E4A",
    "goldenrod": "#D8AB4F",
    "moss-green": "#4E642E",
    "sage-green": "#A7B789",
    "muted-gold": "#BFA56A",
    "pure-white": "#FFFFFF",
    "ivory": "#F4F1ED",
    "charcoal": "#2C2F2B"
}
Press Space to load new palette