Royal Blue#0033CC
Golden Yellow#FFCC00
Slate Gray#4D4D4D
Soft Sky Blue#6699FF
Warm Sand#BFAF66
Palette direction

Vibrant Blue Yellow Color Palette

This palette is inspired by the strong and vibrant colors of the logo, combining a bold blue with bright yellow and a rich gray to create a dynamic yet balanced identity. The main colors convey trustworthiness and creativity, while the support colors add subtle sophistication and highlight elements. The neutrals ensure clarity and legibility across digital interfaces.

ComplementaryTechblueyellowgraybold
palette-preview.example
Tech color direction

Vibrant Blue Yellow Color Palette

This palette is inspired by the strong and vibrant colors of the logo, combining a bold blue with bright yellow and a rich gray to create a dynamic yet balanced identity. The main colors convey trustworthiness and creativity, while the support colors add subtle sophistication and highlight elements. The neutrals ensure clarity and legibility across digital interfaces.

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 Almost Black #1A1A1Aon Golden Yellow #FFCC0011.5:1 Excellent
Logo Pure White #FFFFFFon Royal Blue #0033CC9.0:1 Excellent
Logo Almost Black #1A1A1Aon Pure White #FFFFFF17.4:1 Excellent
Logo Almost Black #1A1A1Aon Warm Sand #BFAF667.9:1 Excellent
Icon color
BackgroundRoyal Blue#0033CCTextPure White#FFFFFF
Primary Button8.95:1
AAA

Best for the main action users should notice first.

BackgroundGolden Yellow#FFCC00TextAlmost Black#1A1A1A
Secondary Button11.51:1
AAA

Useful for softer choices and secondary paths.

BackgroundGolden Yellow#FFCC00TextRoyal Blue#0033CC
Outlined Button5.92:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundGolden Yellow#FFCC00TextGolden Yellow#FFCC00
Text Button1.00:1
Low

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

Palette composition8 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 PaletteTech 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.Royal Blue #0033CC
HeadlineUsed for main titles and key messages.Royal Blue #0033CC
LinkUsed for links and interactive text.Golden Yellow #FFCC00

Buttons

Primary Button
BackgroundRoyal Blue #0033CC
TextPure White #FFFFFF
Secondary Button
BackgroundGolden Yellow #FFCC00
TextAlmost Black #1A1A1A
Outlined Button
BackgroundRoyal Blue #0033CC
TextRoyal Blue #0033CC

Interface

TextDefault readable body text.Almost Black #1A1A1A
Bg LightLight page or section background.Golden Yellow #FFCC00
Bg DarkDark page or section background.Warm Sand #BFAF66
IconSmall interface icons and marks.Soft Sky Blue #6699FF
BorderCards, inputs, and component borders.Soft Sky Blue #6699FF
DividerSubtle separators between content.Slate Gray #4D4D4D
OutlineFocus rings and emphasis outlines.Slate Gray #4D4D4D

Palette Colors

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

Main (Brand) Colors

The main colors balance the dynamic complement of vivid blue and warm yellow, creating high recognizability and visual impact for the brand.

PrimaryRoyal Blue

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

Royal Blue brings trust, reliability, and professionalism to the brand identity as the dominant color.

HEX#0033CC
RGB0, 51, 204
HSL225, 100, 40
CMYK100, 75, 0, 20
SecondaryGolden Yellow

RolesBtn Secondary Bg, Link, Bg Light

Golden Yellow adds energy, optimism, and a vibrant accent that energizes and draws attention.

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

RolesDivider, Outline

Slate Gray grounds the palette with subtle sophistication and neutral balance supporting the visual hierarchy.

HEX#4D4D4D
RGB77, 77, 77
HSL0, 0, 30
CMYK0, 0, 0, 70

Support Colors

The support colors subtly extend the main palette through muted blues and warm grays, reinforcing the brand's approachable yet confident tone without overpowering the core colors.

Soft Sky Blue

RolesIcon, Border

Soft Sky Blue complements Royal Blue with a lighter tonal variation for icons and borders, maintaining harmony and visual softness.

HEX#6699FF
RGB102, 153, 255
HSL220, 100, 70
CMYK60, 40, 0, 0
Warm Sand

RolesBg Dark

Warm Sand provides neutral background options that enrich the yellow tone while keeping the environment inviting and calm.

HEX#BFAF66
RGB191, 175, 102
HSL49, 41, 57
CMYK0, 8, 47, 25

Neutral Colors

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

Pure White

RolesBtn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Off White
HEX#F6F6F6
RGB246, 246, 246
HSL0, 0, 96
CMYK0, 0, 0, 4
Almost Black

RolesText, Btn Secondary Text

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. You can also copy this palette for Logo Export on myLogo.review, so your colors are ready there in one click.

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-royal-blue: #0033CC;
  --color-golden-yellow: #FFCC00;
  --color-slate-gray: #4D4D4D;
  --color-soft-sky-blue: #6699FF;
  --color-warm-sand: #BFAF66;
  --color-pure-white: #FFFFFF;
  --color-off-white: #F6F6F6;
  --color-almost-black: #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: #0033CC;
  --role-btn-primary-bg: #0033CC;
  --role-headline: #0033CC;
  --role-btn-outlined-border: #0033CC;
  --role-btn-outlined-text: #0033CC;
  --role-btn-secondary-bg: #FFCC00;
  --role-link: #FFCC00;
  --role-bg-light: #FFCC00;
  --role-divider: #4D4D4D;
  --role-outline: #4D4D4D;
  --role-icon: #6699FF;
  --role-border: #6699FF;
  --role-bg-dark: #BFAF66;
  --role-btn-primary-text: #FFFFFF;
  --role-text: #1A1A1A;
  --role-btn-secondary-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.
{
    "royal-blue": "#0033CC",
    "golden-yellow": "#FFCC00",
    "slate-gray": "#4D4D4D",
    "soft-sky-blue": "#6699FF",
    "warm-sand": "#BFAF66",
    "pure-white": "#FFFFFF",
    "off-white": "#F6F6F6",
    "almost-black": "#1A1A1A"
}
Press Space to load new palette