Mystical Blue Cyan Color Palette for Tech Brands

Mystical Blue Cyan Color Palette

This color palette draws inspiration from the mystical and vibrant hues of the kaleidoscopic image, integrating deep blues and cyans with contrasting dark and light neutrals to create a balanced and visually striking identity system.

AnalogousTechbluecyandark neutralsbright cyan

Main (Brand) Colors

The main colors combine a deep rich blue, a vibrant cyan, and a bright cool aqua to create a harmonious and energetic triadic color scheme that reflects the dynamic and intricate patterns of the source image.

PrimaryPrussian Blue

RolesLogo, Btn Primary Bg, Btn Outlined Border

Prussian Blue provides a deep, trustworthy foundation that conveys professionalism and stability.

HEX#0D3B66

RGB13, 59, 102

HSL209, 77, 23

CMYK87, 42, 0, 60

SecondaryBright Cyan

RolesLink, Btn Secondary Bg, Headline

Bright Cyan adds energetic vibrancy and modernity, enhancing attention and engagement.

HEX#00B7C2

RGB0, 183, 194

HSL183, 100, 38

CMYK100, 6, 0, 24

TertiaryCool Aqua

RolesBtn Outlined Text

Cool Aqua offers a lighter, refreshing tone that complements and balances the deeper hues.

HEX#5ED0E6

RGB94, 208, 230

HSL190, 73, 64

CMYK59, 10, 0, 10

Support Colors

The support colors extend the main palette with soft, subdued complementary shades to enhance depth and legibility without overpowering the vibrant main colors.

Deep Teal

RolesIcon, Border, Divider, Outline

Deep Teal supports the main blues by adding visual structure and soft contrast, reinforcing the palette's aquatic theme.

HEX#144552

RGB20, 69, 82

HSL193, 61, 20

CMYK76, 16, 0, 68

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

Platinum

RolesBg Dark

HEX#EDEEF0

RGB237, 238, 240

HSL220, 9, 94

CMYK1, 1, 0, 6

Charcoal

RolesText, Btn Secondary Text

HEX#15202B

RGB21, 32, 43

HSL210, 34, 13

CMYK51, 26, 0, 83

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Prussian Blue", "hex": "#0D3B66", "role": "main", "cmyk": { "c": 87, "m": 42, "y": 0, "k": 60, "source": "colorfly" } }, { "name": "Bright Cyan", "hex": "#00B7C2", "role": "main", "cmyk": { "c": 100, "m": 6, "y": 0, "k": 24, "source": "colorfly" } }, { "name": "Cool Aqua", "hex": "#5ED0E6", "role": "main", "cmyk": { "c": 59, "m": 10, "y": 0, "k": 10, "source": "colorfly" } }, { "name": "Deep Teal", "hex": "#144552", "role": "support", "cmyk": { "c": 76, "m": 16, "y": 0, "k": 68, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Platinum", "hex": "#EDEEF0", "role": "neutral", "cmyk": { "c": 1, "m": 1, "y": 0, "k": 6, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#15202B", "role": "neutral", "cmyk": { "c": 51, "m": 26, "y": 0, "k": 83, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-prussian-blue: #0D3B66; --color-bright-cyan: #00B7C2; --color-cool-aqua: #5ED0E6; --color-deep-teal: #144552; --color-white: #FFFFFF; --color-platinum: #EDEEF0; --color-charcoal: #15202B; }

:root { --role-logo: #0D3B66; --role-btn-primary-bg: #0D3B66; --role-btn-outlined-border: #0D3B66; --role-link: #00B7C2; --role-btn-secondary-bg: #00B7C2; --role-headline: #00B7C2; --role-btn-outlined-text: #5ED0E6; --role-icon: #144552; --role-border: #144552; --role-divider: #144552; --role-outline: #144552; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #EDEEF0; --role-text: #15202B; --role-btn-secondary-text: #15202B; }

<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: #0D3B66; --gradient-partner: #7A93AB; --gradient-accent: #A7B8C8; --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: #0D3B66; --gradient-text-b: #7A93AB; --gradient-text-c: #5A636C; 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>