Trustworthy Blue and Orange Color Palette for Creative Tech Brands |...

Trustworthy Blue Orange Color Palette

This palette blends strong blues with warm orange accents and grounded neutrals to reflect both the professional and creative dynamic of the inspiration image. The main blues establish trust and dependability, while the warm orange adds energy and approachability. Soft support colors gently extend the palette without overpowering it, maintaining clarity and balance for a versatile brand system suitable for tech or creative industries.

ComplementaryTechblueorangeneutraltech

Main (Brand) Colors

The main colors combine a dominant rich blue with an energetic orange and a clean sky blue as a split complement for a balanced and dynamic visual system.

PrimaryRoyal Blue

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

Royal Blue conveys trust, professionalism, and depth, anchoring the brand identity firmly.

HEX#2A4D9B

RGB42, 77, 155

HSL221, 57, 39

CMYK73, 50, 0, 39

SecondaryWarm Coral

RolesBtn Secondary Bg, Headline

Warm Coral injects energy and approachability, adding a vibrant but friendly contrast.

HEX#F2784B

RGB242, 120, 75

HSL16, 87, 62

CMYK0, 50, 69, 5

TertiarySky Blue

Sky Blue acts as a lighter, calming complement easing the contrast between the deeper blue and warm coral.

HEX#5DA9E9

RGB93, 169, 233

HSL207, 76, 64

CMYK60, 27, 0, 9

Support Colors

The support colors are softer complements that extend the palette with calming purples and fresh greens that do not compete but subtly balance the main colors.

Lavender Gray

RolesIcon, Border, Divider, Outline

Lavender Gray adds a muted purple tone that softens and balances the rich blue and vibrant coral main colors.

HEX#9183D1

RGB145, 131, 209

HSL251, 46, 67

CMYK31, 37, 0, 18

Moss Green

Moss Green introduces a natural and calming element, complementing the energetic coral without competing visually.

HEX#6CA46C

RGB108, 164, 108

HSL120, 24, 53

CMYK34, 0, 34, 36

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

Alabaster

RolesBg Dark

HEX#F7F9FC

RGB247, 249, 252

HSL216, 45, 98

CMYK2, 1, 0, 1

Charcoal

RolesText, Btn Secondary Text

HEX#1B1B1B

RGB27, 27, 27

HSL0, 0, 11

CMYK0, 0, 0, 89

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Royal Blue", "hex": "#2A4D9B", "role": "main", "cmyk": { "c": 73, "m": 50, "y": 0, "k": 39, "source": "colorfly" } }, { "name": "Warm Coral", "hex": "#F2784B", "role": "main", "cmyk": { "c": 0, "m": 50, "y": 69, "k": 5, "source": "colorfly" } }, { "name": "Sky Blue", "hex": "#5DA9E9", "role": "main", "cmyk": { "c": 60, "m": 27, "y": 0, "k": 9, "source": "colorfly" } }, { "name": "Lavender Gray", "hex": "#9183D1", "role": "support", "cmyk": { "c": 31, "m": 37, "y": 0, "k": 18, "source": "colorfly" } }, { "name": "Moss Green", "hex": "#6CA46C", "role": "support", "cmyk": { "c": 34, "m": 0, "y": 34, "k": 36, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Alabaster", "hex": "#F7F9FC", "role": "neutral", "cmyk": { "c": 2, "m": 1, "y": 0, "k": 1, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#1B1B1B", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 89, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-royal-blue: #2A4D9B; --color-warm-coral: #F2784B; --color-sky-blue: #5DA9E9; --color-lavender-gray: #9183D1; --color-moss-green: #6CA46C; --color-white: #FFFFFF; --color-alabaster: #F7F9FC; --color-charcoal: #1B1B1B; }

:root { --role-logo: #2A4D9B; --role-link: #2A4D9B; --role-btn-primary-bg: #2A4D9B; --role-btn-outlined-border: #2A4D9B; --role-btn-outlined-text: #2A4D9B; --role-btn-secondary-bg: #F2784B; --role-headline: #F2784B; --role-icon: #9183D1; --role-border: #9183D1; --role-divider: #9183D1; --role-outline: #9183D1; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #F7F9FC; --role-text: #1B1B1B; --role-btn-secondary-text: #1B1B1B; }

{ "royal-blue": "#2A4D9B", "warm-coral": "#F2784B", "sky-blue": "#5DA9E9", "lavender-gray": "#9183D1", "moss-green": "#6CA46C", "white": "#FFFFFF", "alabaster": "#F7F9FC", "charcoal": "#1B1B1B" }

<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: #2A4D9B; --gradient-partner: #8A9DC8; --gradient-accent: #9183D1; --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: #2A4D9B; --gradient-text-b: #8A9DC8; --gradient-text-c: #9183D1; 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>

Trustworthy Blue Orange Color Palette

Trustworthy Blue Orange Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system

Palette workspace

Trustworthy Blue Orange Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system