Golden Amber Vibrant Color Palette for Hospitality and Events

Golden Amber Vibrant Color Palette

This palette draws inspiration from the vibrant, warm golden hues and rich highlights in the image, combining energetic amber and gold tones with deep, grounding accents, balanced by soft neutrals for a clear and radiant brand presence.

AnalogousHospitality Eventsambergoldwarm orangedeep green

Main (Brand) Colors

The palette's main colors combine energetic amber and rich gold hues balanced by a deep green, creating a vibrant yet grounded harmony that conveys warmth, optimism, and reliability.

PrimaryAmber

RolesLogo, Btn Primary Bg, Link

Amber radiates energizing warmth and optimism, ideal for catching attention and creating a friendly approachable brand.

HEX#F7B733

RGB247, 183, 51

HSL40, 92, 58

CMYK0, 26, 79, 3

SecondaryGoldenrod

RolesBtn Secondary Bg, Headline

Goldenrod amplifies the radiant, optimistic aura while supporting the primary amber with richer golden warmth.

HEX#E6A400

RGB230, 164, 0

HSL43, 100, 45

CMYK0, 29, 100, 10

TertiaryForest Green

RolesBtn Outlined Border, Btn Outlined Text

Forest Green grounds the palette, providing depth and balance that complements the warm hues and adds sophistication.

HEX#2E4E1F

RGB46, 78, 31

HSL101, 43, 21

CMYK41, 0, 60, 69

Support Colors

Support colors extend the main palette by adding harmonious, softer earth tones that balance and complement without overpowering.

Sandy Brown

RolesIcon, Border, Divider, Outline

Sandy Brown provides a gentle, muted earth tone that complements the gold and amber, softening the overall warmth and ensuring legibility.

HEX#D9BA6C

RGB217, 186, 108

HSL43, 59, 64

CMYK0, 14, 50, 15

Neutral Colors

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

White

RolesBg Light

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ivory

RolesBg Dark

HEX#F1EFE6

RGB241, 239, 230

HSL49, 28, 92

CMYK0, 1, 5, 5

Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#2B2B2B

RGB43, 43, 43

HSL0, 0, 17

CMYK0, 0, 0, 83

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Amber", "hex": "#F7B733", "role": "main", "cmyk": { "c": 0, "m": 26, "y": 79, "k": 3, "source": "colorfly" } }, { "name": "Goldenrod", "hex": "#E6A400", "role": "main", "cmyk": { "c": 0, "m": 29, "y": 100, "k": 10, "source": "colorfly" } }, { "name": "Forest Green", "hex": "#2E4E1F", "role": "main", "cmyk": { "c": 41, "m": 0, "y": 60, "k": 69, "source": "colorfly" } }, { "name": "Sandy Brown", "hex": "#D9BA6C", "role": "support", "cmyk": { "c": 0, "m": 14, "y": 50, "k": 15, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F1EFE6", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 5, "k": 5, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2B2B2B", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 83, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-amber: #F7B733; --color-goldenrod: #E6A400; --color-forest-green: #2E4E1F; --color-sandy-brown: #D9BA6C; --color-white: #FFFFFF; --color-ivory: #F1EFE6; --color-charcoal: #2B2B2B; }

:root { --role-logo: #F7B733; --role-btn-primary-bg: #F7B733; --role-link: #F7B733; --role-btn-secondary-bg: #E6A400; --role-headline: #E6A400; --role-btn-outlined-border: #2E4E1F; --role-btn-outlined-text: #2E4E1F; --role-icon: #D9BA6C; --role-border: #D9BA6C; --role-divider: #D9BA6C; --role-outline: #D9BA6C; --role-bg-light: #FFFFFF; --role-bg-dark: #F1EFE6; --role-text: #2B2B2B; --role-btn-primary-text: #2B2B2B; --role-btn-secondary-text: #2B2B2B; }

<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: #F7B733; --gradient-partner: #BC8B27; --gradient-accent: #D3B270; --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: #85631C; --gradient-text-b: #BC8B27; --gradient-text-c: #72603C; 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>