Cobalt Blue#0E3AA7
Cerulean Blue#2A63C7
Sky Blue#54A0FF
Muted Cyan#4FB0C6
Slate Gray#3B4B5B
Palette direction

Cobalt Blue Gray Color Palette

This palette draws from the cool, calming blues and soft grays apparent in the logo, using them to establish a trustworthy, approachable brand identity suitable for a contemporary tech or creative service. The main blues provide depth and energy, while the support grays and a muted cyan add balance and subtle sophistication. Three neutrals anchor the palette for readability and clean backgrounds.

MonochromaticTechbluegraycobaltcyan
palette-preview.example
Tech color direction

Cobalt Blue Gray Color Palette

This palette draws from the cool, calming blues and soft grays apparent in the logo, using them to establish a trustworthy, approachable brand identity suitable for a contemporary tech or creative service. The main blues provide depth and energy, while the support grays and a muted cyan add balance and subtle sophistication. Three neutrals anchor the palette for readability and clean 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 Cobalt Blue #0E3AA79.6:1 Excellent
Logo Charcoal #1A1E2Eon Sky Blue #54A0FF6.2:1 Strong
Logo White #FFFFFFon Cerulean Blue #2A63C75.7:1 Strong
Logo Charcoal #1A1E2Eon White #FFFFFF16.5:1 Excellent
Icon color
BackgroundCobalt Blue#0E3AA7TextWhite#FFFFFF
Primary Button9.62:1
AAA

Best for the main action users should notice first.

BackgroundCerulean Blue#2A63C7TextWhite#FFFFFF
Secondary Button5.66:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextSky Blue#54A0FF
Outlined Button2.68:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextCobalt Blue#0E3AA7
Text Button9.62:1
AAA

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

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

CCobalt Blue Gray Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors use a range of blues from deep cobalt to bright cerulean, creating a harmonious and recognizable blue-based identity that is both professional and approachable.

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.Cobalt Blue #0E3AA7
HeadlineUsed for main titles and key messages.Cerulean Blue #2A63C7
LinkUsed for links and interactive text.Cobalt Blue #0E3AA7

Buttons

Primary Button
BackgroundCobalt Blue #0E3AA7
TextWhite #FFFFFF
Secondary Button
BackgroundCerulean Blue #2A63C7
TextWhite #FFFFFF
Outlined Button
BackgroundCobalt Blue #0E3AA7
TextSky Blue #54A0FF

Interface

TextDefault readable body text.Charcoal #1A1E2E
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Alabaster #F7F9FB
IconSmall interface icons and marks.Muted Cyan #4FB0C6
BorderCards, inputs, and component borders.Muted Cyan #4FB0C6
DividerSubtle separators between content.Slate Gray #3B4B5B
OutlineFocus rings and emphasis outlines.Slate Gray #3B4B5B

Palette Colors

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

Main (Brand) Colors

The main colors use a range of blues from deep cobalt to bright cerulean, creating a harmonious and recognizable blue-based identity that is both professional and approachable.

PrimaryCobalt Blue

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border

Cobalt Blue conveys trust and intelligence, serving as the strong foundational brand presence.

HEX#0E3AA7
RGB14, 58, 167
HSL223, 85, 35
CMYK92, 65, 0, 35
SecondaryCerulean Blue

RolesBtn Secondary Bg, Headline

Cerulean Blue adds energy and freshness, making secondary elements stand out distinctly yet harmoniously.

HEX#2A63C7
RGB42, 99, 199
HSL218, 65, 47
CMYK79, 50, 0, 22
TertiarySky Blue

RolesBtn Outlined Text

Sky Blue offers a light, vibrant accent that balances the deeper blues with a friendly vibe.

HEX#54A0FF
RGB84, 160, 255
HSL213, 100, 66
CMYK67, 37, 0, 0

Support Colors

The support colors introduce subtle cyan and soft dark gray accents to extend the main blues, providing contrast and functional elements such as icons and borders without drawing attention away.

Muted Cyan

RolesIcon, Border

Muted Cyan complements the blues with a cooler tone, perfect for icons and borders to reinforce the palette.

HEX#4FB0C6
RGB79, 176, 198
HSL191, 51, 54
CMYK60, 11, 0, 22
Slate Gray

RolesDivider, Outline

Slate Gray offers a soft dark neutral with a slight warmth that balances the cooler blues and supports clean separations.

HEX#3B4B5B
RGB59, 75, 91
HSL210, 21, 29
CMYK35, 18, 0, 64

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
Alabaster

RolesBg Dark

HEX#F7F9FB
RGB247, 249, 251
HSL210, 33, 98
CMYK2, 1, 0, 2
Charcoal

RolesText

HEX#1A1E2E
RGB26, 30, 46
HSL228, 28, 14
CMYK43, 35, 0, 82

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-cobalt-blue: #0E3AA7;
  --color-cerulean-blue: #2A63C7;
  --color-sky-blue: #54A0FF;
  --color-muted-cyan: #4FB0C6;
  --color-slate-gray: #3B4B5B;
  --color-white: #FFFFFF;
  --color-alabaster: #F7F9FB;
  --color-charcoal: #1A1E2E;
}

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: #0E3AA7;
  --role-link: #0E3AA7;
  --role-btn-primary-bg: #0E3AA7;
  --role-btn-outlined-border: #0E3AA7;
  --role-btn-secondary-bg: #2A63C7;
  --role-headline: #2A63C7;
  --role-btn-outlined-text: #54A0FF;
  --role-icon: #4FB0C6;
  --role-border: #4FB0C6;
  --role-divider: #3B4B5B;
  --role-outline: #3B4B5B;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F7F9FB;
  --role-text: #1A1E2E;
}

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.
{
    "cobalt-blue": "#0E3AA7",
    "cerulean-blue": "#2A63C7",
    "sky-blue": "#54A0FF",
    "muted-cyan": "#4FB0C6",
    "slate-gray": "#3B4B5B",
    "white": "#FFFFFF",
    "alabaster": "#F7F9FB",
    "charcoal": "#1A1E2E"
}
Press Space to load new palette