Electric Blue Tech Color Palette for Modern Digital Brands

Electric Blue Tech Color Palette

This color palette is inspired by the bold blue tones and subtle neutrals from the image, creating a dynamic and modern system that works well for tech or digital brands. The strong blues deliver trust and professionalism, while the support colors add depth and balance without competing with the main colors. The neutrals provide contrast and maintain readability across digital interfaces.

MonochromaticTechblueelectric bluenavydark gray

Main (Brand) Colors

The main colors are strong blues that create a recognizable and energetic tech-inspired identity with harmonious undertones enhancing brand presence.

PrimaryNavy Blue

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline

Navy Blue provides a deep, trustworthy foundation that communicates professionalism and reliability for the brand.

HEX#0A3D91

RGB10, 61, 145

HSL217, 87, 30

CMYK93, 58, 0, 43

SecondaryElectric Blue

RolesBtn Secondary Bg

Electric Blue adds vibrancy and energy, giving the brand a modern and approachable feel.

HEX#0077FF

RGB0, 119, 255

HSL212, 100, 50

CMYK100, 53, 0, 0

TertiaryDeep Cerulean

Deep Cerulean serves as a nuanced accent that supports and balances the brighter blues with added depth.

HEX#004080

RGB0, 64, 128

HSL210, 100, 25

CMYK100, 50, 0, 50

Support Colors

These support colors are carefully selected blue-gray tones that extend the main palette by adding subtle sophistication and visual calm, reinforcing the brand's tech identity without overpowering the main blues.

Blue Gray

RolesIcon, Border, Divider, Outline

Blue Gray complements the main blues by providing softer contrast and defining interface elements distinctly.

HEX#2E6EBB

RGB46, 110, 187

HSL213, 61, 46

CMYK75, 41, 0, 27

Steel Blue

Steel Blue offers a muted variation that blends well with both navy and electric blues for layered design elements.

HEX#1853B7

RGB24, 83, 183

HSL218, 77, 41

CMYK87, 55, 0, 28

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

Light Gray

RolesBg Dark

HEX#F3F6F9

RGB243, 246, 249

HSL210, 33, 96

CMYK2, 1, 0, 2

Charcoal Black

RolesText, Btn Secondary Text

HEX#1A1A1A

RGB26, 26, 26

HSL0, 0, 10

CMYK0, 0, 0, 90

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Navy Blue", "hex": "#0A3D91", "role": "main", "cmyk": { "c": 93, "m": 58, "y": 0, "k": 43, "source": "colorfly" } }, { "name": "Electric Blue", "hex": "#0077FF", "role": "main", "cmyk": { "c": 100, "m": 53, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Deep Cerulean", "hex": "#004080", "role": "main", "cmyk": { "c": 100, "m": 50, "y": 0, "k": 50, "source": "colorfly" } }, { "name": "Blue Gray", "hex": "#2E6EBB", "role": "support", "cmyk": { "c": 75, "m": 41, "y": 0, "k": 27, "source": "colorfly" } }, { "name": "Steel Blue", "hex": "#1853B7", "role": "support", "cmyk": { "c": 87, "m": 55, "y": 0, "k": 28, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Light Gray", "hex": "#F3F6F9", "role": "neutral", "cmyk": { "c": 2, "m": 1, "y": 0, "k": 2, "source": "colorfly" } }, { "name": "Charcoal Black", "hex": "#1A1A1A", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 90, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-navy-blue: #0A3D91; --color-electric-blue: #0077FF; --color-deep-cerulean: #004080; --color-blue-gray: #2E6EBB; --color-steel-blue: #1853B7; --color-white: #FFFFFF; --color-light-gray: #F3F6F9; --color-charcoal-black: #1A1A1A; }

:root { --role-logo: #0A3D91; --role-link: #0A3D91; --role-btn-primary-bg: #0A3D91; --role-btn-outlined-border: #0A3D91; --role-btn-outlined-text: #0A3D91; --role-headline: #0A3D91; --role-btn-secondary-bg: #0077FF; --role-icon: #2E6EBB; --role-border: #2E6EBB; --role-divider: #2E6EBB; --role-outline: #2E6EBB; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #F3F6F9; --role-text: #1A1A1A; --role-btn-secondary-text: #1A1A1A; }

{ "navy-blue": "#0A3D91", "electric-blue": "#0077FF", "deep-cerulean": "#004080", "blue-gray": "#2E6EBB", "steel-blue": "#1853B7", "white": "#FFFFFF", "light-gray": "#F3F6F9", "charcoal-black": "#1A1A1A" }

<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: #0A3D91; --gradient-partner: #7894C3; --gradient-accent: #2E6EBB; --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: #0A3D91; --gradient-text-b: #7894C3; --gradient-text-c: #2E6EBB; 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>