Tech AI Complementary Color Palette with Blue and Pink Accents

Seja Luz

A vibrant complementary palette balancing dynamic blues and vivid pinks, designed for a tech AI brand emphasizing clarity and recognition. The bright blue serves as a strong primary brand color and secondary action promoter, while the vivid pink provides accentuation for outlined button accents and headlines. Natural warm-toned accents soften the palette and support interface elements, ensuring visual harmony and usability. Neutrals supply pure white, near-white, and near-black for strong readability and contrast across backgrounds, text, and buttons.

CustomTechlight purplecomplementaryminimaltechy

Main (Brand) Colors

The main colors pair a vibrant blue with a vivid pink accent to create a clear and dynamic complementary system. This duo supports a tech AI brand identity with distinct button roles and headline emphasis.

PrimaryBrilliant Azure

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

A bright blue that energizes the brand presence and primary or secondary actions, ensuring clear visual hierarchy and strong recognition.

HEX#3B77BA

RGB59, 119, 186

HSL212, 52, 48

CMYK68, 36, 0, 27

SecondaryVivid Cerise

RolesBtn Secondary Bg, Link

A vibrant pink tone that highlights outlined button accents and key headlines with warmth and emphasis.

HEX#C6316B

RGB198, 49, 107

HSL337, 60, 48

CMYK0, 75, 46, 22

Support Colors

Natural and warm-toned accents extend the palette to soften the technology-driven main colors and provide subtle interface differentiation without competing for attention.

Sage Green

RolesIcon, Border

A muted green supporting icons and borders with a grounding natural tone complementary to the main blue and pink.

HEX#8CBC8F

RGB140, 188, 143

HSL124, 26, 64

CMYK26, 0, 24, 26

Goldenrod

RolesDivider, Outline

A warm golden shade that gently separates UI sections and outlines with friendly contrast.

HEX#EFC854

RGB239, 200, 84

HSL45, 83, 63

CMYK0, 16, 65, 6

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Frosted White

HEX#F6F5FB

RGB246, 245, 251

HSL250, 43, 97

CMYK2, 2, 0, 2

Jet Black

RolesBg Dark, Text

HEX#000000

RGB0, 0, 0

HSL0, 0, 0

CMYK0, 0, 0, 100

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Brilliant Azure", "hex": "#3B77BA", "role": "main", "cmyk": { "c": 68, "m": 36, "y": 0, "k": 27, "source": "colorfly" } }, { "name": "Vivid Cerise", "hex": "#C6316B", "role": "main", "cmyk": { "c": 0, "m": 75, "y": 46, "k": 22, "source": "colorfly" } }, { "name": "Sage Green", "hex": "#8CBC8F", "role": "support", "cmyk": { "c": 26, "m": 0, "y": 24, "k": 26, "source": "colorfly" } }, { "name": "Goldenrod", "hex": "#EFC854", "role": "support", "cmyk": { "c": 0, "m": 16, "y": 65, "k": 6, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Frosted White", "hex": "#F6F5FB", "role": "neutral", "cmyk": { "c": 2, "m": 2, "y": 0, "k": 2, "source": "colorfly" } }, { "name": "Jet Black", "hex": "#000000", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 100, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-brilliant-azure: #3B77BA; --color-vivid-cerise: #C6316B; --color-sage-green: #8CBC8F; --color-goldenrod: #EFC854; --color-pure-white: #FFFFFF; --color-frosted-white: #F6F5FB; --color-jet-black: #000000; }

:root { --role-logo: #3B77BA; --role-btn-primary-bg: #3B77BA; --role-btn-outlined-border: #3B77BA; --role-btn-outlined-text: #3B77BA; --role-headline: #3B77BA; --role-btn-secondary-bg: #C6316B; --role-link: #C6316B; --role-icon: #8CBC8F; --role-border: #8CBC8F; --role-divider: #EFC854; --role-outline: #EFC854; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #000000; --role-text: #000000; }

{ "brilliant-azure": "#3B77BA", "vivid-cerise": "#C6316B", "sage-green": "#8CBC8F", "goldenrod": "#EFC854", "pure-white": "#FFFFFF", "frosted-white": "#F6F5FB", "jet-black": "#000000" }

<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: #3B77BA; --gradient-partner: #93B4D9; --gradient-accent: #8CBC8F; --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: #3B77BA; --gradient-text-b: #4F6175; --gradient-text-c: #4C664D; 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>

Seja Luz

Seja Luz

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

Seja Luz

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