Vivid Cyan#0096FF
Deep Cobalt#005BBB
Slate Gray#708390
Palette direction

Vibrant Blue Charcoal Color Palette

This palette combines vibrant blues and soft grays with deep charcoal neutrals to create a professional and modern brand system. The main blues draw from the original logo's striking cyan tones, conveying clarity and creativity, while the support grays provide balance and approachability. The neutrals anchor the palette with crisp white and near-black shades for optimal contrast and readability.

MonochromaticTechbluecyancharcoalgray
palette-preview.example
Tech color direction

Vibrant Blue Charcoal Color Palette

This palette combines vibrant blues and soft grays with deep charcoal neutrals to create a professional and modern brand system. The main blues draw from the original logo's striking cyan tones, conveying clarity and creativity, while the support grays provide balance and approachability. The neutrals anchor the palette with crisp white and near-black shades for optimal contrast and readability.

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 Deep Cobalt #005BBB6.5:1 Strong
Logo Charcoal #121921on Vivid Cyan #0096FF5.7:1 Strong
Logo Charcoal #121921on Pure White #FFFFFF17.7:1 Excellent
Icon color
BackgroundVivid Cyan#0096FFTextCharcoal#121921
Primary Button5.74:1
AA

Best for the main action users should notice first.

BackgroundDeep Cobalt#005BBBTextPure White#FFFFFF
Secondary Button6.53:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextDeep Cobalt#005BBB
Outlined Button6.53:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextVivid Cyan#0096FF
Text Button3.09:1
Large text

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

Palette composition6 colorsMonochromatic color relationship
9:41Vibrant Blue Charcoal 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.

CVibrant Blue Charcoal Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors are an analogous range of bright cyan and deep blue hues, creating a vibrant and cohesive color relationship that draws from the original logo's energetic blue tones.

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.Vivid Cyan #0096FF
HeadlineUsed for main titles and key messages.Deep Cobalt #005BBB
LinkUsed for links and interactive text.Vivid Cyan #0096FF

Buttons

Primary Button
BackgroundVivid Cyan #0096FF
TextCharcoal #121921
Secondary Button
BackgroundDeep Cobalt #005BBB
TextPure White #FFFFFF
Outlined Button
BackgroundDeep Cobalt #005BBB
TextDeep Cobalt #005BBB

Interface

TextDefault readable body text.Charcoal #121921
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Soft Gray #F2F4F7
IconSmall interface icons and marks.Slate Gray #708390
BorderCards, inputs, and component borders.Slate Gray #708390
DividerSubtle separators between content.Slate Gray #708390
OutlineFocus rings and emphasis outlines.Slate Gray #708390

Palette Colors

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

Main (Brand) Colors

The main colors are an analogous range of bright cyan and deep blue hues, creating a vibrant and cohesive color relationship that draws from the original logo's energetic blue tones.

PrimaryVivid Cyan

RolesLogo, Link, Btn Primary Bg

Vivid Cyan carries high energy and conveys clarity, innovation, and approachability.

HEX#0096FF
RGB0, 150, 255
HSL205, 100, 50
CMYK100, 41, 0, 0
SecondaryDeep Cobalt

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

Deep Cobalt offers a trustworthy and authoritative tone, grounding the bright cyan with professionalism.

HEX#005BBB
RGB0, 91, 187
HSL211, 100, 37
CMYK100, 51, 0, 27

Support Colors

The support colors extend the main palette with softer gray blues and muted grays that complement the intense main blues, adding balance and versatility without overpowering.

Slate Gray

RolesIcon, Border, Divider, Outline

Slate Gray complements the bold blues with a cool, muted tone that provides subtle separation and visual calmness.

HEX#708390
RGB112, 131, 144
HSL204, 13, 50
CMYK22, 9, 0, 44

Neutral Colors

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

Pure White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Soft Gray

RolesBg Dark

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

RolesText, Btn Primary Text

HEX#121921
RGB18, 25, 33
HSL212, 29, 10
CMYK45, 24, 0, 87

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-vivid-cyan: #0096FF;
  --color-deep-cobalt: #005BBB;
  --color-slate-gray: #708390;
  --color-pure-white: #FFFFFF;
  --color-soft-gray: #F2F4F7;
  --color-charcoal: #121921;
}

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: #0096FF;
  --role-link: #0096FF;
  --role-btn-primary-bg: #0096FF;
  --role-btn-secondary-bg: #005BBB;
  --role-btn-outlined-border: #005BBB;
  --role-btn-outlined-text: #005BBB;
  --role-headline: #005BBB;
  --role-icon: #708390;
  --role-border: #708390;
  --role-divider: #708390;
  --role-outline: #708390;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F2F4F7;
  --role-text: #121921;
  --role-btn-primary-text: #121921;
}

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.
{
    "vivid-cyan": "#0096FF",
    "deep-cobalt": "#005BBB",
    "slate-gray": "#708390",
    "pure-white": "#FFFFFF",
    "soft-gray": "#F2F4F7",
    "charcoal": "#121921"
}
Press Space to load new palette