Cyber Blue Purple Color Palette for Communications and Events Brandin...

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

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

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Midnight Blue", "hex": "#0A1F44", "role": "main", "cmyk": { "c": 85, "m": 54, "y": 0, "k": 73, "source": "colorfly" } }, { "name": "Deep Violet", "hex": "#391A5E", "role": "main", "cmyk": { "c": 39, "m": 72, "y": 0, "k": 63, "source": "colorfly" } }, { "name": "Dark Lavender", "hex": "#522F6B", "role": "main", "cmyk": { "c": 23, "m": 56, "y": 0, "k": 58, "source": "colorfly" } }, { "name": "Slate Cyan", "hex": "#2C6B7F", "role": "support", "cmyk": { "c": 65, "m": 16, "y": 0, "k": 50, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Light Cloud", "hex": "#F5F7FA", "role": "neutral", "cmyk": { "c": 2, "m": 1, "y": 0, "k": 2, "source": "colorfly" } }, { "name": "Charcoal Navy", "hex": "#121B27", "role": "neutral", "cmyk": { "c": 54, "m": 31, "y": 0, "k": 85, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

: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; }

: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; }

{ "midnight-blue": "#0A1F44", "deep-violet": "#391A5E", "dark-lavender": "#522F6B", "slate-cyan": "#2C6B7F", "pure-white": "#FFFFFF", "light-cloud": "#F5F7FA", "charcoal-navy": "#121B27" }

<div class="colorfly-moving-gradient-bg"> <span class="colorfly-gradient-spark" aria-hidden="true"></span> <div> <small>Motion gradient</small> <h2>Gradient background</h2> <p>A moving brand gradient built from your palette.</p> </div> </div> <style> .colorfly-moving-gradient-bg { --gradient-anchor: #0A1F44; --gradient-partner: #788498; --gradient-accent: #2C6B7F; --gradient-text: #FFFFFF; position: relative; display: grid; place-items: center; min-height: 340px; overflow: hidden; padding: 42px; color: var(--gradient-text); border-radius: 28px; background: radial-gradient(circle at 20% 82%, color-mix(in srgb, var(--gradient-accent) 48%, transparent) 0 14%, transparent 42%), radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--gradient-partner) 52%, transparent) 0 16%, transparent 46%), linear-gradient(135deg, var(--gradient-anchor), color-mix(in srgb, var(--gradient-anchor) 72%, black 18%), var(--gradient-partner), var(--gradient-anchor)); background-size: 160% 160%, 180% 180%, 240% 240%; animation: colorfly-gradient-bg 10.5s cubic-bezier(.72, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg > div { position: relative; z-index: 1; max-width: 640px; text-align: center; } .colorfly-moving-gradient-bg::before, .colorfly-moving-gradient-bg::after, .colorfly-gradient-spark { content: ""; position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; } .colorfly-moving-gradient-bg::before { left: -10%; top: -18%; width: min(520px, 72%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-partner) 88%, white 8%) 0%, transparent 66%), radial-gradient(circle at 68% 32%, color-mix(in srgb, var(--gradient-accent) 58%, white 10%) 0%, transparent 38%); opacity: .86; animation: colorfly-gradient-orb-one 11s cubic-bezier(.65, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg::after { right: -12%; bottom: -24%; width: min(620px, 82%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-accent) 86%, white 6%) 0%, transparent 68%), radial-gradient(circle at 28% 72%, color-mix(in srgb, var(--gradient-partner) 62%, white 8%) 0%, transparent 42%); opacity: .78; animation: colorfly-gradient-orb-two 12.8s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-spark { left: 42%; top: 44%; width: min(360px, 54%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-anchor) 64%, white 12%) 0%, transparent 62%); opacity: .46; animation: colorfly-gradient-spark 9.2s cubic-bezier(.62, 0, .2, 1) infinite; } @keyframes colorfly-gradient-bg { 0%, 100% { background-position: 0% 46%, 100% 24%, 0% 50%; } 18% { background-position: 44% 88%, 58% 12%, 34% 22%; } 39% { background-position: 86% 38%, 18% 74%, 86% 64%; } 63% { background-position: 26% 16%, 84% 92%, 42% 100%; } 82% { background-position: 68% 68%, 32% 30%, 100% 34%; } } @keyframes colorfly-gradient-orb-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 22% { transform: translate3d(78%, 22%, 0) scale(1.12); } 47% { transform: translate3d(44%, 86%, 0) scale(.92); } 72% { transform: translate3d(112%, 56%, 0) scale(1.2); } } @keyframes colorfly-gradient-orb-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); } 19% { transform: translate3d(-48%, -18%, 0) scale(.9); } 53% { transform: translate3d(-92%, -62%, 0) scale(1.14); } 79% { transform: translate3d(-22%, -86%, 0) scale(.98); } } @keyframes colorfly-gradient-spark { 0%, 100% { transform: translate3d(-12%, -8%, 0) scale(.84); } 28% { transform: translate3d(52%, -34%, 0) scale(1.08); } 58% { transform: translate3d(-44%, 38%, 0) scale(.96); } 84% { transform: translate3d(20%, 28%, 0) scale(1.18); } } </style>

<div class="colorfly-gradient-text-card"> <small>Gradient type</small> <h2>Gradient on text</h2> <p>A moving text gradient built from your palette.</p> </div> <style> .colorfly-gradient-text-card { --gradient-text-a: #0A1F44; --gradient-text-b: #788498; --gradient-text-c: #2C6B7F; position: relative; display: grid; place-items: center; min-height: 310px; overflow: hidden; padding: 42px; text-align: center; border-radius: 28px; background: radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--gradient-text-a) 8%, transparent), transparent 28%), linear-gradient(135deg, #fff, #fbfbfd); } .colorfly-gradient-text-card::before, .colorfly-gradient-text-card::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(2px); } .colorfly-gradient-text-card::before { left: 9%; top: 15%; width: min(330px, 48%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-a) 20%, transparent) 0%, transparent 68%); animation: colorfly-gradient-text-glow-one 8s cubic-bezier(.62, 0, .2, 1) infinite; } .colorfly-gradient-text-card::after { right: 7%; bottom: 6%; width: min(360px, 52%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-c) 18%, transparent) 0%, transparent 70%); animation: colorfly-gradient-text-glow-two 9.5s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-text-card small, .colorfly-gradient-text-card p { position: relative; z-index: 1; color: #65616d; } .colorfly-gradient-text-card h2 { position: relative; z-index: 1; margin: 10px 0 12px; color: transparent; font-size: clamp(42px, 8vw, 96px); line-height: .92; background: radial-gradient(circle at 18% 50%, var(--gradient-text-b) 0 12%, transparent 38%), radial-gradient(circle at 82% 44%, var(--gradient-text-c) 0 14%, transparent 40%), linear-gradient(100deg, var(--gradient-text-a), var(--gradient-text-b), var(--gradient-text-c), var(--gradient-text-a)); background-size: 220% 220%, 240% 240%, 280% 100%; -webkit-background-clip: text; background-clip: text; animation: colorfly-gradient-text-shift 6.2s cubic-bezier(.68, 0, .22, 1) infinite; } @keyframes colorfly-gradient-text-shift { 0%, 100% { background-position: 8% 52%, 92% 42%, 0% 50%; } 27% { background-position: 78% 18%, 28% 82%, 42% 50%; } 61% { background-position: 36% 92%, 86% 24%, 100% 50%; } 84% { background-position: 92% 48%, 18% 40%, 58% 50%; } } @keyframes colorfly-gradient-text-glow-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(.92); } 42% { transform: translate3d(80%, 32%, 0) scale(1.12); } 72% { transform: translate3d(28%, 86%, 0) scale(.98); } } @keyframes colorfly-gradient-text-glow-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 36% { transform: translate3d(-62%, -18%, 0) scale(.9); } 76% { transform: translate3d(-36%, -78%, 0) scale(1.12); } } </style>