Minimal Neutral Bright Color Palette for Modern Tech Brands

Minimal Neutral Bright Color Palette

This palette pairs a crisp blue-gray with a clean mint for a minimal, bright system that still feels calm and modern. The neutral base keeps the interface airy and readable, while the accent colors add just enough freshness to distinguish actions and brand moments.

AnalogousTechminimalistneutralbrightclean

Main (Brand) Colors

The two main colors sit close in cool space, creating a restrained and contemporary system that feels bright without becoming loud. Their shared softness makes the palette easy to recognize across branding and interface use.

PrimarySlate Blue

RolesLogo, Link, Btn Primary Bg, Headline

Slate Blue gives the brand its grounded, dependable anchor and works well for primary actions and recognition points.

HEX#4F6D7A

RGB79, 109, 122

HSL198, 21, 39

CMYK35, 11, 0, 52

SecondarySeafoam

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Seafoam adds a light, fresh counterpoint that keeps the palette bright and minimal while supporting secondary UI emphasis.

HEX#8FD3C8

RGB143, 211, 200

HSL170, 44, 69

CMYK32, 0, 5, 17

Support Colors

These support colors extend the cool, airy direction with quiet structure and a subtle highlight. They stay subordinate to the two main colors while improving usability in text, borders, and accents.

Powder Blue

RolesIcon, Border

Powder Blue softens interface details and provides a gentle structural tone that does not compete with the main colors.

HEX#B8C5CC

RGB184, 197, 204

HSL201, 16, 76

CMYK10, 3, 0, 20

Pale Aqua

RolesDivider, Outline

Pale Aqua keeps separators and outlines clean and bright, reinforcing the minimal feel without adding visual weight.

HEX#DCE7E6

RGB220, 231, 230

HSL175, 19, 88

CMYK5, 0, 0, 9

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

Snow

HEX#F5F7F8

RGB245, 247, 248

HSL200, 18, 97

CMYK1, 0, 0, 3

Charcoal

RolesBg Dark, Text, Btn Secondary Text

HEX#1E2326

RGB30, 35, 38

HSL203, 12, 13

CMYK21, 8, 0, 85

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Slate Blue", "hex": "#4F6D7A", "role": "main", "cmyk": { "c": 35, "m": 11, "y": 0, "k": 52, "source": "colorfly" } }, { "name": "Seafoam", "hex": "#8FD3C8", "role": "main", "cmyk": { "c": 32, "m": 0, "y": 5, "k": 17, "source": "colorfly" } }, { "name": "Powder Blue", "hex": "#B8C5CC", "role": "support", "cmyk": { "c": 10, "m": 3, "y": 0, "k": 20, "source": "colorfly" } }, { "name": "Pale Aqua", "hex": "#DCE7E6", "role": "support", "cmyk": { "c": 5, "m": 0, "y": 0, "k": 9, "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": "#1E2326", "role": "neutral", "cmyk": { "c": 21, "m": 8, "y": 0, "k": 85, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-slate-blue: #4F6D7A; --color-seafoam: #8FD3C8; --color-powder-blue: #B8C5CC; --color-pale-aqua: #DCE7E6; --color-white: #FFFFFF; --color-snow: #F5F7F8; --color-charcoal: #1E2326; }

:root { --role-logo: #4F6D7A; --role-link: #4F6D7A; --role-btn-primary-bg: #4F6D7A; --role-headline: #4F6D7A; --role-btn-secondary-bg: #8FD3C8; --role-btn-outlined-border: #8FD3C8; --role-btn-outlined-text: #8FD3C8; --role-icon: #B8C5CC; --role-border: #B8C5CC; --role-divider: #DCE7E6; --role-outline: #DCE7E6; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #1E2326; --role-text: #1E2326; --role-btn-secondary-text: #1E2326; }

<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: #4F6D7A; --gradient-partner: #9EAFB6; --gradient-accent: #B8C5CC; --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: #4F6D7A; --gradient-text-b: #9EAFB6; --gradient-text-c: #636A6E; 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>