Golden Brown Elegance Color Palette for Luxury Branding

Golden Brown Elegance Color Palette

This palette is inspired by the warm, elegant tones of the logo featuring gold and brown shades, balanced with a subtle neutral set of off-white, cream, and deep charcoal for contrast and readability.

MonochromaticLuxury And Lifestylegoldbrownwarmelegant

Main (Brand) Colors

The main colors combine warm gold and brown tones that harmonize naturally, conveying luxury, approachability, and trust, while providing strong visual recognition.

PrimaryGoldenrod

RolesLogo, Btn Primary Bg, Btn Outlined Border

Goldenrod represents opulence and warmth, making it perfect for the brand's luxurious yet inviting identity.

HEX#B89752

RGB184, 151, 82

HSL41, 42, 52

CMYK0, 18, 55, 28

SecondaryDark Brown

RolesLink, Btn Secondary Bg, Headline

Dark Brown grounds the palette with depth and stability, fostering a sense of reliability and tradition.

HEX#5C432C

RGB92, 67, 44

HSL29, 35, 27

CMYK0, 27, 52, 64

TertiaryBronze

RolesBtn Outlined Text

Bronze provides a refined accent that complements the gold and brown, enhancing the brand's elegance.

HEX#AA7E3D

RGB170, 126, 61

HSL36, 47, 45

CMYK0, 26, 64, 33

Support Colors

The support colors softly extend the main palette with muted, low-saturation tones to reinforce warmth without overpowering the luxurious main colors.

Light Sand

RolesIcon, Border, Divider, Outline

Light Sand adds a gentle contrast and texture, supporting the primary gold and brown without distraction.

HEX#D9C8A8

RGB217, 200, 168

HSL39, 39, 75

CMYK0, 8, 23, 15

Neutral Colors

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

Ivory

RolesBg Light, Btn Secondary Text

HEX#F9F5F0

RGB249, 245, 240

HSL33, 43, 96

CMYK0, 2, 4, 2

Cream

RolesBg Dark

HEX#E9E2D3

RGB233, 226, 211

HSL41, 33, 87

CMYK0, 3, 9, 9

Charcoal

RolesText, Btn Primary Text

HEX#3B382F

RGB59, 56, 47

HSL45, 11, 21

CMYK0, 5, 20, 77

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Goldenrod", "hex": "#B89752", "role": "main", "cmyk": { "c": 0, "m": 18, "y": 55, "k": 28, "source": "colorfly" } }, { "name": "Dark Brown", "hex": "#5C432C", "role": "main", "cmyk": { "c": 0, "m": 27, "y": 52, "k": 64, "source": "colorfly" } }, { "name": "Bronze", "hex": "#AA7E3D", "role": "main", "cmyk": { "c": 0, "m": 26, "y": 64, "k": 33, "source": "colorfly" } }, { "name": "Light Sand", "hex": "#D9C8A8", "role": "support", "cmyk": { "c": 0, "m": 8, "y": 23, "k": 15, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F9F5F0", "role": "neutral", "cmyk": { "c": 0, "m": 2, "y": 4, "k": 2, "source": "colorfly" } }, { "name": "Cream", "hex": "#E9E2D3", "role": "neutral", "cmyk": { "c": 0, "m": 3, "y": 9, "k": 9, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#3B382F", "role": "neutral", "cmyk": { "c": 0, "m": 5, "y": 20, "k": 77, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-goldenrod: #B89752; --color-dark-brown: #5C432C; --color-bronze: #AA7E3D; --color-light-sand: #D9C8A8; --color-ivory: #F9F5F0; --color-cream: #E9E2D3; --color-charcoal: #3B382F; }

:root { --role-logo: #B89752; --role-btn-primary-bg: #B89752; --role-btn-outlined-border: #B89752; --role-link: #5C432C; --role-btn-secondary-bg: #5C432C; --role-headline: #5C432C; --role-btn-outlined-text: #AA7E3D; --role-icon: #D9C8A8; --role-border: #D9C8A8; --role-divider: #D9C8A8; --role-outline: #D9C8A8; --role-bg-light: #F9F5F0; --role-btn-secondary-text: #F9F5F0; --role-bg-dark: #E9E2D3; --role-text: #3B382F; --role-btn-primary-text: #3B382F; }

<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: #B89752; --gradient-partner: #CDB686; --gradient-accent: #D9C8A8; --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: #B89752; --gradient-text-b: #6F6248; --gradient-text-c: #756C5B; 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>