Azure Blue#007ACC
Burnt Orange#E97451
Charcoal Navy#2C3E50
Warm Taupe#9E7A63
Palette direction

Azure Blue Orange Color Palette

This palette uses a complementary color scheme of distinctive blue and warm orange to represent precision and innovation while supporting trustworthiness and energy in engineering solutions. The accents provide subtle warmth and grounding to complement the main colors, ensuring clarity and balance in complex digital environments. The neutrals offer crisp backgrounds and high contrast text for excellent readability across digital interfaces.

ComplementaryTechengineeringdigital deliveryBIMAEC
palette-preview.example
Tech color direction

Azure Blue Orange Color Palette

This palette uses a complementary color scheme of distinctive blue and warm orange to represent precision and innovation while supporting trustworthiness and energy in engineering solutions. The accents provide subtle warmth and grounding to complement the main colors, ensuring clarity and balance in complex digital environments. The neutrals offer crisp backgrounds and high contrast text for excellent readability 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 Charcoal #1A1A1Aon Burnt Orange #E974515.9:1 Strong
Logo Pure White #FFFFFFon Azure Blue #007ACC4.5:1 Strong
Logo Charcoal #1A1A1Aon Pure White #FFFFFF17.4:1 Excellent
Logo Pure White #FFFFFFon Charcoal #1A1A1A17.4:1 Excellent
Icon color
BackgroundAzure Blue#007ACCTextPure White#FFFFFF
Primary Button4.51:1
AA

Best for the main action users should notice first.

BackgroundBurnt Orange#E97451TextCharcoal#1A1A1A
Secondary Button5.87:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextAzure Blue#007ACC
Outlined Button4.51:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextAzure Blue#007ACC
Text Button4.51:1
AA

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

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

CAzure Blue Orange Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine a vivid azure blue and a warm orange to symbolize technological precision balanced by industrial energy, forming a recognizable and harmonious system that supports global engineering brand identity.

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.Azure Blue #007ACC
HeadlineUsed for main titles and key messages.Azure Blue #007ACC
LinkUsed for links and interactive text.Azure Blue #007ACC

Buttons

Primary Button
BackgroundAzure Blue #007ACC
TextPure White #FFFFFF
Secondary Button
BackgroundBurnt Orange #E97451
TextCharcoal #1A1A1A
Outlined Button
BackgroundAzure Blue #007ACC
TextAzure Blue #007ACC

Interface

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

Palette Colors

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

Main (Brand) Colors

The main colors combine a vivid azure blue and a warm orange to symbolize technological precision balanced by industrial energy, forming a recognizable and harmonious system that supports global engineering brand identity.

PrimaryAzure Blue

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

Azure Blue conveys trust, clarity, and advanced technology essential for a digital engineering partner.

HEX#007ACC
RGB0, 122, 204
HSL204, 100, 40
CMYK100, 40, 0, 20
SecondaryBurnt Orange

RolesBtn Secondary Bg

Burnt Orange adds energy and approachability, balancing the technical feel with warmth and movement.

HEX#E97451
RGB233, 116, 81
HSL14, 78, 62
CMYK0, 50, 65, 9

Support Colors

Support colors extend the main palette with muted navy and warm taupe to provide nuanced accents for icons, borders, and interface elements without competing with primary colors.

Charcoal Navy

RolesIcon, Border, Divider, Outline

Charcoal Navy supports primary blue with a deeper shade to ensure legibility and visual grounding in digital contexts.

HEX#2C3E50
RGB44, 62, 80
HSL210, 29, 24
CMYK45, 23, 0, 69
Warm Taupe

Warm Taupe offers a subtle earthy tone that complements burnt orange, softening the palette and aiding visual hierarchy.

HEX#9E7A63
RGB158, 122, 99
HSL23, 23, 50
CMYK0, 23, 37, 38

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
Ivory

RolesBg Dark

HEX#F5F5F5
RGB245, 245, 245
HSL0, 0, 96
CMYK0, 0, 0, 4
Charcoal

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.

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-azure-blue: #007ACC;
  --color-burnt-orange: #E97451;
  --color-charcoal-navy: #2C3E50;
  --color-warm-taupe: #9E7A63;
  --color-pure-white: #FFFFFF;
  --color-ivory: #F5F5F5;
  --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: #007ACC;
  --role-link: #007ACC;
  --role-btn-primary-bg: #007ACC;
  --role-btn-outlined-border: #007ACC;
  --role-btn-outlined-text: #007ACC;
  --role-headline: #007ACC;
  --role-btn-secondary-bg: #E97451;
  --role-icon: #2C3E50;
  --role-border: #2C3E50;
  --role-divider: #2C3E50;
  --role-outline: #2C3E50;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F5F5F5;
  --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.
{
    "azure-blue": "#007ACC",
    "burnt-orange": "#E97451",
    "charcoal-navy": "#2C3E50",
    "warm-taupe": "#9E7A63",
    "pure-white": "#FFFFFF",
    "ivory": "#F5F5F5",
    "charcoal": "#1A1A1A"
}
Press Space to load new palette