Crimson#DC143C
Charcoal#36454F
Navy#0B2545
Dark Slate#273746
Steel Blue#4682B4
Palette direction

Crimson Charcoal Navy Color Palette

This palette combines a bold Crimson, a commanding Charcoal, and a deep Navy to evoke strength and aggression fitting for a competitive, battle-inspired brand identity. The supporting Dark Slate and Steel Blue soften and balance the palette by adding depth without undermining the assertive main colors. The elegant neutrals Ivory, Sand, and Charcoal Ground the visuals with high contrast, ensuring readability and usability across digital interfaces.

CustomNonecrimsoncharcoalnavybold
palette-preview.example
None color direction

Crimson Charcoal Navy Color Palette

This palette combines a bold Crimson, a commanding Charcoal, and a deep Navy to evoke strength and aggression fitting for a competitive, battle-inspired brand identity. The supporting Dark Slate and Steel Blue soften and balance the palette by adding depth without undermining the assertive main colors. The elegant neutrals Ivory, Sand, and Charcoal Ground the visuals with high contrast, ensuring readability and usability across digital interfaces.

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 Ivory #FFFFF0on Navy #0B254515.3:1 Excellent
Logo Ivory #FFFFF0on Crimson #DC143C4.9:1 Strong
Logo Navy #0B2545on Ivory #FFFFF015.3:1 Excellent
Logo Navy #0B2545on Sand #F5DEB311.7:1 Excellent
Icon color
BackgroundCrimson#DC143CTextIvory#FFFFF0
Primary Button4.95:1
AA

Best for the main action users should notice first.

BackgroundCharcoal#36454FTextIvory#FFFFF0
Secondary Button9.81:1
AAA

Useful for softer choices and secondary paths.

BackgroundIvory#FFFFF0TextCrimson#DC143C
Outlined Button4.95:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundIvory#FFFFF0TextCrimson#DC143C
Text Button4.95:1
AA

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

Palette composition8 colorsCustom color relationship
9:41Crimson Charcoal Navy Color Palette Color role balance
Custom 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 Charcoal Navy Color PaletteNone brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors form a complementary scheme combining a vivid Crimson and a deep Navy with a grounded Charcoal, creating a visually powerful and balanced system that embodies strength and determination.

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 #DC143C
HeadlineUsed for main titles and key messages.Charcoal #36454F
LinkUsed for links and interactive text.Crimson #DC143C

Buttons

Primary Button
BackgroundCrimson #DC143C
TextIvory #FFFFF0
Secondary Button
BackgroundCharcoal #36454F
TextIvory #FFFFF0
Outlined Button
BackgroundCrimson #DC143C
TextCrimson #DC143C

Interface

TextDefault readable body text.Charcoal #2F2F2F
Bg LightLight page or section background.Ivory #FFFFF0
Bg DarkDark page or section background.Sand #F5DEB3
IconSmall interface icons and marks.Dark Slate #273746
BorderCards, inputs, and component borders.Dark Slate #273746
DividerSubtle separators between content.Dark Slate #273746
OutlineFocus rings and emphasis outlines.Dark Slate #273746

Palette Colors

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

Main (Brand) Colors

The main colors form a complementary scheme combining a vivid Crimson and a deep Navy with a grounded Charcoal, creating a visually powerful and balanced system that embodies strength and determination.

PrimaryCrimson

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

Crimson embodies passion and aggression, serving as a strong and energetic anchor for the brand's identity.

HEX#DC143C
RGB220, 20, 60
HSL348, 83, 47
CMYK0, 91, 73, 14
SecondaryCharcoal

RolesHeadline, Btn Secondary Bg

Charcoal represents seriousness and stability, grounding the palette with depth and professionalism.

HEX#36454F
RGB54, 69, 79
HSL204, 19, 26
CMYK32, 13, 0, 69
TertiaryNavy

Navy adds authority and trustworthiness, balancing Crimson with a cool, steadfast presence.

HEX#0B2545
RGB11, 37, 69
HSL213, 73, 16
CMYK84, 46, 0, 73

Support Colors

Support colors extend the main palette with muted, cool shades that complement the assertive main colors without dominating, ensuring visual coherence and usability.

Dark Slate

RolesIcon, Border, Divider, Outline

Dark Slate subtly supports the main colors by echoing the depth of Navy and Charcoal, enhancing interface elements with quiet strength.

HEX#273746
RGB39, 55, 70
HSL209, 28, 21
CMYK44, 21, 0, 73
Steel Blue

Steel Blue provides a cooler accent that eases visual tension and harmonizes the intensity of Crimson and Navy.

HEX#4682B4
RGB70, 130, 180
HSL207, 44, 49
CMYK61, 28, 0, 29

Neutral Colors

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

Ivory

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFF0
RGB255, 255, 240
HSL60, 100, 97
CMYK0, 0, 6, 0
Sand

RolesBg Dark

HEX#F5DEB3
RGB245, 222, 179
HSL39, 77, 83
CMYK0, 9, 27, 4
Charcoal

RolesText

HEX#2F2F2F
RGB47, 47, 47
HSL0, 0, 18
CMYK0, 0, 0, 82

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: #DC143C;
  --color-charcoal: #2F2F2F;
  --color-navy: #0B2545;
  --color-dark-slate: #273746;
  --color-steel-blue: #4682B4;
  --color-ivory: #FFFFF0;
  --color-sand: #F5DEB3;
}

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: #DC143C;
  --role-link: #DC143C;
  --role-btn-primary-bg: #DC143C;
  --role-btn-outlined-border: #DC143C;
  --role-btn-outlined-text: #DC143C;
  --role-headline: #36454F;
  --role-btn-secondary-bg: #36454F;
  --role-icon: #273746;
  --role-border: #273746;
  --role-divider: #273746;
  --role-outline: #273746;
  --role-bg-light: #FFFFF0;
  --role-btn-primary-text: #FFFFF0;
  --role-btn-secondary-text: #FFFFF0;
  --role-bg-dark: #F5DEB3;
  --role-text: #2F2F2F;
}

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": "#DC143C",
    "charcoal": "#2F2F2F",
    "navy": "#0B2545",
    "dark-slate": "#273746",
    "steel-blue": "#4682B4",
    "ivory": "#FFFFF0",
    "sand": "#F5DEB3"
}
Press Space to load new palette