Minimal Neutral Bright Color Palette for Clean Modern Branding

Minimal Neutral Bright Color Palette

This palette pairs one crisp blue-gray with one restrained sage to keep the system minimal, neutral, and bright without feeling sterile. The contrast between cool clarity and soft organic balance makes the brand feel modern, calm, and easy to use across interfaces and identity.

CustomNoneminimalneutralbrightclean

Main (Brand) Colors

The palette uses a cool blue-gray and a soft sage to create a restrained two-color system that feels fresh, balanced, and intentionally understated. Together they read as neutral and bright while still giving the brand enough distinction to feel memorable.

PrimarySlate Blue

RolesLogo, Link, Btn Primary Bg

Slate Blue brings clarity and structure, giving the brand a calm digital presence that still feels distinctive.

HEX#6F86A1

RGB111, 134, 161

HSL212, 21, 53

CMYK31, 17, 0, 37

SecondarySage

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text, Headline

Sage softens the palette with a quiet organic note that keeps the system approachable and balanced.

HEX#A7B8A0

RGB167, 184, 160

HSL103, 14, 67

CMYK9, 0, 13, 28

Support Colors

The support colors stay muted and airy so they extend the main palette without competing with it. They add subtle depth for borders, icons, and interface accents while preserving the minimal, bright feel.

Powder Gray

RolesIcon, Border

Powder Gray adds a clean structural layer that supports the palette without drawing attention away from the main colors.

HEX#D7E0E8

RGB215, 224, 232

HSL208, 27, 88

CMYK7, 3, 0, 9

Mist Green

RolesDivider, Outline

Mist Green echoes the sage undertone in a lighter form, helping separators and outlines feel cohesive and quiet.

HEX#C8D2CC

RGB200, 210, 204

HSL144, 10, 80

CMYK5, 0, 3, 18

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

Snow

HEX#F5F7F8

RGB245, 247, 248

HSL200, 18, 97

CMYK1, 0, 0, 3

Charcoal

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

HEX#111827

RGB17, 24, 39

HSL221, 39, 11

CMYK56, 38, 0, 85

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Slate Blue", "hex": "#6F86A1", "role": "main", "cmyk": { "c": 31, "m": 17, "y": 0, "k": 37, "source": "colorfly" } }, { "name": "Sage", "hex": "#A7B8A0", "role": "main", "cmyk": { "c": 9, "m": 0, "y": 13, "k": 28, "source": "colorfly" } }, { "name": "Powder Gray", "hex": "#D7E0E8", "role": "support", "cmyk": { "c": 7, "m": 3, "y": 0, "k": 9, "source": "colorfly" } }, { "name": "Mist Green", "hex": "#C8D2CC", "role": "support", "cmyk": { "c": 5, "m": 0, "y": 3, "k": 18, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Snow", "hex": "#F5F7F8", "role": "neutral", "cmyk": { "c": 1, "m": 0, "y": 0, "k": 3, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#111827", "role": "neutral", "cmyk": { "c": 56, "m": 38, "y": 0, "k": 85, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-slate-blue: #6F86A1; --color-sage: #A7B8A0; --color-powder-gray: #D7E0E8; --color-mist-green: #C8D2CC; --color-white: #FFFFFF; --color-snow: #F5F7F8; --color-charcoal: #111827; }

:root { --role-logo: #6F86A1; --role-link: #6F86A1; --role-btn-primary-bg: #6F86A1; --role-btn-secondary-bg: #A7B8A0; --role-btn-outlined-border: #A7B8A0; --role-btn-outlined-text: #A7B8A0; --role-headline: #A7B8A0; --role-icon: #D7E0E8; --role-border: #D7E0E8; --role-divider: #C8D2CC; --role-outline: #C8D2CC; --role-bg-light: #FFFFFF; --role-bg-dark: #111827; --role-text: #111827; --role-btn-primary-text: #111827; --role-btn-secondary-text: #111827; }

<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: #6F86A1; --gradient-partner: #B0BCCB; --gradient-accent: #D7E0E8; --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: #6F86A1; --gradient-text-b: #5F666E; --gradient-text-c: #81868B; 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>