Crimson#C62828
Navy#1F4E79
White#FFFFFF
Steel Blue#2A6F97
Tan#B07A4A
Palette direction

Donald Trump Inspired Color Palette

This palette uses the candidate’s signature red, white, and blue language as the core identity system, then softens it with restrained support hues for digital clarity. The result feels immediately recognizable, energetic, and campaign-ready while still working across interface states and editorial layouts.

ComplementaryNonecampaignpolitical brandingpatrioticpresidential
palette-preview.example
None color direction

Donald Trump Inspired Color Palette

This palette uses the candidate’s signature red, white, and blue language as the core identity system, then softens it with restrained support hues for digital clarity. The result feels immediately recognizable, energetic, and campaign-ready while still working across interface states and editorial layouts.

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 White #FFFFFF18.9:1 Excellent
Logo White #FFFFFFon Navy #1F4E798.7:1 Excellent
Logo White #FFFFFFon Crimson #C628285.6:1 Strong
Logo Charcoal #111111on Cloud #D9E2EC14.4:1 Excellent
Icon color
BackgroundCrimson#C62828TextIvory#F8F5F0
Primary Button5.17:1
AA

Best for the main action users should notice first.

BackgroundNavy#1F4E79TextIvory#F8F5F0
Secondary Button7.97:1
AAA

Useful for softer choices and secondary paths.

BackgroundIvory#F8F5F0TextSteel Blue#2A6F97
Outlined Button5.06:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundIvory#F8F5F0TextNavy#1F4E79
Text Button7.97:1
AAA

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

Palette composition8 colorsComplementary color relationship
9:41Donald Trump Inspired Color Palette Color role balance
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.

CDonald Trump Inspired Color PaletteNone brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors pair a commanding campaign red with a deep presidential blue and a crisp white anchor, creating a system that feels unmistakable and highly legible. Together they read as patriotic, direct, and media-ready without relying on overly muted treatment.

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

Buttons

Primary Button
BackgroundCrimson #C62828
TextIvory #F8F5F0
Secondary Button
BackgroundNavy #1F4E79
TextIvory #F8F5F0
Outlined Button
BackgroundSteel Blue #2A6F97
TextSteel Blue #2A6F97

Interface

TextDefault readable body text.Charcoal #111111
Bg LightLight page or section background.Ivory #F8F5F0
Bg DarkDark page or section background.Charcoal #111111
IconSmall interface icons and marks.Steel Blue #2A6F97
BorderCards, inputs, and component borders.Tan #B07A4A
DividerSubtle separators between content.Tan #B07A4A
OutlineFocus rings and emphasis outlines.Tan #B07A4A

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 commanding campaign red with a deep presidential blue and a crisp white anchor, creating a system that feels unmistakable and highly legible. Together they read as patriotic, direct, and media-ready without relying on overly muted treatment.

PrimaryCrimson

RolesLogo, Btn Primary Bg

Crimson gives the palette immediate campaign energy and strong visual recall.

HEX#C62828
RGB198, 40, 40
HSL0, 66, 47
CMYK0, 80, 80, 22
PrimaryNavy

RolesLink, Btn Secondary Bg, Headline

Navy adds authority and keeps the identity grounded for headlines and secondary actions.

HEX#1F4E79
RGB31, 78, 121
HSL209, 59, 30
CMYK74, 36, 0, 53
TertiaryWhite

White delivers the cleanest contrast for the button system and preserves a crisp, high-impact presentation.

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0

Support Colors

The support colors extend the patriotic core with quieter tones that stabilize interfaces and add flexibility without competing with the main campaign colors. They stay subdued so the red, blue, and white remain the unmistakable focal point.

Steel Blue

RolesBtn Outlined Border, Btn Outlined Text, Icon

Steel Blue supports outlines and icons with a calmer blue note that reinforces the main navy.

HEX#2A6F97
RGB42, 111, 151
HSL202, 56, 38
CMYK72, 26, 0, 41
Tan

RolesBorder, Divider, Outline

Tan introduces a warm, restrained accent that balances the cooler red and blue without overpowering them.

HEX#B07A4A
RGB176, 122, 74
HSL28, 41, 49
CMYK0, 31, 58, 31

Neutral Colors

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

Ivory

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#F8F5F0
RGB248, 245, 240
HSL38, 36, 96
CMYK0, 1, 3, 3
Cloud
HEX#D9E2EC
RGB217, 226, 236
HSL212, 33, 89
CMYK8, 4, 0, 7
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: #C62828;
  --color-navy: #1F4E79;
  --color-white: #FFFFFF;
  --color-steel-blue: #2A6F97;
  --color-tan: #B07A4A;
  --color-ivory: #F8F5F0;
  --color-cloud: #D9E2EC;
  --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: #C62828;
  --role-btn-primary-bg: #C62828;
  --role-link: #1F4E79;
  --role-btn-secondary-bg: #1F4E79;
  --role-headline: #1F4E79;
  --role-btn-outlined-border: #2A6F97;
  --role-btn-outlined-text: #2A6F97;
  --role-icon: #2A6F97;
  --role-border: #B07A4A;
  --role-divider: #B07A4A;
  --role-outline: #B07A4A;
  --role-bg-light: #F8F5F0;
  --role-btn-primary-text: #F8F5F0;
  --role-btn-secondary-text: #F8F5F0;
  --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": "#C62828",
    "navy": "#1F4E79",
    "white": "#FFFFFF",
    "steel-blue": "#2A6F97",
    "tan": "#B07A4A",
    "ivory": "#F8F5F0",
    "cloud": "#D9E2EC",
    "charcoal": "#111111"
}
Press Space to load new palette