Blue Orange Shield Color Palette for Tech Brands

Blue Orange Shield Color Palette

This color palette draws inspiration from the blue and orange gradient shield emblem, combining cool and warm tones to create a harmonious and trustworthy visual identity. The main colors balance professionalism and energy, while the support colors softly extend the palette for subtle interface details. Neutrals ensure strong readability and structural clarity across applications.

ComplementaryTechblueorangegradientshield

Main (Brand) Colors

The palette uses a split complementary scheme balancing vibrant blue hues with warm orange-red tones to create a dynamic yet cohesive look.

PrimaryRoyal Blue

RolesLink, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Logo

Royal Blue communicates trust, reliability, and professionalism essential for tech branding.

HEX#2B72D9

RGB43, 114, 217

HSL216, 70, 51

CMYK80, 47, 0, 15

SecondaryPumpkin Orange

RolesBtn Secondary Bg

Pumpkin Orange introduces warmth and energy, providing a lively contrast and encouraging action.

HEX#F07B2B

RGB240, 123, 43

HSL24, 87, 55

CMYK0, 49, 82, 6

TertiarySteel Blue

RolesHeadline

Steel Blue acts as a supportive tone to Royal Blue, ideal for headlines that need emphasis without overpowering.

HEX#315BA0

RGB49, 91, 160

HSL217, 53, 41

CMYK69, 43, 0, 37

Support Colors

Support colors extend the main palette with softer blue and orange variations to balance and enrich UI elements like icons and borders.

Sky Blue

RolesIcon, Border, Divider, Outline

Sky Blue complements Royal Blue with a lighter, approachable accent used for subtle interface details.

HEX#7BA9E9

RGB123, 169, 233

HSL215, 71, 70

CMYK47, 27, 0, 9

Light Apricot

Light Apricot balances Pumpkin Orange with a muted tone that enhances warmth without competing visually.

HEX#EAB189

RGB234, 177, 137

HSL25, 70, 73

CMYK0, 24, 41, 8

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Cloud White

RolesBg Dark

HEX#F6F8FA

RGB246, 248, 250

HSL210, 29, 97

CMYK2, 1, 0, 2

Charcoal

RolesText, Btn Secondary Text

HEX#1F2A37

RGB31, 42, 55

HSL213, 28, 17

CMYK44, 24, 0, 78

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Royal Blue", "hex": "#2B72D9", "role": "main", "cmyk": { "c": 80, "m": 47, "y": 0, "k": 15, "source": "colorfly" } }, { "name": "Pumpkin Orange", "hex": "#F07B2B", "role": "main", "cmyk": { "c": 0, "m": 49, "y": 82, "k": 6, "source": "colorfly" } }, { "name": "Steel Blue", "hex": "#315BA0", "role": "main", "cmyk": { "c": 69, "m": 43, "y": 0, "k": 37, "source": "colorfly" } }, { "name": "Sky Blue", "hex": "#7BA9E9", "role": "support", "cmyk": { "c": 47, "m": 27, "y": 0, "k": 9, "source": "colorfly" } }, { "name": "Light Apricot", "hex": "#EAB189", "role": "support", "cmyk": { "c": 0, "m": 24, "y": 41, "k": 8, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Cloud White", "hex": "#F6F8FA", "role": "neutral", "cmyk": { "c": 2, "m": 1, "y": 0, "k": 2, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#1F2A37", "role": "neutral", "cmyk": { "c": 44, "m": 24, "y": 0, "k": 78, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-royal-blue: #2B72D9; --color-pumpkin-orange: #F07B2B; --color-steel-blue: #315BA0; --color-sky-blue: #7BA9E9; --color-light-apricot: #EAB189; --color-pure-white: #FFFFFF; --color-cloud-white: #F6F8FA; --color-charcoal: #1F2A37; }

:root { --role-link: #2B72D9; --role-btn-primary-bg: #2B72D9; --role-btn-outlined-border: #2B72D9; --role-btn-outlined-text: #2B72D9; --role-logo: #2B72D9; --role-btn-secondary-bg: #F07B2B; --role-headline: #315BA0; --role-icon: #7BA9E9; --role-border: #7BA9E9; --role-divider: #7BA9E9; --role-outline: #7BA9E9; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #F6F8FA; --role-text: #1F2A37; --role-btn-secondary-text: #1F2A37; }

{ "royal-blue": "#2B72D9", "pumpkin-orange": "#F07B2B", "steel-blue": "#315BA0", "sky-blue": "#7BA9E9", "light-apricot": "#EAB189", "pure-white": "#FFFFFF", "cloud-white": "#F6F8FA", "charcoal": "#1F2A37" }

<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: #2B72D9; --gradient-partner: #8AB1EA; --gradient-accent: #7BA9E9; --gradient-text: #000000; 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: #2B72D9; --gradient-text-b: #4B607E; --gradient-text-c: #7BA9E9; 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>