Neon Tech Purple Color Palette for Futuristic Digital Brands

Neon Tech Purple Color Palette

This palette draws inspiration from vibrant neon purples and blues contrasted with bright pink accents, creating a futuristic and tech-forward color identity suitable for digital platforms. The main colors establish a high-energy and modern aesthetic, while the support colors provide subtle depth and balance. Neutrals maintain readability and structure, grounding the palette with solid light and dark backgrounds and clear text contrast.

CustomTechneonpurpletechnologyfuturistic

Main (Brand) Colors

The main colors blend a vivid electric purple, bright electric blue, and neon pink, creating a dynamic triadic harmony that energizes and defines brand recognition.

PrimaryElectric Purple

RolesLogo, Btn Primary Bg, Btn Outlined Border

Electric Purple infuses the brand with creativity and innovation, serving as a memorable and bold visual anchor.

HEX#7F00FF

RGB127, 0, 255

HSL270, 100, 50

CMYK50, 100, 0, 0

SecondaryElectric Blue

RolesLink, Btn Secondary Bg, Headline

Electric Blue conveys clarity and trust, balancing vibrancy with professionalism for interactive elements.

HEX#00B0FF

RGB0, 176, 255

HSL199, 100, 50

CMYK100, 31, 0, 0

TertiaryNeon Pink

RolesBtn Outlined Text

Neon Pink adds an energetic and playful accent that highlights calls to action and interactive outlines.

HEX#FF3CAC

RGB255, 60, 172

HSL326, 100, 62

CMYK0, 76, 33, 0

Support Colors

Support colors extend the main palette with deep purples and muted blue-grays that provide subtle layering and calm contrast to the electric main colors.

Indigo

RolesIcon, Border, Divider

Indigo anchors the visuals with a darker purple tone, reinforcing brand depth without competing with main colors.

HEX#4B0082

RGB75, 0, 130

HSL275, 100, 25

CMYK42, 100, 0, 49

Slate Blue

RolesOutline

Slate Blue introduces a desaturated blue undertone that smooths transitions and complements Electric Blue's brightness.

HEX#2F4F6F

RGB47, 79, 111

HSL210, 41, 31

CMYK58, 29, 0, 56

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

Cultured

HEX#F2F2F2

RGB242, 242, 242

HSL0, 0, 95

CMYK0, 0, 0, 5

Eerie Black

RolesBg Dark, Text, Btn Secondary Text

HEX#121212

RGB18, 18, 18

HSL0, 0, 7

CMYK0, 0, 0, 93

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Electric Purple", "hex": "#7F00FF", "role": "main", "cmyk": { "c": 50, "m": 100, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Electric Blue", "hex": "#00B0FF", "role": "main", "cmyk": { "c": 100, "m": 31, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Neon Pink", "hex": "#FF3CAC", "role": "main", "cmyk": { "c": 0, "m": 76, "y": 33, "k": 0, "source": "colorfly" } }, { "name": "Indigo", "hex": "#4B0082", "role": "support", "cmyk": { "c": 42, "m": 100, "y": 0, "k": 49, "source": "colorfly" } }, { "name": "Slate Blue", "hex": "#2F4F6F", "role": "support", "cmyk": { "c": 58, "m": 29, "y": 0, "k": 56, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Cultured", "hex": "#F2F2F2", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 5, "source": "colorfly" } }, { "name": "Eerie Black", "hex": "#121212", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 93, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-electric-purple: #7F00FF; --color-electric-blue: #00B0FF; --color-neon-pink: #FF3CAC; --color-indigo: #4B0082; --color-slate-blue: #2F4F6F; --color-white: #FFFFFF; --color-cultured: #F2F2F2; --color-eerie-black: #121212; }

:root { --role-logo: #7F00FF; --role-btn-primary-bg: #7F00FF; --role-btn-outlined-border: #7F00FF; --role-link: #00B0FF; --role-btn-secondary-bg: #00B0FF; --role-headline: #00B0FF; --role-btn-outlined-text: #FF3CAC; --role-icon: #4B0082; --role-border: #4B0082; --role-divider: #4B0082; --role-outline: #2F4F6F; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #121212; --role-text: #121212; --role-btn-secondary-text: #121212; }

{ "electric-purple": "#7F00FF", "electric-blue": "#00B0FF", "neon-pink": "#FF3CAC", "indigo": "#4B0082", "slate-blue": "#2F4F6F", "white": "#FFFFFF", "cultured": "#F2F2F2", "eerie-black": "#121212" }

<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: #7F00FF; --gradient-partner: #B973FF; --gradient-accent: #4B0082; --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: #7F00FF; --gradient-text-b: #B973FF; --gradient-text-c: #4B0082; 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>