Royal Blue#0B3D91
Vivid Cyan#1AC6FF
Bright Aqua#00D8FF
Steel Blue#176DAB
Sky Blue#4AA6DC
Palette direction

Electric Blue Cyan Color Palette

This palette blends deep, vibrant blues and cyan tones to evoke a modern, tech-savvy feeling with bright accent colors balanced by soft, supportive blues and grounded by a trio of neutrals that provide visual clarity and contrast. The combination is harmonious and distinctive, inspired by the image's cool and luminous ambiance.

AnalogousTechelectric bluecyanmoderntech
palette-preview.example
Tech color direction

Electric Blue Cyan Color Palette

This palette blends deep, vibrant blues and cyan tones to evoke a modern, tech-savvy feeling with bright accent colors balanced by soft, supportive blues and grounded by a trio of neutrals that provide visual clarity and contrast. The combination is harmonious and distinctive, inspired by the image's cool and luminous ambiance.

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 Charcoal #101820on Bright Aqua #00D8FF10.5:1 Excellent
Logo White #FFFFFFon Royal Blue #0B3D9110.0:1 Excellent
Logo Charcoal #101820on Vivid Cyan #1AC6FF9.0:1 Excellent
Logo Charcoal #101820on White #FFFFFF17.9:1 Excellent
Icon color
BackgroundRoyal Blue#0B3D91TextWhite#FFFFFF
Primary Button10.04:1
AAA

Best for the main action users should notice first.

BackgroundVivid Cyan#1AC6FFTextCharcoal#101820
Secondary Button9.00:1
AAA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextBright Aqua#00D8FF
Outlined Button1.71:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextRoyal Blue#0B3D91
Text Button10.04:1
AAA

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

Palette composition8 colorsAnalogous color relationship
9:41Electric Blue Cyan 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.

CElectric Blue Cyan Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine deep electric blue with vibrant cyan and bright aqua to create a luminous and energetic tech-inspired color harmony that is recognizable and fresh.

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.Royal Blue #0B3D91
HeadlineUsed for main titles and key messages.Vivid Cyan #1AC6FF
LinkUsed for links and interactive text.Royal Blue #0B3D91

Buttons

Primary Button
BackgroundRoyal Blue #0B3D91
TextWhite #FFFFFF
Secondary Button
BackgroundVivid Cyan #1AC6FF
TextCharcoal #101820
Outlined Button
BackgroundBright Aqua #00D8FF
TextBright Aqua #00D8FF

Interface

TextDefault readable body text.Charcoal #101820
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Sky Blue #4AA6DC
IconSmall interface icons and marks.Steel Blue #176DAB
BorderCards, inputs, and component borders.Steel Blue #176DAB
DividerSubtle separators between content.Steel Blue #176DAB
OutlineFocus rings and emphasis outlines.Steel Blue #176DAB

Palette Colors

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

Main (Brand) Colors

The main colors combine deep electric blue with vibrant cyan and bright aqua to create a luminous and energetic tech-inspired color harmony that is recognizable and fresh.

PrimaryRoyal Blue

RolesLogo, Link, Btn Primary Bg

Royal Blue conveys trust and stability, making it ideal for a memorable logo and primary button background color.

HEX#0B3D91
RGB11, 61, 145
HSL218, 86, 31
CMYK92, 58, 0, 43
SecondaryVivid Cyan

RolesBtn Secondary Bg, Headline

Vivid Cyan adds a fresh and energetic vibe, providing strong contrast for readability on dark backgrounds and highlighting headlines.

HEX#1AC6FF
RGB26, 198, 255
HSL195, 100, 55
CMYK90, 22, 0, 0
TertiaryBright Aqua

RolesBtn Outlined Border, Btn Outlined Text

Bright Aqua intensifies vibrancy and balances the deeper blues as secondary button text and outlined elements, enhancing visual interest.

HEX#00D8FF
RGB0, 216, 255
HSL189, 100, 50
CMYK100, 15, 0, 0

Support Colors

Support colors offer softer tonal blues that complement the main vivid hues, reinforcing the palette with subtle accents and enhancing depth without overpowering.

Steel Blue

RolesIcon, Border, Divider, Outline

Steel Blue provides a muted but related blue tone that adds depth and serves as subtle visual separators like borders and icons.

HEX#176DAB
RGB23, 109, 171
HSL205, 76, 38
CMYK87, 36, 0, 33
Sky Blue

RolesBg Dark

Sky Blue serves as a dark background that supports the main colors with a cooler, less saturated tone for interface backgrounds.

HEX#4AA6DC
RGB74, 166, 220
HSL202, 68, 58
CMYK66, 25, 0, 14

Neutral Colors

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

White

RolesBg Light, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Alice Blue
HEX#F5F7FA
RGB245, 247, 250
HSL216, 33, 97
CMYK2, 1, 0, 2
Charcoal

RolesText, Btn Secondary Text

HEX#101820
RGB16, 24, 32
HSL210, 33, 9
CMYK50, 25, 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-royal-blue: #0B3D91;
  --color-vivid-cyan: #1AC6FF;
  --color-bright-aqua: #00D8FF;
  --color-steel-blue: #176DAB;
  --color-sky-blue: #4AA6DC;
  --color-white: #FFFFFF;
  --color-alice-blue: #F5F7FA;
  --color-charcoal: #101820;
}

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: #0B3D91;
  --role-link: #0B3D91;
  --role-btn-primary-bg: #0B3D91;
  --role-btn-secondary-bg: #1AC6FF;
  --role-headline: #1AC6FF;
  --role-btn-outlined-border: #00D8FF;
  --role-btn-outlined-text: #00D8FF;
  --role-icon: #176DAB;
  --role-border: #176DAB;
  --role-divider: #176DAB;
  --role-outline: #176DAB;
  --role-bg-dark: #4AA6DC;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-text: #101820;
  --role-btn-secondary-text: #101820;
}

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.
{
    "royal-blue": "#0B3D91",
    "vivid-cyan": "#1AC6FF",
    "bright-aqua": "#00D8FF",
    "steel-blue": "#176DAB",
    "sky-blue": "#4AA6DC",
    "white": "#FFFFFF",
    "alice-blue": "#F5F7FA",
    "charcoal": "#101820"
}
Press Space to load new palette