Crimson#8B0000
Golden Orange#D97706
Charcoal#2B2B2B
Burnt Sienna#7A3E00
Warm Brown#A9744E
Palette direction

Crimson Gold Charcoal Color Palette

This palette is inspired by the rich, dramatic reds and deep contrasting shadows from the image, perfect for a fashion or luxury brand seeking a bold yet elegant identity. The main colors harmonize vivid red and complementary golden-orange with a deep charcoal black to embody passion, warmth, and sophistication. Support colors echo more muted shadows and warmer tones to balance without overpowering. Neutrals offer clean contrast and grounding for versatile use.

AnalogousFashion Beautycrimsongoldcharcoaldramatic
palette-preview.example
Fashion Beauty color direction

Crimson Gold Charcoal Color Palette

This palette is inspired by the rich, dramatic reds and deep contrasting shadows from the image, perfect for a fashion or luxury brand seeking a bold yet elegant identity. The main colors harmonize vivid red and complementary golden-orange with a deep charcoal black to embody passion, warmth, and sophistication. Support colors echo more muted shadows and warmer tones to balance without overpowering. Neutrals offer clean contrast and grounding for versatile use.

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 Pure White #FFFFFFon Charcoal #2B2B2B14.2:1 Excellent
Logo Raven Black #1A1A1Aon Golden Orange #D977065.5:1 Strong
Logo Raven Black #1A1A1Aon Pure White #FFFFFF17.4:1 Excellent
Icon color
BackgroundCrimson#8B0000TextPure White#FFFFFF
Primary Button10.01:1
AAA

Best for the main action users should notice first.

BackgroundGolden Orange#D97706TextRaven Black#1A1A1A
Secondary Button5.46:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextGolden Orange#D97706
Outlined Button3.19:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextCrimson#8B0000
Text Button10.01:1
AAA

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

Palette composition8 colorsAnalogous color relationship
9:41Crimson Gold Charcoal 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 Gold Charcoal Color PaletteFashion Beauty brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine the passionate intensity of crimson, the warm vibrancy of golden orange, and the grounding depth of charcoal black to create a bold, memorable palette for dramatic and luxurious brand identities.

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 #8B0000
HeadlineUsed for main titles and key messages.Golden Orange #D97706
LinkUsed for links and interactive text.Crimson #8B0000

Buttons

Primary Button
BackgroundCrimson #8B0000
TextPure White #FFFFFF
Secondary Button
BackgroundGolden Orange #D97706
TextRaven Black #1A1A1A
Outlined Button
BackgroundCrimson #8B0000
TextGolden Orange #D97706

Interface

TextDefault readable body text.Raven Black #1A1A1A
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Charcoal #2B2B2B
IconSmall interface icons and marks.Burnt Sienna #7A3E00
BorderCards, inputs, and component borders.Burnt Sienna #7A3E00
DividerSubtle separators between content.Burnt Sienna #7A3E00
OutlineFocus rings and emphasis outlines.Burnt Sienna #7A3E00

Palette Colors

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

Main (Brand) Colors

The main colors combine the passionate intensity of crimson, the warm vibrancy of golden orange, and the grounding depth of charcoal black to create a bold, memorable palette for dramatic and luxurious brand identities.

PrimaryCrimson

RolesLogo, Btn Primary Bg, Btn Outlined Border, Link

Crimson delivers intense passion and energy, establishing a confident and alluring visual anchor.

HEX#8B0000
RGB139, 0, 0
HSL0, 100, 27
CMYK0, 100, 100, 45
SecondaryGolden Orange

RolesBtn Secondary Bg, Btn Outlined Text, Headline

Golden Orange adds warmth and vibrancy, energizing the palette with a radiant, inviting quality.

HEX#D97706
RGB217, 119, 6
HSL32, 95, 44
CMYK0, 45, 97, 15
TertiaryCharcoal

RolesBg Dark

Charcoal offers depth and sophistication, grounding the palette with a dramatic yet neutral balance.

HEX#2B2B2B
RGB43, 43, 43
HSL0, 0, 17
CMYK0, 0, 0, 83

Support Colors

The support colors extend the palette with muted warm browns and softer burnt sienna that complement the bold main colors by adding subtle shadow and warmth for secondary elements, icons, and borders.

Burnt Sienna

RolesIcon, Border, Divider, Outline

Burnt Sienna gently complements the Crimson and Golden Orange with deep, muted warmth to support without overtaking.

HEX#7A3E00
RGB122, 62, 0
HSL30, 100, 24
CMYK0, 49, 100, 52
Warm Brown

Warm Brown balances the intensity by providing a grounded, earthy tone that softly contrasts the main colors.

HEX#A9744E
RGB169, 116, 78
HSL25, 37, 48
CMYK0, 31, 54, 34

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory
HEX#F5F5F5
RGB245, 245, 245
HSL0, 0, 96
CMYK0, 0, 0, 4
Raven Black

RolesText, Btn Secondary Text

HEX#1A1A1A
RGB26, 26, 26
HSL0, 0, 10
CMYK0, 0, 0, 90

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: #8B0000;
  --color-golden-orange: #D97706;
  --color-charcoal: #2B2B2B;
  --color-burnt-sienna: #7A3E00;
  --color-warm-brown: #A9744E;
  --color-pure-white: #FFFFFF;
  --color-ivory: #F5F5F5;
  --color-raven-black: #1A1A1A;
}

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: #8B0000;
  --role-btn-primary-bg: #8B0000;
  --role-btn-outlined-border: #8B0000;
  --role-link: #8B0000;
  --role-btn-secondary-bg: #D97706;
  --role-btn-outlined-text: #D97706;
  --role-headline: #D97706;
  --role-bg-dark: #2B2B2B;
  --role-icon: #7A3E00;
  --role-border: #7A3E00;
  --role-divider: #7A3E00;
  --role-outline: #7A3E00;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-text: #1A1A1A;
  --role-btn-secondary-text: #1A1A1A;
}

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": "#8B0000",
    "golden-orange": "#D97706",
    "charcoal": "#2B2B2B",
    "burnt-sienna": "#7A3E00",
    "warm-brown": "#A9744E",
    "pure-white": "#FFFFFF",
    "ivory": "#F5F5F5",
    "raven-black": "#1A1A1A"
}
Press Space to load new palette