Minimalistic Neutral Bright Color Palette with 2 Main Colors

Minimalistic Neutral Bright Color Palette

This palette pairs a clean Navy with a soft Sage to keep the system minimal, calm, and contemporary while still feeling distinct. Bright neutrals and restrained accents maintain clarity across UI states without adding visual noise.

AnalogousNoneminimalisticneutralbrightclean

Main (Brand) Colors

The Navy and Sage sit in a quiet, low-saturation range that feels orderly and modern while staying easy to use in interfaces. Their contrast is subtle but recognizable, which keeps the brand minimal without looking flat.

PrimaryNavy

RolesLogo, Btn Primary Bg, Headline

Navy gives the palette structure, trust, and strong visual anchor points.

HEX#16324F

RGB22, 50, 79

HSL211, 56, 20

CMYK72, 37, 0, 69

SecondarySage

RolesLink, Btn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Sage softens the system and adds a calm, airy contrast to the deeper blue.

HEX#8FAF9A

RGB143, 175, 154

HSL141, 17, 62

CMYK18, 0, 12, 31

Support Colors

The support colors stay understated so they extend the main palette without competing with it. They add just enough depth and softness to improve usability across borders, icons, and subtle interface elements.

Silver

RolesIcon

Silver gives icons a quiet, neutral presence that fits the palette's restrained tone.

HEX#B8C1C7

RGB184, 193, 199

HSL204, 12, 75

CMYK8, 3, 0, 22

Platinum

RolesBorder, Divider, Outline

Platinum creates light separators that preserve the bright, minimal feel.

HEX#D8DDD9

RGB216, 221, 217

HSL132, 7, 86

CMYK2, 0, 2, 13

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

Ivory

HEX#F6F7F4

RGB246, 247, 244

HSL80, 16, 96

CMYK0, 0, 1, 3

Charcoal

RolesBg Dark, Text, Btn Secondary Text

HEX#111315

RGB17, 19, 21

HSL210, 11, 7

CMYK19, 10, 0, 92

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Navy", "hex": "#16324F", "role": "main", "cmyk": { "c": 72, "m": 37, "y": 0, "k": 69, "source": "colorfly" } }, { "name": "Sage", "hex": "#8FAF9A", "role": "main", "cmyk": { "c": 18, "m": 0, "y": 12, "k": 31, "source": "colorfly" } }, { "name": "Silver", "hex": "#B8C1C7", "role": "support", "cmyk": { "c": 8, "m": 3, "y": 0, "k": 22, "source": "colorfly" } }, { "name": "Platinum", "hex": "#D8DDD9", "role": "support", "cmyk": { "c": 2, "m": 0, "y": 2, "k": 13, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F6F7F4", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 1, "k": 3, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#111315", "role": "neutral", "cmyk": { "c": 19, "m": 10, "y": 0, "k": 92, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --role-logo: #16324F; --role-btn-primary-bg: #16324F; --role-headline: #16324F; --role-link: #8FAF9A; --role-btn-secondary-bg: #8FAF9A; --role-btn-outlined-border: #8FAF9A; --role-btn-outlined-text: #8FAF9A; --role-icon: #B8C1C7; --role-border: #D8DDD9; --role-divider: #D8DDD9; --role-outline: #D8DDD9; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #111315; --role-text: #111315; --role-btn-secondary-text: #111315; }

<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: #16324F; --gradient-partner: #7F8E9E; --gradient-accent: #B8C1C7; --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: #16324F; --gradient-text-b: #7F8E9E; --gradient-text-c: #63686B; 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>