Crimson#6B0A0A
Black#000000
Muted Gold#B08B4F
Warm Taupe#A78F72
Soft Gray#8C8C8C
Palette direction

Crimson Black Gold Color Palette

This palette draws from the rich, dark red and black tones of the image, offering a bold and sophisticated system suitable for dynamic and commanding brand identities. The main colors feature a deep crimson, a classic black, and a muted gold, providing strong recognition and versatile applications. Supporting colors include subtle warm taupes and soft grays that complement the intensity of the main colors while maintaining visual balance. Neutrals offer a solid white, a near-white cream, and a very dark charcoal to ensure strong accessibility and contrast across designs.

AnalogousFashion Beautycrimsonblackgoldsports
palette-preview.example
Fashion Beauty color direction

Crimson Black Gold Color Palette

This palette draws from the rich, dark red and black tones of the image, offering a bold and sophisticated system suitable for dynamic and commanding brand identities. The main colors feature a deep crimson, a classic black, and a muted gold, providing strong recognition and versatile applications. Supporting colors include subtle warm taupes and soft grays that complement the intensity of the main colors while maintaining visual balance. Neutrals offer a solid white, a near-white cream, and a very dark charcoal to ensure strong accessibility and contrast across designs.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo White #FFFFFFon Black #00000021.0:1 Excellent
Logo Black #000000on Muted Gold #B08B4F6.7:1 Strong
Logo Black #000000on White #FFFFFF21.0:1 Excellent
Logo Black #000000on Warm Taupe #A78F726.8:1 Strong
Icon color
BackgroundCrimson#6B0A0ATextWhite#FFFFFF
Primary Button12.55:1
AAA

Best for the main action users should notice first.

BackgroundMuted Gold#B08B4FTextCharcoal#222222
Secondary Button5.04:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextSoft Gray#8C8C8C
Outlined Button3.36:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextCrimson#6B0A0A
Text Button12.55:1
AAA

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsAnalogous color relationship
9:41Crimson Black Gold Color Palette Color role balance
Analogous system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CCrimson Black Gold Color PaletteFashion Beauty brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors unify a powerful deep crimson, neutral black, and warm muted gold, creating a striking triadic composition that ensures strong brand recognition and dynamic visual interest.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Crimson #6B0A0A
HeadlineUsed for main titles and key messages.Muted Gold #B08B4F
LinkUsed for links and interactive text.Crimson #6B0A0A

Buttons

Primary Button
BackgroundCrimson #6B0A0A
TextWhite #FFFFFF
Secondary Button
BackgroundMuted Gold #B08B4F
TextCharcoal #222222
Outlined Button
BackgroundMuted Gold #B08B4F
TextSoft Gray #8C8C8C

Interface

TextDefault readable body text.Charcoal #222222
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Black #000000
IconSmall interface icons and marks.Warm Taupe #A78F72
BorderCards, inputs, and component borders.Warm Taupe #A78F72
DividerSubtle separators between content.Warm Taupe #A78F72
OutlineFocus rings and emphasis outlines.Soft Gray #8C8C8C

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

The main colors unify a powerful deep crimson, neutral black, and warm muted gold, creating a striking triadic composition that ensures strong brand recognition and dynamic visual interest.

PrimaryCrimson

RolesLogo, Link, Btn Primary Bg

Crimson evokes passion, energy, and boldness, anchoring the brand's dynamic spirit.

HEX#6B0A0A
RGB107, 10, 10
HSL0, 83, 23
CMYK0, 91, 91, 58
PrimaryBlack

RolesBg Dark

Black provides strength, sophistication, and excellent contrast for readability.

HEX#000000
RGB0, 0, 0
HSL0, 0, 0
CMYK0, 0, 0, 100
PrimaryMuted Gold

RolesBtn Secondary Bg, Headline, Btn Outlined Border

Muted Gold adds warmth and a refined touch, balancing the palette with elegance.

HEX#B08B4F
RGB176, 139, 79
HSL37, 38, 50
CMYK0, 21, 55, 31

Support Colors

Supporting accents introduce warm taupe and gentle gray tones that enhance usability and balance without drawing attention from the main colors.

Warm Taupe

RolesIcon, Border, Divider

Warm Taupe complements the gold and crimson, softening the overall palette with subtle earthiness.

HEX#A78F72
RGB167, 143, 114
HSL33, 23, 55
CMYK0, 14, 32, 35
Soft Gray

RolesOutline, Btn Outlined Text

Soft Gray balances the intensity of dark tones, providing neutral accents for interface elements.

HEX#8C8C8C
RGB140, 140, 140
HSL0, 0, 55
CMYK0, 0, 0, 45

Neutral Colors

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

White

RolesBg Light, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Cream
HEX#F5F5F5
RGB245, 245, 245
HSL0, 0, 96
CMYK0, 0, 0, 4
Charcoal

RolesText, Btn Secondary Text

HEX#222222
RGB34, 34, 34
HSL0, 0, 13
CMYK0, 0, 0, 87

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.

Use when: you need the actual colors.
:root {
  --color-crimson: #6B0A0A;
  --color-black: #000000;
  --color-muted-gold: #B08B4F;
  --color-warm-taupe: #A78F72;
  --color-soft-gray: #8C8C8C;
  --color-white: #FFFFFF;
  --color-cream: #F5F5F5;
  --color-charcoal: #222222;
}

Role tokens

Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.

Use when: you need UI roles, not just swatches.
:root {
  --role-logo: #6B0A0A;
  --role-link: #6B0A0A;
  --role-btn-primary-bg: #6B0A0A;
  --role-bg-dark: #000000;
  --role-btn-secondary-bg: #B08B4F;
  --role-headline: #B08B4F;
  --role-btn-outlined-border: #B08B4F;
  --role-icon: #A78F72;
  --role-border: #A78F72;
  --role-divider: #A78F72;
  --role-outline: #8C8C8C;
  --role-btn-outlined-text: #8C8C8C;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-text: #222222;
  --role-btn-secondary-text: #222222;
}

JSON

Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.

Use when: a developer or app needs data.
{
    "crimson": "#6B0A0A",
    "black": "#000000",
    "muted-gold": "#B08B4F",
    "warm-taupe": "#A78F72",
    "soft-gray": "#8C8C8C",
    "white": "#FFFFFF",
    "cream": "#F5F5F5",
    "charcoal": "#222222"
}
Press Space to load new palette