Charcoal Crimson Gold Color Palette for Luxury and Lifestyle Brands |...

Charcoal Crimson Gold Color Palette

This color palette uses Charcoal Black, Crimson Red, and Gold as its main colors, creating a bold and elegant identity that balances strength, passion, and luxury. The supporting cool blue and soft taupe accents provide subtle harmony and visual balance without overwhelming the core brand colors. The neutral set includes pure white, a light warm gray, and a deep charcoal black to ensure high contrast and readability across all digital interfaces.

Split ComplementaryLuxury And Lifestylecharcoalcrimsongoldluxury

Main (Brand) Colors

Charcoal Black, Crimson Red, and Gold form a distinctive main color system combining strength, passion, and luxury with excellent visual separation and brand recognition.

PrimaryCharcoal

RolesLogo, Link, Btn Outlined Border, Btn Outlined Text, Btn Secondary Bg

Charcoal Black conveys strength, professionalism, and modern sophistication as a grounding color for the brand.

HEX#36454F

RGB54, 69, 79

HSL204, 19, 26

CMYK32, 13, 0, 69

SecondaryCrimson

RolesBtn Primary Bg, Headline

Crimson Red evokes passion, energy, and attention, making it ideal for primary call-to-actions and headline emphasis.

HEX#DF134D

RGB223, 19, 77

HSL343, 84, 47

CMYK0, 91, 65, 13

TertiaryGold

Gold adds a touch of luxury, optimism, and prestige, enhancing secondary button readability and brand refinement.

HEX#FFD700

RGB255, 215, 0

HSL51, 100, 50

CMYK0, 16, 100, 0

Support Colors

The support colors subtly extend the main palette with a calm blue and a soft taupe to reinforce brand harmony and provide visual balance for interface elements like icons and borders.

Steel Blue

RolesIcon, Border, Divider, Outline

Steel Blue complements Charcoal by providing a cool, stable accent that balances the warmth of Crimson and Gold.

HEX#4A6FA5

RGB74, 111, 165

HSL216, 38, 47

CMYK55, 33, 0, 35

Taupe

Taupe offers a gentle, neutral warmth that works as a subtle headline accent, softening the palette's intensity.

HEX#C4B7A6

RGB196, 183, 166

HSL34, 20, 71

CMYK0, 7, 15, 23

Neutral Colors

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

White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Alabaster

HEX#F2F2F2

RGB242, 242, 242

HSL0, 0, 95

CMYK0, 0, 0, 5

Jet

RolesBg Dark, Text

HEX#1C1C1C

RGB28, 28, 28

HSL0, 0, 11

CMYK0, 0, 0, 89

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Charcoal", "hex": "#36454F", "role": "main", "cmyk": { "c": 32, "m": 13, "y": 0, "k": 69, "source": "colorfly" } }, { "name": "Crimson", "hex": "#DF134D", "role": "main", "cmyk": { "c": 0, "m": 91, "y": 65, "k": 13, "source": "colorfly" } }, { "name": "Gold", "hex": "#FFD700", "role": "main", "cmyk": { "c": 0, "m": 16, "y": 100, "k": 0, "source": "colorfly" } }, { "name": "Steel Blue", "hex": "#4A6FA5", "role": "support", "cmyk": { "c": 55, "m": 33, "y": 0, "k": 35, "source": "colorfly" } }, { "name": "Taupe", "hex": "#C4B7A6", "role": "support", "cmyk": { "c": 0, "m": 7, "y": 15, "k": 23, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Alabaster", "hex": "#F2F2F2", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 5, "source": "colorfly" } }, { "name": "Jet", "hex": "#1C1C1C", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 89, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-charcoal: #36454F; --color-crimson: #DF134D; --color-gold: #FFD700; --color-steel-blue: #4A6FA5; --color-taupe: #C4B7A6; --color-white: #FFFFFF; --color-alabaster: #F2F2F2; --color-jet: #1C1C1C; }

:root { --role-logo: #36454F; --role-link: #36454F; --role-btn-outlined-border: #36454F; --role-btn-outlined-text: #36454F; --role-btn-secondary-bg: #36454F; --role-btn-primary-bg: #DF134D; --role-headline: #DF134D; --role-icon: #4A6FA5; --role-border: #4A6FA5; --role-divider: #4A6FA5; --role-outline: #4A6FA5; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #1C1C1C; --role-text: #1C1C1C; }

{ "charcoal": "#36454F", "crimson": "#DF134D", "gold": "#FFD700", "steel-blue": "#4A6FA5", "taupe": "#C4B7A6", "white": "#FFFFFF", "alabaster": "#F2F2F2", "jet": "#1C1C1C" }

<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: #36454F; --gradient-partner: #90999E; --gradient-accent: #4A6FA5; --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: #36454F; --gradient-text-b: #90999E; --gradient-text-c: #4A6FA5; 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>