Blue Navy White Color Palette for Clean and Trustworthy Tech Brands |...

Main (Brand) Colors

This palette combines sky blue, navy, and light blue white as main colors to provide a distinct yet harmonious range of blues that reinforce trust and clarity.

PrimarySky Blue

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

Sky Blue conveys openness and approachability, making it effective for branding and interactive elements.

HEX#7EC5F6

RGB126, 197, 246

HSL205, 87, 73

CMYK49, 20, 0, 4

SecondaryNavy

RolesHeadline, Btn Secondary Bg

Navy adds a strong, professional presence that enhances trust and authority in the design.

HEX#0A3D62

RGB10, 61, 98

HSL205, 81, 21

CMYK90, 38, 0, 62

TertiaryLight Blue White

RolesBg Light

Light Blue White acts as a soft, cool background providing clarity and balance to the palette.

HEX#F0F7FB

RGB240, 247, 251

HSL202, 58, 96

CMYK4, 2, 0, 2

Support Colors

The support colors are calm neutrals that complement the main blues, extending usability with subtle contrast and accents.

Steel Blue

RolesIcon, Border, Divider, Outline

Steel Blue subtly supports the main blues with a muted tone for interface elements, maintaining visual harmony.

HEX#5A7D9A

RGB90, 125, 154

HSL207, 26, 48

CMYK42, 19, 0, 40

Neutral Colors

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

White

RolesBtn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Linen Blue

RolesBg Dark

HEX#E6EEFA

RGB230, 238, 250

HSL216, 67, 94

CMYK8, 5, 0, 2

Charcoal

RolesText, Btn Primary Text

HEX#1A1A1A

RGB26, 26, 26

HSL0, 0, 10

CMYK0, 0, 0, 90

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Sky Blue", "hex": "#7EC5F6", "role": "main", "cmyk": { "c": 49, "m": 20, "y": 0, "k": 4, "source": "colorfly" } }, { "name": "Navy", "hex": "#0A3D62", "role": "main", "cmyk": { "c": 90, "m": 38, "y": 0, "k": 62, "source": "colorfly" } }, { "name": "Light Blue White", "hex": "#F0F7FB", "role": "main", "cmyk": { "c": 4, "m": 2, "y": 0, "k": 2, "source": "colorfly" } }, { "name": "Steel Blue", "hex": "#5A7D9A", "role": "support", "cmyk": { "c": 42, "m": 19, "y": 0, "k": 40, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Linen Blue", "hex": "#E6EEFA", "role": "neutral", "cmyk": { "c": 8, "m": 5, "y": 0, "k": 2, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#1A1A1A", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 90, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-sky-blue: #7EC5F6; --color-navy: #0A3D62; --color-light-blue-white: #F0F7FB; --color-steel-blue: #5A7D9A; --color-white: #FFFFFF; --color-linen-blue: #E6EEFA; --color-charcoal: #1A1A1A; }

:root { --role-logo: #7EC5F6; --role-link: #7EC5F6; --role-btn-primary-bg: #7EC5F6; --role-btn-outlined-border: #7EC5F6; --role-btn-outlined-text: #7EC5F6; --role-headline: #0A3D62; --role-btn-secondary-bg: #0A3D62; --role-bg-light: #F0F7FB; --role-icon: #5A7D9A; --role-border: #5A7D9A; --role-divider: #5A7D9A; --role-outline: #5A7D9A; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #E6EEFA; --role-text: #1A1A1A; --role-btn-primary-text: #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: #7EC5F6; --gradient-partner: #6096BB; --gradient-accent: #5A7D9A; --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: #446A85; --gradient-text-b: #6096BB; --gradient-text-c: #5A7D9A; 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>