Cobalt Blue#0047AB
Golden Yellow#FFCC00
Slate Blue#4977A3
Warm Tan#CFAF68
Palette direction

Vibrant Blue Yellow Color Palette

This palette uses vibrant blues and yellows inspired by the image to create a dynamic and trustworthy brand identity. The main colors combine the confidence and dependability of blue with the energy and optimism of yellow, while the support colors provide balance and understated sophistication. Neutrals ground the palette for readability and versatility across digital and print.

ComplementaryFinanceblueyellowcorporatetrustworthy
palette-preview.example
Finance color direction

Vibrant Blue Yellow Color Palette

This palette uses vibrant blues and yellows inspired by the image to create a dynamic and trustworthy brand identity. The main colors combine the confidence and dependability of blue with the energy and optimism of yellow, while the support colors provide balance and understated sophistication. Neutrals ground the palette for readability and versatility across digital and print.

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 #262626on Golden Yellow #FFCC0010.0:1 Excellent
Logo Pure White #FFFFFFon Cobalt Blue #0047AB8.4:1 Excellent
Logo Charcoal #262626on Pure White #FFFFFF15.1:1 Excellent
Logo Charcoal #262626on Warm Tan #CFAF687.2:1 Excellent
Icon color
BackgroundCobalt Blue#0047ABTextPure White#FFFFFF
Primary Button8.44:1
AAA

Best for the main action users should notice first.

BackgroundGolden Yellow#FFCC00TextCharcoal#262626
Secondary Button10.01:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextCobalt Blue#0047AB
Outlined Button8.44:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextCobalt Blue#0047AB
Text Button8.44:1
AAA

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

Palette composition7 colorsComplementary color relationship
9:41Vibrant Blue Yellow 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 Blue Yellow Color PaletteFinance brand direction ColorFly.design
Strategic palette preview

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.Cobalt Blue #0047AB
HeadlineUsed for main titles and key messages.Cobalt Blue #0047AB
LinkUsed for links and interactive text.Cobalt Blue #0047AB

Buttons

Primary Button
BackgroundCobalt Blue #0047AB
TextPure White #FFFFFF
Secondary Button
BackgroundGolden Yellow #FFCC00
TextCharcoal #262626
Outlined Button
BackgroundCobalt Blue #0047AB
TextCobalt Blue #0047AB

Interface

TextDefault readable body text.Charcoal #262626
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Off White #F7F7F7
IconSmall interface icons and marks.Slate Blue #4977A3
BorderCards, inputs, and component borders.Slate Blue #4977A3
DividerSubtle separators between content.Slate Blue #4977A3
OutlineFocus rings and emphasis outlines.Slate Blue #4977A3

Palette Colors

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

Main (Brand) Colors

The main colors are a strong blue and bright yellow, providing a complementary contrast that makes the brand identity memorable and engaging.

PrimaryCobalt Blue

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

Cobalt Blue evokes trust, stability, and professionalism, making it ideal for corporate identity and key interactive elements.

HEX#0047AB
RGB0, 71, 171
HSL215, 100, 34
CMYK100, 58, 0, 33
SecondaryGolden Yellow

RolesBtn Secondary Bg

Golden Yellow brings energy, optimism, and attention to secondary actions, contrasting well with the blue for clear visual hierarchy.

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

Support Colors

The support colors extend the palette with muted blue and warm tan tones that balance the vibrancy of the main colors without competing for attention.

Slate Blue

RolesIcon, Border, Divider, Outline

Slate Blue complements Cobalt Blue with a softer tone for icons and borders, enhancing usability while maintaining cohesion.

HEX#4977A3
RGB73, 119, 163
HSL209, 38, 46
CMYK55, 27, 0, 36
Warm Tan

Warm Tan adds subtle warmth and depth, serving as an accent that balances the boldness of the golden yellow.

HEX#CFAF68
RGB207, 175, 104
HSL41, 52, 61
CMYK0, 15, 50, 19

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text

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

RolesBg Dark

HEX#F7F7F7
RGB247, 247, 247
HSL0, 0, 97
CMYK0, 0, 0, 3
Charcoal

RolesText, Btn Secondary Text

HEX#262626
RGB38, 38, 38
HSL0, 0, 15
CMYK0, 0, 0, 85

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-cobalt-blue: #0047AB;
  --color-golden-yellow: #FFCC00;
  --color-slate-blue: #4977A3;
  --color-warm-tan: #CFAF68;
  --color-pure-white: #FFFFFF;
  --color-off-white: #F7F7F7;
  --color-charcoal: #262626;
}

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: #0047AB;
  --role-link: #0047AB;
  --role-btn-primary-bg: #0047AB;
  --role-btn-outlined-border: #0047AB;
  --role-btn-outlined-text: #0047AB;
  --role-headline: #0047AB;
  --role-btn-secondary-bg: #FFCC00;
  --role-icon: #4977A3;
  --role-border: #4977A3;
  --role-divider: #4977A3;
  --role-outline: #4977A3;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F7F7F7;
  --role-text: #262626;
  --role-btn-secondary-text: #262626;
}

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.
{
    "cobalt-blue": "#0047AB",
    "golden-yellow": "#FFCC00",
    "slate-blue": "#4977A3",
    "warm-tan": "#CFAF68",
    "pure-white": "#FFFFFF",
    "off-white": "#F7F7F7",
    "charcoal": "#262626"
}
Press Space to load new palette