Crimson#D72631
Prussian Blue#023047
Mustard Yellow#FFB703
Slate Gray#707070
Palette direction

Vibrant Red Blue Color Palette

This palette uses vibrant reds and deep blues inspired by the image's bold textual elements, complemented by warm yellows and neutral grays to create a balanced, professional, and engaging brand identity. The main colors provide strong recognition and energy, while the support colors add subtle depth and balance. The neutrals ensure clear readability and clean backgrounds.

ComplementaryNoneredblueyellowpolitical
palette-preview.example
None color direction

Vibrant Red Blue Color Palette

This palette uses vibrant reds and deep blues inspired by the image's bold textual elements, complemented by warm yellows and neutral grays to create a balanced, professional, and engaging brand identity. The main colors provide strong recognition and energy, while the support colors add subtle depth and balance. The neutrals ensure clear readability and clean backgrounds.

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 Prussian Blue #02304713.8:1 Excellent
Logo White #FFFFFFon Crimson #D726315.0:1 Strong
Logo Charcoal #1A1A1Aon White #FFFFFF17.4:1 Excellent
Logo Charcoal #1A1A1Aon Mustard Yellow #FFB70310.0:1 Excellent
Icon color
BackgroundCrimson#D72631TextWhite#FFFFFF
Primary Button4.99:1
AA

Best for the main action users should notice first.

BackgroundPrussian Blue#023047TextWhite#FFFFFF
Secondary Button13.85:1
AAA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextPrussian Blue#023047
Outlined Button13.85:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextCrimson#D72631
Text Button4.99:1
AA

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

Palette composition7 colorsComplementary color relationship
9:41Vibrant Red Blue 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.

CVibrant Red Blue Color PaletteNone brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine vibrant red and deep blue to create a recognizable and energetic contrast that captures attention effectively, embodying strength and trust simultaneously.

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 #D72631
HeadlineUsed for main titles and key messages.Prussian Blue #023047
LinkUsed for links and interactive text.Crimson #D72631

Buttons

Primary Button
BackgroundCrimson #D72631
TextWhite #FFFFFF
Secondary Button
BackgroundPrussian Blue #023047
TextWhite #FFFFFF
Outlined Button
BackgroundPrussian Blue #023047
TextPrussian Blue #023047

Interface

TextDefault readable body text.Charcoal #1A1A1A
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ivory #F0F0F0
IconSmall interface icons and marks.Mustard Yellow #FFB703
BorderCards, inputs, and component borders.Mustard Yellow #FFB703
DividerSubtle separators between content.Mustard Yellow #FFB703
OutlineFocus rings and emphasis outlines.Mustard Yellow #FFB703

Palette Colors

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

Main (Brand) Colors

The main colors combine vibrant red and deep blue to create a recognizable and energetic contrast that captures attention effectively, embodying strength and trust simultaneously.

PrimaryCrimson

RolesLogo, Btn Primary Bg, Link

Crimson brings energy and urgency, making it ideal for calls to action and highlighting key brand elements.

HEX#D72631
RGB215, 38, 49
HSL356, 70, 50
CMYK0, 82, 77, 16
SecondaryPrussian Blue

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text, Headline

Prussian Blue adds stability and trust, balancing the intensity of Crimson with a professional, calming presence.

HEX#023047
RGB2, 48, 71
HSL200, 95, 14
CMYK97, 32, 0, 72

Support Colors

The support colors extend the main palette with warm mustard for vibrancy and slate gray for subtle balance, reinforcing the brand without overpowering the primary colors.

Mustard Yellow

RolesBorder, Divider, Icon, Outline

Mustard Yellow provides warmth and optimism, highlighting details and accentuating the palette's vibrancy.

HEX#FFB703
RGB255, 183, 3
HSL43, 100, 51
CMYK0, 28, 99, 0
Slate Gray

Slate Gray offers neutrality and contrast, helping ground the strong main colors and improve visual clarity.

HEX#707070
RGB112, 112, 112
HSL0, 0, 44
CMYK0, 0, 0, 56

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

RolesBg Dark

HEX#F0F0F0
RGB240, 240, 240
HSL0, 0, 94
CMYK0, 0, 0, 6
Charcoal

RolesText

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: #D72631;
  --color-prussian-blue: #023047;
  --color-mustard-yellow: #FFB703;
  --color-slate-gray: #707070;
  --color-white: #FFFFFF;
  --color-ivory: #F0F0F0;
  --color-charcoal: #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: #D72631;
  --role-btn-primary-bg: #D72631;
  --role-link: #D72631;
  --role-btn-secondary-bg: #023047;
  --role-btn-outlined-border: #023047;
  --role-btn-outlined-text: #023047;
  --role-headline: #023047;
  --role-border: #FFB703;
  --role-divider: #FFB703;
  --role-icon: #FFB703;
  --role-outline: #FFB703;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F0F0F0;
  --role-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": "#D72631",
    "prussian-blue": "#023047",
    "mustard-yellow": "#FFB703",
    "slate-gray": "#707070",
    "white": "#FFFFFF",
    "ivory": "#F0F0F0",
    "charcoal": "#1A1A1A"
}
Press Space to load new palette