Royal Blue#0066CC
Dark Navy#003366
Sky Blue#6699CC
Cool Grey#B3B3B3
Slate Grey#454545
Palette direction

Vibrant Industrial Blue Color Palette

This palette draws inspiration from the vibrant blues and industrial neutrals visible in the images, combining energetic blue hues with solid, grounded neutrals and accent greys to create a versatile, professional brand identity suitable for a tech or industrial environment.

MonochromaticTechblueindustrialneutraltech
palette-preview.example
Tech color direction

Vibrant Industrial Blue Color Palette

This palette draws inspiration from the vibrant blues and industrial neutrals visible in the images, combining energetic blue hues with solid, grounded neutrals and accent greys to create a versatile, professional brand identity suitable for a tech or industrial environment.

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 Dark Navy #00336612.6:1 Excellent
Logo Charcoal Black #1A1A1Aon Sky Blue #6699CC5.8:1 Strong
Logo White #FFFFFFon Royal Blue #0066CC5.6:1 Strong
Logo Charcoal Black #1A1A1Aon White #FFFFFF17.4:1 Excellent
Icon color
BackgroundRoyal Blue#0066CCTextWhite#FFFFFF
Primary Button5.57:1
AA

Best for the main action users should notice first.

BackgroundDark Navy#003366TextWhite#FFFFFF
Secondary Button12.61:1
AAA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextDark Navy#003366
Outlined Button12.61:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextRoyal Blue#0066CC
Text Button5.57:1
AA

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

Palette composition8 colorsMonochromatic color relationship
9:41Vibrant Industrial Blue Color Palette Color role balance
Monochromatic 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 Industrial Blue 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 #0066CC
HeadlineUsed for main titles and key messages.Royal Blue #0066CC
LinkUsed for links and interactive text.Royal Blue #0066CC

Buttons

Primary Button
BackgroundRoyal Blue #0066CC
TextWhite #FFFFFF
Secondary Button
BackgroundDark Navy #003366
TextWhite #FFFFFF
Outlined Button
BackgroundDark Navy #003366
TextDark Navy #003366

Interface

TextDefault readable body text.Charcoal Black #1A1A1A
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Slate Grey #454545
IconSmall interface icons and marks.Cool Grey #B3B3B3
BorderCards, inputs, and component borders.Cool Grey #B3B3B3
DividerSubtle separators between content.Cool Grey #B3B3B3
OutlineFocus rings and emphasis outlines.Cool Grey #B3B3B3

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 blues and a cool grey to form a unified and recognizable system representing energy, trust, and industrial strength.

PrimaryRoyal Blue

RolesLogo, Link, Btn Primary Bg, Headline

Royal Blue conveys trust, reliability, and professionalism, making it the brand's key color for recognition and engagement.

HEX#0066CC
RGB0, 102, 204
HSL210, 100, 40
CMYK100, 50, 0, 20
SecondaryDark Navy

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Dark Navy provides depth and a stable anchor to balance the brightness of Royal Blue and support secondary buttons and outlines.

HEX#003366
RGB0, 51, 102
HSL210, 100, 20
CMYK100, 50, 0, 60
TertiarySky Blue

Sky Blue creates contrast with the darker blues, serving effectively for button texts that require clarity and softness.

HEX#6699CC
RGB102, 153, 204
HSL210, 50, 60
CMYK50, 25, 0, 20

Support Colors

The support colors are muted warm grey and steel accent that gently extend the main blues, adding balance, texture, and subtle industrial refinement without overpowering the palette.

Cool Grey

RolesIcon, Border, Divider, Outline

Cool Grey acts as a neutral industrial accent with a soft balance to the vivid blues, suitable for UI elements and structural components.

HEX#B3B3B3
RGB179, 179, 179
HSL0, 0, 70
CMYK0, 0, 0, 30
Slate Grey

RolesBg Dark

Slate Grey adds a grounded dark background tone that enhances visual hierarchy and adds a contemporary, professional industrial feel.

HEX#454545
RGB69, 69, 69
HSL0, 0, 27
CMYK0, 0, 0, 73

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
Light Grey
HEX#F2F2F2
RGB242, 242, 242
HSL0, 0, 95
CMYK0, 0, 0, 5
Charcoal Black

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-royal-blue: #0066CC;
  --color-dark-navy: #003366;
  --color-sky-blue: #6699CC;
  --color-cool-grey: #B3B3B3;
  --color-slate-grey: #454545;
  --color-white: #FFFFFF;
  --color-light-grey: #F2F2F2;
  --color-charcoal-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: #0066CC;
  --role-link: #0066CC;
  --role-btn-primary-bg: #0066CC;
  --role-headline: #0066CC;
  --role-btn-secondary-bg: #003366;
  --role-btn-outlined-border: #003366;
  --role-btn-outlined-text: #003366;
  --role-icon: #B3B3B3;
  --role-border: #B3B3B3;
  --role-divider: #B3B3B3;
  --role-outline: #B3B3B3;
  --role-bg-dark: #454545;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --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.
{
    "royal-blue": "#0066CC",
    "dark-navy": "#003366",
    "sky-blue": "#6699CC",
    "cool-grey": "#B3B3B3",
    "slate-grey": "#454545",
    "white": "#FFFFFF",
    "light-grey": "#F2F2F2",
    "charcoal-black": "#1A1A1A"
}
Press Space to load new palette