Navy Blue#112A56
Coral Red#E04E45
Sky Blue#4AB3F4
Steel Blue#345D9D
Muted Red#CE5C55
Palette direction

Deep Navy Glow Color Palette

This strategic color palette is inspired by the deep, elegant blues and subtle glowing reds observed in the image, creating a sophisticated and dynamic visual system suitable for a tech or corporate brand. The main blues provide trustworthiness and depth, while the accents of soft red add warmth and energy. Neutral tones balance the palette with clean contrast for text and backgrounds.

ComplementaryTechnavybluereddeep blue
palette-preview.example
Tech color direction

Deep Navy Glow Color Palette

This strategic color palette is inspired by the deep, elegant blues and subtle glowing reds observed in the image, creating a sophisticated and dynamic visual system suitable for a tech or corporate brand. The main blues provide trustworthiness and depth, while the accents of soft red add warmth and energy. Neutral tones balance the palette with clean contrast for text and 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 Pure White #FFFFFFon Navy Blue #112A5614.1:1 Excellent
Logo Charcoal #1C1C1Con Sky Blue #4AB3F47.3:1 Excellent
Logo Charcoal #1C1C1Con Pure White #FFFFFF17.0:1 Excellent
Icon color
BackgroundNavy Blue#112A56TextPure White#FFFFFF
Primary Button14.10:1
AAA

Best for the main action users should notice first.

BackgroundCoral Red#E04E45TextCharcoal#1C1C1C
Secondary Button4.34:1
Large text

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextCoral Red#E04E45
Outlined Button3.93:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextNavy Blue#112A56
Text Button14.10:1
AAA

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

Palette composition8 colorsComplementary color relationship
9:41Deep Navy Glow 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.

CDeep Navy Glow 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.Navy Blue #112A56
HeadlineUsed for main titles and key messages.Sky Blue #4AB3F4
LinkUsed for links and interactive text.Navy Blue #112A56

Buttons

Primary Button
BackgroundNavy Blue #112A56
TextPure White #FFFFFF
Secondary Button
BackgroundCoral Red #E04E45
TextCharcoal #1C1C1C
Outlined Button
BackgroundCoral Red #E04E45
TextCoral Red #E04E45

Interface

TextDefault readable body text.Charcoal #1C1C1C
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Light Silver #F3F6F8
IconSmall interface icons and marks.Steel Blue #345D9D
BorderCards, inputs, and component borders.Steel Blue #345D9D
DividerSubtle separators between content.Steel Blue #345D9D
OutlineFocus rings and emphasis outlines.Steel Blue #345D9D

Palette Colors

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

Main (Brand) Colors

This palette uses deep navy blue along with a muted glowing red and a vivid sky blue, creating a balanced, professional, yet dynamic visual identity.

PrimaryNavy Blue

RolesLogo, Btn Primary Bg, Link

Navy Blue provides a strong foundation of trust and professionalism, essential for corporate recognition.

HEX#112A56
RGB17, 42, 86
HSL218, 67, 20
CMYK80, 51, 0, 66
SecondaryCoral Red

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Coral Red introduces warmth and energy, contrasting sharply to create visual interest and highlight key interactive elements.

HEX#E04E45
RGB224, 78, 69
HSL3, 71, 57
CMYK0, 65, 69, 12
TertiarySky Blue

RolesHeadline

Sky Blue adds brightness and modernity to headlines and accent text, enhancing readability and vibrancy.

HEX#4AB3F4
RGB74, 179, 244
HSL203, 89, 62
CMYK70, 27, 0, 4

Support Colors

The support colors extend the depth of the blues with a softer shade and a gentle light red to balance the intensity, allowing for versatile interface details and subtle highlights.

Steel Blue

RolesIcon, Border, Divider, Outline

Steel Blue supports the primary navy with a softer, more approachable hue, perfect for icons and borders that need to recede but remain visible.

HEX#345D9D
RGB52, 93, 157
HSL217, 50, 41
CMYK67, 41, 0, 38
Muted Red

Muted Red offers a desaturated variant of Coral Red that accents details without overwhelming the main reds or blues.

HEX#CE5C55
RGB206, 92, 85
HSL3, 55, 57
CMYK0, 55, 59, 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
Light Silver

RolesBg Dark

HEX#F3F6F8
RGB243, 246, 248
HSL204, 26, 96
CMYK2, 1, 0, 3
Charcoal

RolesText, Btn Secondary Text

HEX#1C1C1C
RGB28, 28, 28
HSL0, 0, 11
CMYK0, 0, 0, 89

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-navy-blue: #112A56;
  --color-coral-red: #E04E45;
  --color-sky-blue: #4AB3F4;
  --color-steel-blue: #345D9D;
  --color-muted-red: #CE5C55;
  --color-pure-white: #FFFFFF;
  --color-light-silver: #F3F6F8;
  --color-charcoal: #1C1C1C;
}

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: #112A56;
  --role-btn-primary-bg: #112A56;
  --role-link: #112A56;
  --role-btn-secondary-bg: #E04E45;
  --role-btn-outlined-border: #E04E45;
  --role-btn-outlined-text: #E04E45;
  --role-headline: #4AB3F4;
  --role-icon: #345D9D;
  --role-border: #345D9D;
  --role-divider: #345D9D;
  --role-outline: #345D9D;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F3F6F8;
  --role-text: #1C1C1C;
  --role-btn-secondary-text: #1C1C1C;
}

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.
{
    "navy-blue": "#112A56",
    "coral-red": "#E04E45",
    "sky-blue": "#4AB3F4",
    "steel-blue": "#345D9D",
    "muted-red": "#CE5C55",
    "pure-white": "#FFFFFF",
    "light-silver": "#F3F6F8",
    "charcoal": "#1C1C1C"
}
Press Space to load new palette