Midnight Blue#0A1F44
Deep Violet#391A5E
Dark Lavender#522F6B
Slate Cyan#2C6B7F
Palette direction

Cyber Blue Purple Color Palette

This palette uses deep cyber-inspired blues and purples as main colors to express a dark, serious tone with a modern technological edge. Support colors in muted cyan and slate extend the mood while providing subtle accents, and neutral colors offer strong contrast for text and backgrounds to ensure readability and clarity in digital interfaces.

AnalogousCreativecyberdarkserioustechnology
palette-preview.example
Creative color direction

Cyber Blue Purple Color Palette

This palette uses deep cyber-inspired blues and purples as main colors to express a dark, serious tone with a modern technological edge. Support colors in muted cyan and slate extend the mood while providing subtle accents, and neutral colors offer strong contrast for text and backgrounds to ensure readability and clarity in digital interfaces.

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 Midnight Blue #0A1F4416.2:1 Excellent
Logo Charcoal Navy #121B27on Pure White #FFFFFF17.3:1 Excellent
Logo Pure White #FFFFFFon Slate Cyan #2C6B7F6.0:1 Strong
Icon color
BackgroundMidnight Blue#0A1F44TextPure White#FFFFFF
Primary Button16.25:1
AAA

Best for the main action users should notice first.

BackgroundDeep Violet#391A5ETextPure White#FFFFFF
Secondary Button14.16:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextDeep Violet#391A5E
Outlined Button14.16:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextDeep Violet#391A5E
Text Button14.16:1
AAA

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

Palette composition7 colorsAnalogous color relationship
9:41Cyber Blue Purple 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.

CCyber Blue Purple Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors form a cohesive dark and serious palette anchored in deep cyber blues and violet purples, creating a recognizable look that signals advanced technology and professionalism.

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.Midnight Blue #0A1F44
HeadlineUsed for main titles and key messages.Dark Lavender #522F6B
LinkUsed for links and interactive text.Deep Violet #391A5E

Buttons

Primary Button
BackgroundMidnight Blue #0A1F44
TextPure White #FFFFFF
Secondary Button
BackgroundDeep Violet #391A5E
TextPure White #FFFFFF
Outlined Button
BackgroundMidnight Blue #0A1F44
TextDeep Violet #391A5E

Interface

TextDefault readable body text.Charcoal Navy #121B27
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Light Cloud #F5F7FA
IconSmall interface icons and marks.Slate Cyan #2C6B7F
BorderCards, inputs, and component borders.Slate Cyan #2C6B7F
DividerSubtle separators between content.Slate Cyan #2C6B7F
OutlineFocus rings and emphasis outlines.Slate Cyan #2C6B7F

Palette Colors

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

Main (Brand) Colors

The main colors form a cohesive dark and serious palette anchored in deep cyber blues and violet purples, creating a recognizable look that signals advanced technology and professionalism.

PrimaryMidnight Blue

RolesLogo, Btn Primary Bg, Btn Outlined Border

Midnight Blue lends a strong, serious foundation conveying trust and technical sophistication for the brand's identity elements.

HEX#0A1F44
RGB10, 31, 68
HSL218, 74, 15
CMYK85, 54, 0, 73
SecondaryDeep Violet

RolesLink, Btn Secondary Bg, Btn Outlined Text

Deep Violet adds a rich cyber tone that evokes creativity and mystery, complementing the blue to maintain a tech-driven yet refined aura.

HEX#391A5E
RGB57, 26, 94
HSL267, 57, 24
CMYK39, 72, 0, 63
TertiaryDark Lavender

RolesHeadline

Dark Lavender serves as an accent for headlines, introducing a subtle vibrancy that balances the darkness and adds depth to typography.

HEX#522F6B
RGB82, 47, 107
HSL275, 39, 30
CMYK23, 56, 0, 58

Support Colors

Support colors in muted cyan and soft slate subtly reinforce the main colors by providing neutral yet distinct accents, enhancing usability without distracting from the core palette.

Slate Cyan

RolesIcon, Border, Divider, Outline

Slate Cyan offers a muted cool tone that complements the dark blues and purples, anchoring interface elements with subtle visual distinction.

HEX#2C6B7F
RGB44, 107, 127
HSL194, 49, 34
CMYK65, 16, 0, 50

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Light Cloud

RolesBg Dark

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

RolesText

HEX#121B27
RGB18, 27, 39
HSL214, 37, 11
CMYK54, 31, 0, 85

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-midnight-blue: #0A1F44;
  --color-deep-violet: #391A5E;
  --color-dark-lavender: #522F6B;
  --color-slate-cyan: #2C6B7F;
  --color-pure-white: #FFFFFF;
  --color-light-cloud: #F5F7FA;
  --color-charcoal-navy: #121B27;
}

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: #0A1F44;
  --role-btn-primary-bg: #0A1F44;
  --role-btn-outlined-border: #0A1F44;
  --role-link: #391A5E;
  --role-btn-secondary-bg: #391A5E;
  --role-btn-outlined-text: #391A5E;
  --role-headline: #522F6B;
  --role-icon: #2C6B7F;
  --role-border: #2C6B7F;
  --role-divider: #2C6B7F;
  --role-outline: #2C6B7F;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F5F7FA;
  --role-text: #121B27;
}

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.
{
    "midnight-blue": "#0A1F44",
    "deep-violet": "#391A5E",
    "dark-lavender": "#522F6B",
    "slate-cyan": "#2C6B7F",
    "pure-white": "#FFFFFF",
    "light-cloud": "#F5F7FA",
    "charcoal-navy": "#121B27"
}
Press Space to load new palette