Deep Blue Gradient Color Palette for Technology Brands

Deep Blue Gradient Color Palette

This palette is inspired by the rich spectrum of blue tones from deep navy to soft sky blues seen in the image, creating a cohesive and calming blue-anchored brand system with subtle accents for balance. It uses cool blues to convey trust and tranquility while supporting colors add depth and versatility. Neutral shades ground the palette with crisp whites and dark charcoal for text and backgrounds.

MonochromaticTechbluegradienttechnologytrust

Main (Brand) Colors

The main colors are a gradient of blues from deep navy to sky blue, offering a versatile, harmonious system that conveys stability, trust, and calmness typical for tech-oriented branding.

PrimaryNavy Blue

RolesLogo, Link, Btn Primary Bg, Headline

Navy Blue embodies confidence and professionalism, making it ideal for a brand logo and primary button background.

HEX#001f4d

RGB0, 31, 77

HSL216, 100, 15

CMYK100, 60, 0, 70

SecondaryCobalt Blue

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Cobalt Blue adds vibrancy and approachability to secondary buttons and outlines without overpowering the primary navy.

HEX#295caa

RGB41, 92, 170

HSL216, 61, 41

CMYK76, 46, 0, 33

TertiarySky Blue

Sky Blue serves as a lighter accent in headlines or supporting text, softening the overall color experience.

HEX#78a2da

RGB120, 162, 218

HSL214, 57, 66

CMYK45, 26, 0, 15

Support Colors

Support colors extend the main blues with muted cyan and steel shades to balance the palette with subtle contrast and enhance interface elements.

Steel Blue

RolesIcon, Border, Divider, Outline

Steel Blue complements the blues by providing calm, muted accents for borders and icons, reinforcing a polished look.

HEX#4c7b9c

RGB76, 123, 156

HSL205, 34, 45

CMYK51, 21, 0, 39

Soft Cyan

RolesBg Light

Soft Cyan offers a gentle, near-white background tint that harmonizes with the blue main colors while enhancing readability.

HEX#6eaedb

RGB110, 174, 219

HSL205, 60, 65

CMYK50, 21, 0, 14

Neutral Colors

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

White

RolesBtn Primary Text, Btn Secondary Text

HEX#ffffff

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Snow

RolesBg Dark

HEX#f2f4f7

RGB242, 244, 247

HSL216, 24, 96

CMYK2, 1, 0, 3

Charcoal

RolesText

HEX#1a1a1a

RGB26, 26, 26

HSL0, 0, 10

CMYK0, 0, 0, 90

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Navy Blue", "hex": "#001F4D", "role": "main", "cmyk": { "c": 100, "m": 60, "y": 0, "k": 70, "source": "colorfly" } }, { "name": "Cobalt Blue", "hex": "#295CAA", "role": "main", "cmyk": { "c": 76, "m": 46, "y": 0, "k": 33, "source": "colorfly" } }, { "name": "Sky Blue", "hex": "#78A2DA", "role": "main", "cmyk": { "c": 45, "m": 26, "y": 0, "k": 15, "source": "colorfly" } }, { "name": "Steel Blue", "hex": "#4C7B9C", "role": "support", "cmyk": { "c": 51, "m": 21, "y": 0, "k": 39, "source": "colorfly" } }, { "name": "Soft Cyan", "hex": "#6EAEDB", "role": "support", "cmyk": { "c": 50, "m": 21, "y": 0, "k": 14, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Snow", "hex": "#F2F4F7", "role": "neutral", "cmyk": { "c": 2, "m": 1, "y": 0, "k": 3, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#1A1A1A", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 90, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-navy-blue: #001f4d; --color-cobalt-blue: #295caa; --color-sky-blue: #78a2da; --color-steel-blue: #4c7b9c; --color-soft-cyan: #6eaedb; --color-white: #ffffff; --color-snow: #f2f4f7; --color-charcoal: #1a1a1a; }

:root { --role-logo: #001f4d; --role-link: #001f4d; --role-btn-primary-bg: #001f4d; --role-headline: #001f4d; --role-btn-secondary-bg: #295caa; --role-btn-outlined-border: #295caa; --role-btn-outlined-text: #295caa; --role-icon: #4c7b9c; --role-border: #4c7b9c; --role-divider: #4c7b9c; --role-outline: #4c7b9c; --role-bg-light: #6eaedb; --role-btn-primary-text: #ffffff; --role-btn-secondary-text: #ffffff; --role-bg-dark: #f2f4f7; --role-text: #1a1a1a; }

{ "navy-blue": "#001f4d", "cobalt-blue": "#295caa", "sky-blue": "#78a2da", "steel-blue": "#4c7b9c", "soft-cyan": "#6eaedb", "white": "#ffffff", "snow": "#f2f4f7", "charcoal": "#1a1a1a" }

<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: #001F4D; --gradient-partner: #73849D; --gradient-accent: #4C7B9C; --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: #001F4D; --gradient-text-b: #73849D; --gradient-text-c: #4C7B9C; 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>