Crimson#C1121F
Gold#D4A017
Midnight Navy#0D1B2A
Burgundy#8C3B2A
Slate#58667A
Palette direction

Apex Movie Inspired Color Palette

This palette channels APEX movie energy through a tight red, gold, and deep slate system that feels cinematic, urgent, and premium. The neutrals keep the interface readable while the accents echo theatrical poster lighting and high-stakes action.

Split ComplementaryCreativeapexmovie-inspiredcinematicaction
palette-preview.example
Creative color direction

Apex Movie Inspired Color Palette

This palette channels APEX movie energy through a tight red, gold, and deep slate system that feels cinematic, urgent, and premium. The neutrals keep the interface readable while the accents echo theatrical poster lighting and high-stakes action.

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 Midnight Navy #0D1B2A17.4:1 Excellent
Logo Black #111111on Gold #D4A0177.9:1 Excellent
Logo Black #111111on White #FFFFFF18.9:1 Excellent
Logo White #FFFFFFon Slate #58667A5.8:1 Strong
Icon color
BackgroundCrimson#C1121FTextWhite#FFFFFF
Primary Button6.22:1
AA

Best for the main action users should notice first.

BackgroundGold#D4A017TextBlack#111111
Secondary Button7.95:1
AAA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextMidnight Navy#0D1B2A
Outlined Button17.39:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextGold#D4A017
Text Button2.38:1
Low

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

Palette composition8 colorsSplit Complementary color relationship
9:41Apex Movie Inspired 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.

CApex Movie Inspired Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors pair a charged crimson with a rich gold and a deep navy-black anchor, creating a cinematic contrast that feels both heroic and tense. Together they read like a premium action poster system with strong recognition and clear hierarchy.

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 #C1121F
HeadlineUsed for main titles and key messages.Midnight Navy #0D1B2A
LinkUsed for links and interactive text.Gold #D4A017

Buttons

Primary Button
BackgroundCrimson #C1121F
TextWhite #FFFFFF
Secondary Button
BackgroundGold #D4A017
TextBlack #111111
Outlined Button
BackgroundGold #D4A017
TextMidnight Navy #0D1B2A

Interface

TextDefault readable body text.Black #111111
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Black #111111
IconSmall interface icons and marks.Burgundy #8C3B2A
BorderCards, inputs, and component borders.Slate #58667A
DividerSubtle separators between content.Slate #58667A
OutlineFocus rings and emphasis outlines.Slate #58667A

Palette Colors

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

Main (Brand) Colors

The main colors pair a charged crimson with a rich gold and a deep navy-black anchor, creating a cinematic contrast that feels both heroic and tense. Together they read like a premium action poster system with strong recognition and clear hierarchy.

PrimaryCrimson

RolesLogo, Btn Primary Bg

Crimson delivers the intensity and urgency of an action-led APEX identity.

HEX#C1121F
RGB193, 18, 31
HSL356, 83, 41
CMYK0, 91, 84, 24
SecondaryGold

RolesLink, Btn Secondary Bg, Btn Outlined Border

Gold adds a theatrical, trophy-like signal that keeps the palette feeling elevated and cinematic.

HEX#D4A017
RGB212, 160, 23
HSL43, 80, 46
CMYK0, 25, 89, 17
TertiaryMidnight Navy

RolesHeadline, Btn Outlined Text

Midnight Navy provides the dark dramatic weight that makes the brighter accents feel sharper.

HEX#0D1B2A
RGB13, 27, 42
HSL211, 53, 11
CMYK69, 36, 0, 84

Support Colors

The support colors extend the cinematic look with restrained warmth and cool shadow, helping the main palette feel layered without competing for attention. They add flexibility for UI accents, motion graphics, and supporting brand elements.

Burgundy

RolesIcon

Burgundy softens the red energy and gives secondary UI elements a more grounded, film-poster tone.

HEX#8C3B2A
RGB140, 59, 42
HSL10, 54, 36
CMYK0, 58, 70, 45
Slate

RolesBorder, Divider, Outline

Slate balances the palette with a cool structural neutral that supports interfaces without stealing focus.

HEX#58667A
RGB88, 102, 122
HSL215, 16, 41
CMYK28, 16, 0, 52

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
Ivory
HEX#F3F0E8
RGB243, 240, 232
HSL44, 31, 93
CMYK0, 1, 5, 5
Black

RolesBg Dark, Text, Btn Secondary 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: #C1121F;
  --color-gold: #D4A017;
  --color-midnight-navy: #0D1B2A;
  --color-burgundy: #8C3B2A;
  --color-slate: #58667A;
  --color-white: #FFFFFF;
  --color-ivory: #F3F0E8;
  --color-black: #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: #C1121F;
  --role-btn-primary-bg: #C1121F;
  --role-link: #D4A017;
  --role-btn-secondary-bg: #D4A017;
  --role-btn-outlined-border: #D4A017;
  --role-headline: #0D1B2A;
  --role-btn-outlined-text: #0D1B2A;
  --role-icon: #8C3B2A;
  --role-border: #58667A;
  --role-divider: #58667A;
  --role-outline: #58667A;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #111111;
  --role-text: #111111;
  --role-btn-secondary-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": "#C1121F",
    "gold": "#D4A017",
    "midnight-navy": "#0D1B2A",
    "burgundy": "#8C3B2A",
    "slate": "#58667A",
    "white": "#FFFFFF",
    "ivory": "#F3F0E8",
    "black": "#111111"
}
Press Space to load new palette