Minimal Neutral Bright Color Palette for Tech Brands

Minimal Neutral Bright Color Palette

This palette pairs a restrained Stone Gray with a crisp Cobalt Blue to keep the system minimal, bright, and highly legible. The cool blue adds clarity and a modern digital edge while the neutrals preserve the quiet, neutral feel the client asked for.

MonochromaticTechminimalisticneutralbrightmodern

Main (Brand) Colors

The main colors combine a cool blue with a soft gray so the palette feels bright, minimal, and easy to apply across interfaces. Their contrast is strong enough for recognition without introducing visual clutter.

PrimaryCobalt Blue

RolesLogo, Link, Btn Primary Bg

Cobalt Blue provides the crisp, trustworthy focal point and gives the palette its bright digital energy.

HEX#1F7AE0

RGB31, 122, 224

HSL212, 76, 50

CMYK86, 46, 0, 12

SecondaryStone Gray

RolesBtn Secondary Bg, Headline

Stone Gray adds a calm neutral anchor that keeps the system minimal and balanced.

HEX#A9B0B8

RGB169, 176, 184

HSL212, 10, 69

CMYK8, 4, 0, 28

Support Colors

The support accents stay quiet and practical, extending the core palette with cool structure rather than introducing a competing hue direction.

Slate

RolesBtn Outlined Border, Icon

Slate reinforces the cool, minimal tone and works well for subtle interface structure.

HEX#6C7A89

RGB108, 122, 137

HSL211, 12, 48

CMYK21, 11, 0, 46

Cloud Gray

RolesBtn Outlined Text, Border

Cloud Gray softens outlines and borders while preserving the palette's airy, bright feeling.

HEX#D6DADF

RGB214, 218, 223

HSL213, 12, 86

CMYK4, 2, 0, 13

Neutral Colors

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

White

RolesBg Light

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ivory

RolesDivider, Outline

HEX#F4F6F8

RGB244, 246, 248

HSL210, 22, 96

CMYK2, 1, 0, 3

Charcoal

RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text

HEX#111418

RGB17, 20, 24

HSL214, 17, 8

CMYK29, 17, 0, 91

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Cobalt Blue", "hex": "#1F7AE0", "role": "main", "cmyk": { "c": 86, "m": 46, "y": 0, "k": 12, "source": "colorfly" } }, { "name": "Stone Gray", "hex": "#A9B0B8", "role": "main", "cmyk": { "c": 8, "m": 4, "y": 0, "k": 28, "source": "colorfly" } }, { "name": "Slate", "hex": "#6C7A89", "role": "support", "cmyk": { "c": 21, "m": 11, "y": 0, "k": 46, "source": "colorfly" } }, { "name": "Cloud Gray", "hex": "#D6DADF", "role": "support", "cmyk": { "c": 4, "m": 2, "y": 0, "k": 13, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F4F6F8", "role": "neutral", "cmyk": { "c": 2, "m": 1, "y": 0, "k": 3, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#111418", "role": "neutral", "cmyk": { "c": 29, "m": 17, "y": 0, "k": 91, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-cobalt-blue: #1F7AE0; --color-stone-gray: #A9B0B8; --color-slate: #6C7A89; --color-cloud-gray: #D6DADF; --color-white: #FFFFFF; --color-ivory: #F4F6F8; --color-charcoal: #111418; }

:root { --role-logo: #1F7AE0; --role-link: #1F7AE0; --role-btn-primary-bg: #1F7AE0; --role-btn-secondary-bg: #A9B0B8; --role-headline: #A9B0B8; --role-btn-outlined-border: #6C7A89; --role-icon: #6C7A89; --role-btn-outlined-text: #D6DADF; --role-border: #D6DADF; --role-bg-light: #FFFFFF; --role-divider: #F4F6F8; --role-outline: #F4F6F8; --role-bg-dark: #111418; --role-text: #111418; --role-btn-primary-text: #111418; --role-btn-secondary-text: #111418; }

<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: #1F7AE0; --gradient-partner: #84B6EE; --gradient-accent: #AECFF4; --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: #1F7AE0; --gradient-text-b: #476281; --gradient-text-c: #5E7084; 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>