Dark Navy#1A264F
Bright Cyan Blue#0592D1
Vivid Green#33CC77
Moderate Blue#4078A3
Muted Turquoise#1B9AAA
Palette direction

Navy Blue Green Color Palette

This palette draws on the bold, dark navy background with bright, punchy blue and green accents from the image, balanced by clean neutrals for readability and contrast. The main colors create a strong, trustworthy tech vibe while the support colors add visual interest without overwhelming the core identity.

AnalogousTechnavybluegreentech
palette-preview.example
Tech color direction

Navy Blue Green Color Palette

This palette draws on the bold, dark navy background with bright, punchy blue and green accents from the image, balanced by clean neutrals for readability and contrast. The main colors create a strong, trustworthy tech vibe while the support colors add visual interest without overwhelming the core identity.

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 Dark Navy #1A264F14.6:1 Excellent
Logo Rich Charcoal #121A2Aon Vivid Green #33CC778.3:1 Excellent
Logo Rich Charcoal #121A2Aon Bright Cyan Blue #0592D15.0:1 Strong
Logo Rich Charcoal #121A2Aon Pure White #FFFFFF17.4:1 Excellent
Icon color
BackgroundDark Navy#1A264FTextPure White#FFFFFF
Primary Button14.64:1
AAA

Best for the main action users should notice first.

BackgroundBright Cyan Blue#0592D1TextRich Charcoal#121A2A
Secondary Button5.00:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextBright Cyan Blue#0592D1
Outlined Button3.48:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextDark Navy#1A264F
Text Button14.64:1
AAA

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

Palette composition8 colorsAnalogous color relationship
9:41Navy Blue Green Color Palette Color role balance
Analogous 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.

CNavy Blue Green Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The navy blue base provides a dependable and calming foundation, complemented by a bright cyan blue that infuses energy, and a vibrant green adding freshness and innovation, together creating a cohesive tech-forward palette.

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.Dark Navy #1A264F
HeadlineUsed for main titles and key messages.Bright Cyan Blue #0592D1
LinkUsed for links and interactive text.Dark Navy #1A264F

Buttons

Primary Button
BackgroundDark Navy #1A264F
TextPure White #FFFFFF
Secondary Button
BackgroundBright Cyan Blue #0592D1
TextRich Charcoal #121A2A
Outlined Button
BackgroundBright Cyan Blue #0592D1
TextBright Cyan Blue #0592D1

Interface

TextDefault readable body text.Rich Charcoal #121A2A
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Light Ivory #F5F7FA
IconSmall interface icons and marks.Moderate Blue #4078A3
BorderCards, inputs, and component borders.Moderate Blue #4078A3
DividerSubtle separators between content.Muted Turquoise #1B9AAA
OutlineFocus rings and emphasis outlines.Muted Turquoise #1B9AAA

Palette Colors

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

Main (Brand) Colors

The navy blue base provides a dependable and calming foundation, complemented by a bright cyan blue that infuses energy, and a vibrant green adding freshness and innovation, together creating a cohesive tech-forward palette.

PrimaryDark Navy

RolesLogo, Link, Btn Primary Bg

Dark Navy grounds the palette with trustworthiness and professionalism essential for tech brands.

HEX#1A264F
RGB26, 38, 79
HSL226, 50, 21
CMYK67, 52, 0, 69
SecondaryBright Cyan Blue

RolesBtn Outlined Border, Btn Outlined Text, Headline, Btn Secondary Bg

Bright Cyan Blue injects vibrancy and highlights important interactive elements like outlines and headlines.

HEX#0592D1
RGB5, 146, 209
HSL199, 95, 42
CMYK98, 30, 0, 18
TertiaryVivid Green

Vivid Green adds a fresh, innovative spark that energizes and refreshes the overall palette, perfect for calls to action or accents.

HEX#33CC77
RGB51, 204, 119
HSL147, 60, 50
CMYK75, 0, 42, 20

Support Colors

Support colors are mid-tone blues and a muted turquoise that harmonize with the main hues while adding subtle depth and visual interest in UI elements such as icons, borders, and dividers.

Moderate Blue

RolesIcon, Border

Moderate Blue balances the darker navy with medium brightness, ideal for icons and border details without overpowering.

HEX#4078A3
RGB64, 120, 163
HSL206, 44, 45
CMYK61, 26, 0, 36
Muted Turquoise

RolesDivider, Outline

Muted Turquoise brings softness and a calming sea tone that complements the greens and blues, perfect for dividers and outlines.

HEX#1B9AAA
RGB27, 154, 170
HSL187, 73, 39
CMYK84, 9, 0, 33

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 Ivory

RolesBg Dark

HEX#F5F7FA
RGB245, 247, 250
HSL216, 33, 97
CMYK2, 1, 0, 2
Rich Charcoal

RolesText, Btn Secondary Text

HEX#121A2A
RGB18, 26, 42
HSL220, 40, 12
CMYK57, 38, 0, 84

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-dark-navy: #1A264F;
  --color-bright-cyan-blue: #0592D1;
  --color-vivid-green: #33CC77;
  --color-moderate-blue: #4078A3;
  --color-muted-turquoise: #1B9AAA;
  --color-pure-white: #FFFFFF;
  --color-light-ivory: #F5F7FA;
  --color-rich-charcoal: #121A2A;
}

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: #1A264F;
  --role-link: #1A264F;
  --role-btn-primary-bg: #1A264F;
  --role-btn-outlined-border: #0592D1;
  --role-btn-outlined-text: #0592D1;
  --role-headline: #0592D1;
  --role-btn-secondary-bg: #0592D1;
  --role-icon: #4078A3;
  --role-border: #4078A3;
  --role-divider: #1B9AAA;
  --role-outline: #1B9AAA;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F5F7FA;
  --role-text: #121A2A;
  --role-btn-secondary-text: #121A2A;
}

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.
{
    "dark-navy": "#1A264F",
    "bright-cyan-blue": "#0592D1",
    "vivid-green": "#33CC77",
    "moderate-blue": "#4078A3",
    "muted-turquoise": "#1B9AAA",
    "pure-white": "#FFFFFF",
    "light-ivory": "#F5F7FA",
    "rich-charcoal": "#121A2A"
}
Press Space to load new palette