Navy Blue#001f4d
Cobalt Blue#295caa
Sky Blue#78a2da
Steel Blue#4c7b9c
Soft Cyan#6eaedb
Palette direction

Deep Blue Gradient Color Palette

This palette is inspired by the rich spectrum of blue tones from deep navy to soft sky blues seen in the image, creating a cohesive and calming blue-anchored brand system with subtle accents for balance. It uses cool blues to convey trust and tranquility while supporting colors add depth and versatility. Neutral shades ground the palette with crisp whites and dark charcoal for text and backgrounds.

MonochromaticTechbluegradienttechnologytrust
palette-preview.example
Tech color direction

Deep Blue Gradient Color Palette

This palette is inspired by the rich spectrum of blue tones from deep navy to soft sky blues seen in the image, creating a cohesive and calming blue-anchored brand system with subtle accents for balance. It uses cool blues to convey trust and tranquility while supporting colors add depth and versatility. Neutral shades ground the palette with crisp whites and dark charcoal 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 White #FFFFFFon Navy Blue #001F4D16.1:1 Excellent
Logo Charcoal #1A1A1Aon Sky Blue #78A2DA6.6:1 Strong
Logo Charcoal #1A1A1Aon White #FFFFFF17.4:1 Excellent
Logo Charcoal #1A1A1Aon Soft Cyan #6EAEDB7.2:1 Excellent
Icon color
BackgroundNavy Blue#001f4dTextWhite#ffffff
Primary Button16.11:1
AAA

Best for the main action users should notice first.

BackgroundCobalt Blue#295caaTextWhite#ffffff
Secondary Button6.55:1
AA

Useful for softer choices and secondary paths.

BackgroundSoft Cyan#6eaedbTextCobalt Blue#295caa
Outlined Button2.73:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundSoft Cyan#6eaedbTextNavy Blue#001f4d
Text Button6.71:1
AA

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

Palette composition8 colorsMonochromatic color relationship
9:41Deep Blue Gradient 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.

CDeep Blue Gradient Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors are a gradient of blues from deep navy to sky blue, offering a versatile, harmonious system that conveys stability, trust, and calmness typical for tech-oriented branding.

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.Navy Blue #001f4d
HeadlineUsed for main titles and key messages.Navy Blue #001f4d
LinkUsed for links and interactive text.Navy Blue #001f4d

Buttons

Primary Button
BackgroundNavy Blue #001f4d
TextWhite #ffffff
Secondary Button
BackgroundCobalt Blue #295caa
TextWhite #ffffff
Outlined Button
BackgroundCobalt Blue #295caa
TextCobalt Blue #295caa

Interface

TextDefault readable body text.Charcoal #1a1a1a
Bg LightLight page or section background.Soft Cyan #6eaedb
Bg DarkDark page or section background.Snow #f2f4f7
IconSmall interface icons and marks.Steel Blue #4c7b9c
BorderCards, inputs, and component borders.Steel Blue #4c7b9c
DividerSubtle separators between content.Steel Blue #4c7b9c
OutlineFocus rings and emphasis outlines.Steel Blue #4c7b9c

Palette Colors

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

Main (Brand) Colors

The main colors are a gradient of blues from deep navy to sky blue, offering a versatile, harmonious system that conveys stability, trust, and calmness typical for tech-oriented branding.

PrimaryNavy Blue

RolesLogo, Link, Btn Primary Bg, Headline

Navy Blue embodies confidence and professionalism, making it ideal for a brand logo and primary button background.

HEX#001f4d
RGB0, 31, 77
HSL216, 100, 15
CMYK100, 60, 0, 70
SecondaryCobalt Blue

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Cobalt Blue adds vibrancy and approachability to secondary buttons and outlines without overpowering the primary navy.

HEX#295caa
RGB41, 92, 170
HSL216, 61, 41
CMYK76, 46, 0, 33
TertiarySky Blue

Sky Blue serves as a lighter accent in headlines or supporting text, softening the overall color experience.

HEX#78a2da
RGB120, 162, 218
HSL214, 57, 66
CMYK45, 26, 0, 15

Support Colors

Support colors extend the main blues with muted cyan and steel shades to balance the palette with subtle contrast and enhance interface elements.

Steel Blue

RolesIcon, Border, Divider, Outline

Steel Blue complements the blues by providing calm, muted accents for borders and icons, reinforcing a polished look.

HEX#4c7b9c
RGB76, 123, 156
HSL205, 34, 45
CMYK51, 21, 0, 39
Soft Cyan

RolesBg Light

Soft Cyan offers a gentle, near-white background tint that harmonizes with the blue main colors while enhancing readability.

HEX#6eaedb
RGB110, 174, 219
HSL205, 60, 65
CMYK50, 21, 0, 14

Neutral Colors

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

White

RolesBtn Primary Text, Btn Secondary Text

HEX#ffffff
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Snow

RolesBg Dark

HEX#f2f4f7
RGB242, 244, 247
HSL216, 24, 96
CMYK2, 1, 0, 3
Charcoal

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. 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-navy-blue: #001f4d;
  --color-cobalt-blue: #295caa;
  --color-sky-blue: #78a2da;
  --color-steel-blue: #4c7b9c;
  --color-soft-cyan: #6eaedb;
  --color-white: #ffffff;
  --color-snow: #f2f4f7;
  --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: #001f4d;
  --role-link: #001f4d;
  --role-btn-primary-bg: #001f4d;
  --role-headline: #001f4d;
  --role-btn-secondary-bg: #295caa;
  --role-btn-outlined-border: #295caa;
  --role-btn-outlined-text: #295caa;
  --role-icon: #4c7b9c;
  --role-border: #4c7b9c;
  --role-divider: #4c7b9c;
  --role-outline: #4c7b9c;
  --role-bg-light: #6eaedb;
  --role-btn-primary-text: #ffffff;
  --role-btn-secondary-text: #ffffff;
  --role-bg-dark: #f2f4f7;
  --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.
{
    "navy-blue": "#001f4d",
    "cobalt-blue": "#295caa",
    "sky-blue": "#78a2da",
    "steel-blue": "#4c7b9c",
    "soft-cyan": "#6eaedb",
    "white": "#ffffff",
    "snow": "#f2f4f7",
    "charcoal": "#1a1a1a"
}
Press Space to load new palette