Black Cyan Blue Color Palette for Tech Brands

Black Cyan Blue Color Palette

A sophisticated palette inspired by deep blacks and cool blues from the image, combining strong dark tones with refreshing aqua and cyan accents to evoke professionalism and calmness suitable for tech or creative brands.

MonochromaticTechblackcyanbluetech

Main (Brand) Colors

The main colors combine black with deep cyan and cool blue hues creating a cohesive, calming, and trustworthy palette suitable for professional digital identities.

PrimaryJet Black

RolesLogo, Btn Primary Bg, Btn Outlined Border

Offers a strong foundation and sophistication, emphasizing professionalism and boldness.

HEX#000000

RGB0, 0, 0

HSL0, 0, 0

CMYK0, 0, 0, 100

SecondaryRich Cerulean

RolesLink, Btn Secondary Bg, Headline

A deep cyan tone that adds depth, balance, and a sense of calm confidence.

HEX#004E5F

RGB0, 78, 95

HSL191, 100, 19

CMYK100, 18, 0, 63

TertiaryCool Aqua

RolesBtn Outlined Text

Brings a refreshing and vibrant highlight to support calls to action and links visually.

HEX#0099A9

RGB0, 153, 169

HSL186, 100, 33

CMYK100, 9, 0, 34

Support Colors

The support colors are lighter blues that extend and soften the main palette, enhancing usability and balance without overpowering the core colors.

Soft Azure

RolesIcon, Border, Divider, Outline

A softer aqua tone that complements the deeper blues, maintaining a calm and modern feel.

HEX#2BB8C4

RGB43, 184, 196

HSL185, 64, 47

CMYK78, 6, 0, 23

Azure

RolesBg Light

A pale cyan that provides a gentle, clean background to support content visibility.

HEX#60CFDC

RGB96, 207, 220

HSL186, 64, 62

CMYK56, 6, 0, 14

Neutral Colors

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

Pure White

RolesBtn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Near White

HEX#F1F5F8

RGB241, 245, 248

HSL206, 33, 96

CMYK3, 1, 0, 3

Rich Black

RolesBg Dark, 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": "Jet Black", "hex": "#000000", "role": "main", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 100, "source": "colorfly" } }, { "name": "Rich Cerulean", "hex": "#004E5F", "role": "main", "cmyk": { "c": 100, "m": 18, "y": 0, "k": 63, "source": "colorfly" } }, { "name": "Cool Aqua", "hex": "#0099A9", "role": "main", "cmyk": { "c": 100, "m": 9, "y": 0, "k": 34, "source": "colorfly" } }, { "name": "Soft Azure", "hex": "#2BB8C4", "role": "support", "cmyk": { "c": 78, "m": 6, "y": 0, "k": 23, "source": "colorfly" } }, { "name": "Azure", "hex": "#60CFDC", "role": "support", "cmyk": { "c": 56, "m": 6, "y": 0, "k": 14, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Near White", "hex": "#F1F5F8", "role": "neutral", "cmyk": { "c": 3, "m": 1, "y": 0, "k": 3, "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-jet-black: #000000; --color-rich-cerulean: #004E5F; --color-cool-aqua: #0099A9; --color-soft-azure: #2BB8C4; --color-azure: #60CFDC; --color-pure-white: #FFFFFF; --color-near-white: #F1F5F8; --color-rich-black: #1A1A1A; }

:root { --role-logo: #000000; --role-btn-primary-bg: #000000; --role-btn-outlined-border: #000000; --role-link: #004E5F; --role-btn-secondary-bg: #004E5F; --role-headline: #004E5F; --role-btn-outlined-text: #0099A9; --role-icon: #2BB8C4; --role-border: #2BB8C4; --role-divider: #2BB8C4; --role-outline: #2BB8C4; --role-bg-light: #60CFDC; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #1A1A1A; --role-text: #1A1A1A; }

{ "jet-black": "#000000", "rich-cerulean": "#004E5F", "cool-aqua": "#0099A9", "soft-azure": "#2BB8C4", "azure": "#60CFDC", "pure-white": "#FFFFFF", "near-white": "#F1F5F8", "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: #000000; --gradient-partner: #737373; --gradient-accent: #2BB8C4; --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: #000000; --gradient-text-b: #737373; --gradient-text-c: #2BB8C4; 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>