Classic Blue and Orange Bank Color Palette for Financial Trust and Cl...

Classic Blue Orange Color Palette

This palette is inspired by the uploaded bank logo image, combining classic blues with warm orange and subtle grays to convey trust, professionalism, and approachability. The three main colors work together to create a distinctive yet balanced identity, supported by muted complementary shades that enhance usability and readability without overpowering the core blues.

ComplementaryFinancebankingfinancetrustprofessional

Main (Brand) Colors

The classic blue tone built on a trustworthy and dependable shade pairs with a warm orange highlight providing energy and optimism, balanced by a deep slate blue to reinforce professionalism and sophistication.

PrimarySky Blue

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

Sky Blue imparts clarity and trust, critical for finance brands seeking reliability.

HEX#6CA1D2

RGB108, 161, 210

HSL209, 53, 62

CMYK49, 23, 0, 18

SecondaryOrange

RolesBtn Secondary Bg

Orange adds warmth and approachability, energizing call-to-action elements distinct from the primary blue.

HEX#F58B36

RGB245, 139, 54

HSL27, 91, 59

CMYK0, 43, 78, 4

TertiarySlate Blue

Slate Blue anchors the palette with depth and sophistication, complementing the lighter blues and providing strong contrast for text.

HEX#35577D

RGB53, 87, 125

HSL212, 40, 35

CMYK58, 30, 0, 51

Support Colors

Accents extend the palette with muted complementary colors that support functional UI elements such as icons, borders, and dividers while remaining visually subordinate to the main colors.

Steel Blue

RolesIcon, Border, Divider, Outline

Steel Blue provides subtle contrast and visual texture without competing with the main blues.

HEX#8FA6C2

RGB143, 166, 194

HSL213, 29, 66

CMYK26, 14, 0, 24

Pale Sky

RolesBg Light

Pale Sky offers a light neutral background tone to improve readability and soften overall visuals.

HEX#D9E4F5

RGB217, 228, 245

HSL216, 58, 91

CMYK11, 7, 0, 4

Neutral Colors

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

White

RolesBg Dark

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Bright White

HEX#F4F6F9

RGB244, 246, 249

HSL216, 29, 97

CMYK2, 1, 0, 2

Rich Black

RolesText, Btn Primary Text, Btn Secondary 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": "#6CA1D2", "role": "main", "cmyk": { "c": 49, "m": 23, "y": 0, "k": 18, "source": "colorfly" } }, { "name": "Orange", "hex": "#F58B36", "role": "main", "cmyk": { "c": 0, "m": 43, "y": 78, "k": 4, "source": "colorfly" } }, { "name": "Slate Blue", "hex": "#35577D", "role": "main", "cmyk": { "c": 58, "m": 30, "y": 0, "k": 51, "source": "colorfly" } }, { "name": "Steel Blue", "hex": "#8FA6C2", "role": "support", "cmyk": { "c": 26, "m": 14, "y": 0, "k": 24, "source": "colorfly" } }, { "name": "Pale Sky", "hex": "#D9E4F5", "role": "support", "cmyk": { "c": 11, "m": 7, "y": 0, "k": 4, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Bright White", "hex": "#F4F6F9", "role": "neutral", "cmyk": { "c": 2, "m": 1, "y": 0, "k": 2, "source": "colorfly" } }, { "name": "Rich Black", "hex": "#1A1A1A", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 90, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-sky-blue: #6CA1D2; --color-orange: #F58B36; --color-slate-blue: #35577D; --color-steel-blue: #8FA6C2; --color-pale-sky: #D9E4F5; --color-white: #FFFFFF; --color-bright-white: #F4F6F9; --color-rich-black: #1A1A1A; }

:root { --role-logo: #6CA1D2; --role-link: #6CA1D2; --role-btn-primary-bg: #6CA1D2; --role-btn-outlined-border: #6CA1D2; --role-btn-outlined-text: #6CA1D2; --role-headline: #6CA1D2; --role-btn-secondary-bg: #F58B36; --role-icon: #8FA6C2; --role-border: #8FA6C2; --role-divider: #8FA6C2; --role-outline: #8FA6C2; --role-bg-light: #D9E4F5; --role-bg-dark: #FFFFFF; --role-text: #1A1A1A; --role-btn-primary-text: #1A1A1A; --role-btn-secondary-text: #1A1A1A; }

{ "sky-blue": "#6CA1D2", "orange": "#F58B36", "slate-blue": "#35577D", "steel-blue": "#8FA6C2", "pale-sky": "#D9E4F5", "white": "#FFFFFF", "bright-white": "#F4F6F9", "rich-black": "#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: #6CA1D2; --gradient-partner: #98BDE0; --gradient-accent: #BBD3EB; --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: #6CA1D2; --gradient-text-b: #526679; --gradient-text-c: #707F8D; 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>

Classic Blue Orange Color Palette

Classic 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

Classic 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