Crimson#D62828
Navy#1E4E8C
Gold#FFCC00
Brick#8C3B3B
Steel Blue#5D728C
Palette direction

Superman Inspired Heroic Color Palette

This palette channels Superman-inspired energy through bold primary colors and a bright, hopeful accent system. The reds and blues create instant hero recognition, while a clean gold support note adds a classic emblematic finish without competing with the core identity.

Split ComplementaryCreativesuperman-inspiredsuperherocomicsheroic
palette-preview.example
Creative color direction

Superman Inspired Heroic Color Palette

This palette channels Superman-inspired energy through bold primary colors and a bright, hopeful accent system. The reds and blues create instant hero recognition, while a clean gold support note adds a classic emblematic finish without competing with the core identity.

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 Charcoal #111111on Gold #FFCC0012.5:1 Excellent
Logo White #FFFFFFon Navy #1E4E8C8.3:1 Excellent
Logo White #FFFFFFon Crimson #D628285.0:1 Strong
Logo Charcoal #111111on White #FFFFFF18.9:1 Excellent
Icon color
BackgroundCrimson#D62828TextWhite#FFFFFF
Primary Button5.01:1
AA

Best for the main action users should notice first.

BackgroundNavy#1E4E8CTextWhite#FFFFFF
Secondary Button8.32:1
AAA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextGold#FFCC00
Outlined Button1.51:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextNavy#1E4E8C
Text Button8.32:1
AAA

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

Palette composition8 colorsSplit Complementary color relationship
9:41Superman Inspired Heroic Color Palette Color role balance
Split Complementary 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.

CSuperman Inspired Heroic Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors pair iconic red and blue for instant superhero recognition, creating a high-energy contrast that feels bold, familiar, and unmistakably heroic. Together they form a classic emblematic system that works across branding, covers, and digital interfaces.

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 #D62828
HeadlineUsed for main titles and key messages.Navy #1E4E8C
LinkUsed for links and interactive text.Navy #1E4E8C

Buttons

Primary Button
BackgroundCrimson #D62828
TextWhite #FFFFFF
Secondary Button
BackgroundNavy #1E4E8C
TextWhite #FFFFFF
Outlined Button
BackgroundCrimson #D62828
TextGold #FFCC00

Interface

TextDefault readable body text.Charcoal #111111
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Charcoal #111111
IconSmall interface icons and marks.Brick #8C3B3B
BorderCards, inputs, and component borders.Steel Blue #5D728C
DividerSubtle separators between content.Steel Blue #5D728C
OutlineFocus rings and emphasis outlines.Steel Blue #5D728C

Palette Colors

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

Main (Brand) Colors

The main colors pair iconic red and blue for instant superhero recognition, creating a high-energy contrast that feels bold, familiar, and unmistakably heroic. Together they form a classic emblematic system that works across branding, covers, and digital interfaces.

PrimaryCrimson

RolesLogo, Btn Primary Bg, Btn Outlined Border

Crimson delivers the fiery, action-driven center of the brand and gives the palette its most powerful visual punch.

HEX#D62828
RGB214, 40, 40
HSL0, 69, 50
CMYK0, 81, 81, 16
PrimaryNavy

RolesLink, Headline, Btn Secondary Bg

Navy adds trust, structure, and the cool heroic contrast needed to balance the vivid red.

HEX#1E4E8C
RGB30, 78, 140
HSL214, 65, 33
CMYK79, 44, 0, 45
SecondaryGold

RolesBtn Outlined Text

Gold introduces a classic emblem-like highlight that lifts the system with an iconic comic-book sheen.

HEX#FFCC00
RGB255, 204, 0
HSL48, 100, 50
CMYK0, 20, 100, 0

Support Colors

The support colors extend the superhero theme with subdued, usable accents that reinforce the main red-blue relationship without stealing focus. They add warmth, depth, and clarity for supporting UI moments and illustrative details.

Brick

RolesIcon

Brick softens the intensity of the main red while keeping the palette grounded and masculine.

HEX#8C3B3B
RGB140, 59, 59
HSL0, 41, 39
CMYK0, 58, 58, 45
Steel Blue

RolesBorder, Divider, Outline

Steel Blue bridges red and navy with a quiet metallic note that keeps interface lines crisp and controlled.

HEX#5D728C
RGB93, 114, 140
HSL213, 20, 46
CMYK34, 19, 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
Ivory
HEX#F3F5F7
RGB243, 245, 247
HSL210, 20, 96
CMYK2, 1, 0, 3
Charcoal

RolesBg Dark, Text

HEX#111111
RGB17, 17, 17
HSL0, 0, 7
CMYK0, 0, 0, 93

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: #D62828;
  --color-navy: #1E4E8C;
  --color-gold: #FFCC00;
  --color-brick: #8C3B3B;
  --color-steel-blue: #5D728C;
  --color-white: #FFFFFF;
  --color-ivory: #F3F5F7;
  --color-charcoal: #111111;
}

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: #D62828;
  --role-btn-primary-bg: #D62828;
  --role-btn-outlined-border: #D62828;
  --role-link: #1E4E8C;
  --role-headline: #1E4E8C;
  --role-btn-secondary-bg: #1E4E8C;
  --role-btn-outlined-text: #FFCC00;
  --role-icon: #8C3B3B;
  --role-border: #5D728C;
  --role-divider: #5D728C;
  --role-outline: #5D728C;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #111111;
  --role-text: #111111;
}

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": "#D62828",
    "navy": "#1E4E8C",
    "gold": "#FFCC00",
    "brick": "#8C3B3B",
    "steel-blue": "#5D728C",
    "white": "#FFFFFF",
    "ivory": "#F3F5F7",
    "charcoal": "#111111"
}
Press Space to load new palette