Purple Blue Orange Color Palette for Creative Brands

Purple Blue Orange Color Palette

This vibrant color palette uses bold and energetic colors inspired by the original hues to create a distinct and balanced brand identity suitable for an energetic and contemporary brand. The interplay between purples and blues establishes a recognizable and cohesive color system, while warm orange accents bring dynamic contrast and call attention to key elements.

Split ComplementaryCreativepurpleblueorangevibrant

Main (Brand) Colors

The purple, blue, and orange hues form a triadic harmony that balances cool and warm tones to create a visually striking and memorable palette.

PrimaryPurple

RolesLogo, Link, Btn Primary Bg

Purple adds a sense of creativity, sophistication, and mystery to the brand's visual identity.

HEX#503c8b

RGB80, 60, 139

HSL255, 40, 39

CMYK42, 57, 0, 45

SecondaryDark Blue

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Dark Blue brings trust, professionalism, and stability, providing a strong foundation for secondary brand elements.

HEX#1a259b

RGB26, 37, 155

HSL235, 71, 35

CMYK83, 76, 0, 39

TertiaryOrange

RolesHeadline

Orange injects energy, enthusiasm, and warmth, making headlines and important accents stand out with vitality.

HEX#ee7030

RGB238, 112, 48

HSL20, 85, 56

CMYK0, 53, 80, 7

Support Colors

Support colors extend the main palette with softer blues and teal to balance the bold primaries and add practical versatility.

Steel Blue

RolesIcon, Border, Divider, Outline

Steel Blue complements the main blues by adding a muted yet harmonious accent suitable for UI elements.

HEX#4970b9

RGB73, 112, 185

HSL219, 44, 51

CMYK61, 39, 0, 27

Teal

Teal offers a refreshing contrast that balances warmth and coolness, subtly reinforcing the main palette without overpowering.

HEX#31a2ac

RGB49, 162, 172

HSL185, 56, 43

CMYK72, 6, 0, 33

Neutral Colors

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

White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#ffffff

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Light Gray

HEX#f5f5f5

RGB245, 245, 245

HSL0, 0, 96

CMYK0, 0, 0, 4

Charcoal

RolesBg Dark, 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": "Purple", "hex": "#503C8B", "role": "main", "cmyk": { "c": 42, "m": 57, "y": 0, "k": 45, "source": "colorfly" } }, { "name": "Dark Blue", "hex": "#1A259B", "role": "main", "cmyk": { "c": 83, "m": 76, "y": 0, "k": 39, "source": "colorfly" } }, { "name": "Orange", "hex": "#EE7030", "role": "main", "cmyk": { "c": 0, "m": 53, "y": 80, "k": 7, "source": "colorfly" } }, { "name": "Steel Blue", "hex": "#4970B9", "role": "support", "cmyk": { "c": 61, "m": 39, "y": 0, "k": 27, "source": "colorfly" } }, { "name": "Teal", "hex": "#31A2AC", "role": "support", "cmyk": { "c": 72, "m": 6, "y": 0, "k": 33, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Light Gray", "hex": "#F5F5F5", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 4, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#121212", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 93, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-purple: #503c8b; --color-dark-blue: #1a259b; --color-orange: #ee7030; --color-steel-blue: #4970b9; --color-teal: #31a2ac; --color-white: #ffffff; --color-light-gray: #f5f5f5; --color-charcoal: #121212; }

:root { --role-logo: #503c8b; --role-link: #503c8b; --role-btn-primary-bg: #503c8b; --role-btn-secondary-bg: #1a259b; --role-btn-outlined-border: #1a259b; --role-btn-outlined-text: #1a259b; --role-headline: #ee7030; --role-icon: #4970b9; --role-border: #4970b9; --role-divider: #4970b9; --role-outline: #4970b9; --role-bg-light: #ffffff; --role-btn-primary-text: #ffffff; --role-btn-secondary-text: #ffffff; --role-bg-dark: #121212; --role-text: #121212; }

{ "purple": "#503c8b", "dark-blue": "#1a259b", "orange": "#ee7030", "steel-blue": "#4970b9", "teal": "#31a2ac", "white": "#ffffff", "light-gray": "#f5f5f5", "charcoal": "#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: #503C8B; --gradient-partner: #9F94BF; --gradient-accent: #4970B9; --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: #503C8B; --gradient-text-b: #9F94BF; --gradient-text-c: #4970B9; 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>