Sunset Country Road Color Palette for Hospitality and Events

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

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

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Olive Green", "hex": "#7B9E4A", "role": "main", "cmyk": { "c": 22, "m": 0, "y": 53, "k": 38, "source": "colorfly" } }, { "name": "Goldenrod", "hex": "#D8AB4F", "role": "main", "cmyk": { "c": 0, "m": 21, "y": 63, "k": 15, "source": "colorfly" } }, { "name": "Moss Green", "hex": "#4E642E", "role": "main", "cmyk": { "c": 22, "m": 0, "y": 54, "k": 61, "source": "colorfly" } }, { "name": "Sage Green", "hex": "#A7B789", "role": "support", "cmyk": { "c": 9, "m": 0, "y": 25, "k": 28, "source": "colorfly" } }, { "name": "Muted Gold", "hex": "#BFA56A", "role": "support", "cmyk": { "c": 0, "m": 14, "y": 45, "k": 25, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F4F1ED", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 3, "k": 4, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2C2F2B", "role": "neutral", "cmyk": { "c": 6, "m": 0, "y": 9, "k": 82, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

: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; }

: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; }

{ "olive-green": "#7B9E4A", "goldenrod": "#D8AB4F", "moss-green": "#4E642E", "sage-green": "#A7B789", "muted-gold": "#BFA56A", "pure-white": "#FFFFFF", "ivory": "#F4F1ED", "charcoal": "#2C2F2B" }

<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: #7B9E4A; --gradient-partner: #B6CA9B; --gradient-accent: #A7B789; --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: #7B9E4A; --gradient-text-b: #626D54; --gradient-text-c: #5A634A; 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>