Deep Gold Luxury Color Palette for Fashion and Beauty Brands

Deep Gold Luxury Color Palette

This palette mirrors the luxurious and sophisticated mood of the provided image using deep blacks and rich gold that conveys elegant warmth and exclusivity without the dark oxblood accent.

MonochromaticFashion Beautyluxurygoldblackfashion

Main (Brand) Colors

The main colors feature a deep Charcoal black paired with an opulent Rich Gold, crafting a classic and recognizable luxury contrast that evokes exclusivity and timeless sophistication.

PrimaryCharcoal

RolesLogo, Btn Primary Bg, Headline

Charcoal provides a deep, almost matte black that grounds the palette with sophistication and solidity.

HEX#1C1C1C

RGB28, 28, 28

HSL0, 0, 11

CMYK0, 0, 0, 89

SecondaryRich Gold

RolesLink, Btn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Rich Gold offers a luminous, warm metallic tone that conveys luxury, quality, and exclusivity.

HEX#C6A664

RGB198, 166, 100

HSL40, 46, 58

CMYK0, 16, 49, 22

Support Colors

Supporting colors extend the main palette with muted dark brown and soft cream to add visual balance and warmth while maintaining the luxurious tone without introducing competing hues.

Dark Walnut

RolesIcon, Border, Divider, Outline

Dark Walnut complements the Charcoal by adding a soft, warm wood-like tone that enhances the palette's richness without overpowering it.

HEX#4A3C31

RGB74, 60, 49

HSL26, 20, 24

CMYK0, 19, 34, 71

Soft Ivory

RolesBg Light

Soft Ivory provides a gentle near-white background that improves readability and offsets the dark tones with subtle warmth.

HEX#EEE6D8

RGB238, 230, 216

HSL38, 39, 89

CMYK0, 3, 9, 7

Neutral Colors

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

Pure White

RolesBtn Primary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Near White

HEX#F6F2ED

RGB246, 242, 237

HSL33, 33, 95

CMYK0, 2, 4, 4

Rich Black

RolesBg Dark, Text, Btn Secondary Text

HEX#121212

RGB18, 18, 18

HSL0, 0, 7

CMYK0, 0, 0, 93

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Charcoal", "hex": "#1C1C1C", "role": "main", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 89, "source": "colorfly" } }, { "name": "Rich Gold", "hex": "#C6A664", "role": "main", "cmyk": { "c": 0, "m": 16, "y": 49, "k": 22, "source": "colorfly" } }, { "name": "Dark Walnut", "hex": "#4A3C31", "role": "support", "cmyk": { "c": 0, "m": 19, "y": 34, "k": 71, "source": "colorfly" } }, { "name": "Soft Ivory", "hex": "#EEE6D8", "role": "support", "cmyk": { "c": 0, "m": 3, "y": 9, "k": 7, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Near White", "hex": "#F6F2ED", "role": "neutral", "cmyk": { "c": 0, "m": 2, "y": 4, "k": 4, "source": "colorfly" } }, { "name": "Rich Black", "hex": "#121212", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 93, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-charcoal: #1C1C1C; --color-rich-gold: #C6A664; --color-dark-walnut: #4A3C31; --color-soft-ivory: #EEE6D8; --color-pure-white: #FFFFFF; --color-near-white: #F6F2ED; --color-rich-black: #121212; }

:root { --role-logo: #1C1C1C; --role-btn-primary-bg: #1C1C1C; --role-headline: #1C1C1C; --role-link: #C6A664; --role-btn-secondary-bg: #C6A664; --role-btn-outlined-border: #C6A664; --role-btn-outlined-text: #C6A664; --role-icon: #4A3C31; --role-border: #4A3C31; --role-divider: #4A3C31; --role-outline: #4A3C31; --role-bg-light: #EEE6D8; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #121212; --role-text: #121212; --role-btn-secondary-text: #121212; }

{ "charcoal": "#1C1C1C", "rich-gold": "#C6A664", "dark-walnut": "#4A3C31", "soft-ivory": "#EEE6D8", "pure-white": "#FFFFFF", "near-white": "#F6F2ED", "rich-black": "#121212" }

<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: #1C1C1C; --gradient-partner: #828282; --gradient-accent: #4A3C31; --gradient-text: #FFFFFF; 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: #1C1C1C; --gradient-text-b: #828282; --gradient-text-c: #4A3C31; 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>