Purple High-Tech Color Palette for Technology Brands

Purple High Tech Color Palette

This purple high-tech palette combines vibrant and deep purples with subtle complementary support colors and balanced neutrals to establish a memorable and cutting-edge brand presence. The main purples convey innovation and creativity, while the support colors add finesse and clarity to digital interfaces.

MonochromaticTechpurplehigh-techtechnologyinnovation

Main (Brand) Colors

The main colors feature a rich deep purple, a vibrant bright violet, and a contrasting muted blue-purple, working together to create a distinctive and balanced high-tech visual identity.

PrimaryDeep Purple

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

Deep Purple anchors the brand with a sense of sophistication and technological depth.

HEX#5E2D79

RGB94, 45, 121

HSL279, 46, 33

CMYK22, 63, 0, 53

SecondaryBright Violet

RolesLink, Btn Secondary Bg, Headline

Bright Violet adds energy and innovation, encouraging engagement and modernity.

HEX#A14FD0

RGB161, 79, 208

HSL278, 58, 56

CMYK23, 62, 0, 18

TertiaryMuted Blue-Purple

Muted Blue-Purple provides a softer contrast that balances the brightness while maintaining a contemporary feel.

HEX#6B5B8A

RGB107, 91, 138

HSL260, 21, 45

CMYK22, 34, 0, 46

Support Colors

Support colors extend the palette with subtle complementary shades of blue and gray, enhancing legibility and interface elements without overpowering the main purples.

Slate Blue

RolesIcon, Border, Divider, Outline

Slate Blue complements the purples with a cool tone, supporting clear visual hierarchy and functional elements.

HEX#4A6572

RGB74, 101, 114

HSL200, 21, 37

CMYK35, 11, 0, 55

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 Gray

RolesBg Dark

HEX#F6F6F8

RGB246, 246, 248

HSL240, 13, 97

CMYK1, 1, 0, 3

Dark Charcoal

RolesText

HEX#2C2C2E

RGB44, 44, 46

HSL240, 2, 18

CMYK4, 4, 0, 82

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Deep Purple", "hex": "#5E2D79", "role": "main", "cmyk": { "c": 22, "m": 63, "y": 0, "k": 53, "source": "colorfly" } }, { "name": "Bright Violet", "hex": "#A14FD0", "role": "main", "cmyk": { "c": 23, "m": 62, "y": 0, "k": 18, "source": "colorfly" } }, { "name": "Muted Blue-Purple", "hex": "#6B5B8A", "role": "main", "cmyk": { "c": 22, "m": 34, "y": 0, "k": 46, "source": "colorfly" } }, { "name": "Slate Blue", "hex": "#4A6572", "role": "support", "cmyk": { "c": 35, "m": 11, "y": 0, "k": 55, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Light Gray", "hex": "#F6F6F8", "role": "neutral", "cmyk": { "c": 1, "m": 1, "y": 0, "k": 3, "source": "colorfly" } }, { "name": "Dark Charcoal", "hex": "#2C2C2E", "role": "neutral", "cmyk": { "c": 4, "m": 4, "y": 0, "k": 82, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-deep-purple: #5E2D79; --color-bright-violet: #A14FD0; --color-muted-blue-purple: #6B5B8A; --color-slate-blue: #4A6572; --color-pure-white: #FFFFFF; --color-light-gray: #F6F6F8; --color-dark-charcoal: #2C2C2E; }

:root { --role-logo: #5E2D79; --role-btn-primary-bg: #5E2D79; --role-btn-outlined-border: #5E2D79; --role-btn-outlined-text: #5E2D79; --role-link: #A14FD0; --role-btn-secondary-bg: #A14FD0; --role-headline: #A14FD0; --role-icon: #4A6572; --role-border: #4A6572; --role-divider: #4A6572; --role-outline: #4A6572; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #F6F6F8; --role-text: #2C2C2E; }

{ "deep-purple": "#5E2D79", "bright-violet": "#A14FD0", "muted-blue-purple": "#6B5B8A", "slate-blue": "#4A6572", "pure-white": "#FFFFFF", "light-gray": "#F6F6F8", "dark-charcoal": "#2C2C2E" }

<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: #5E2D79; --gradient-partner: #A68CB5; --gradient-accent: #4A6572; --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: #5E2D79; --gradient-text-b: #A68CB5; --gradient-text-c: #4A6572; 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>