Burgundy Navy Mustard Color Palette for Elegant Branding

Burgundy Navy Mustard Color Palette

This color palette is inspired by the image's muted and sophisticated tones, combining rich burgundy, deep navy, and warm mustard with supporting dusty teal and steel gray. The neutrals provide a balanced backdrop with pure white, soft off-white, and charcoal black, creating a versatile yet elegant color system suitable for distinctive branding and user interfaces.

Split ComplementaryFashion Beautyburgundynavymustardteal

Main (Brand) Colors

The main colors blend a warm burgundy with a complementary navy and a warm mustard accent, creating a balanced and recognizable system that is both rich and approachable.

PrimaryBurgundy

RolesLogo, Btn Primary Bg, Btn Outlined Border

Burgundy brings a sense of richness, warmth, and sophistication to the brand identity.

HEX#7C2836

RGB124, 40, 54

HSL350, 51, 32

CMYK0, 68, 56, 51

SecondaryNavy

RolesLink, Btn Secondary Bg, Headline

Navy offers depth, trustworthiness, and professionalism, contrasting well with burgundy.

HEX#314162

RGB49, 65, 98

HSL220, 33, 29

CMYK50, 34, 0, 62

TertiaryMustard

RolesBtn Outlined Text

Mustard provides a warm accent that adds energy and distinctiveness without overwhelming.

HEX#D6A142

RGB214, 161, 66

HSL39, 64, 55

CMYK0, 25, 69, 16

Support Colors

The support colors extend the main palette with muted teal and steel gray, which balance and complement the vibrant main hues while remaining visually subordinate.

Dusty Teal

RolesIcon, Border, Divider, Outline

Dusty Teal complements the warm burgundy and mustard by introducing a calming, cool tone that supports visual balance.

HEX#557D7E

RGB85, 125, 126

HSL181, 19, 41

CMYK33, 1, 0, 51

Steel Gray

Steel Gray adds a neutral, urban sophistication that tempers the brightness of mustard and softens the palette overall.

HEX#7A828D

RGB122, 130, 141

HSL215, 8, 52

CMYK13, 8, 0, 45

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

Off White

RolesBg Dark

HEX#F5F4F2

RGB245, 244, 242

HSL40, 13, 95

CMYK0, 0, 1, 4

Charcoal Black

RolesText

HEX#1E1E1E

RGB30, 30, 30

HSL0, 0, 12

CMYK0, 0, 0, 88

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Burgundy", "hex": "#7C2836", "role": "main", "cmyk": { "c": 0, "m": 68, "y": 56, "k": 51, "source": "colorfly" } }, { "name": "Navy", "hex": "#314162", "role": "main", "cmyk": { "c": 50, "m": 34, "y": 0, "k": 62, "source": "colorfly" } }, { "name": "Mustard", "hex": "#D6A142", "role": "main", "cmyk": { "c": 0, "m": 25, "y": 69, "k": 16, "source": "colorfly" } }, { "name": "Dusty Teal", "hex": "#557D7E", "role": "support", "cmyk": { "c": 33, "m": 1, "y": 0, "k": 51, "source": "colorfly" } }, { "name": "Steel Gray", "hex": "#7A828D", "role": "support", "cmyk": { "c": 13, "m": 8, "y": 0, "k": 45, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Off White", "hex": "#F5F4F2", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 1, "k": 4, "source": "colorfly" } }, { "name": "Charcoal Black", "hex": "#1E1E1E", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 88, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-burgundy: #7C2836; --color-navy: #314162; --color-mustard: #D6A142; --color-dusty-teal: #557D7E; --color-steel-gray: #7A828D; --color-white: #FFFFFF; --color-off-white: #F5F4F2; --color-charcoal-black: #1E1E1E; }

:root { --role-logo: #7C2836; --role-btn-primary-bg: #7C2836; --role-btn-outlined-border: #7C2836; --role-link: #314162; --role-btn-secondary-bg: #314162; --role-headline: #314162; --role-btn-outlined-text: #D6A142; --role-icon: #557D7E; --role-border: #557D7E; --role-divider: #557D7E; --role-outline: #557D7E; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #F5F4F2; --role-text: #1E1E1E; }

{ "burgundy": "#7C2836", "navy": "#314162", "mustard": "#D6A142", "dusty-teal": "#557D7E", "steel-gray": "#7A828D", "white": "#FFFFFF", "off-white": "#F5F4F2", "charcoal-black": "#1E1E1E" }

<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: #7C2836; --gradient-partner: #B78990; --gradient-accent: #557D7E; --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: #7C2836; --gradient-text-b: #B78990; --gradient-text-c: #557D7E; 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>