Soft Muted Abstract Color Palette for Creative Brands

Soft Muted Abstract Color Palette

This palette is inspired by the gentle and muted tones of the image's abstract shapes and subtle shading. The main colors feature soft blues and muted reds that establish a calm yet approachable brand tone. Support colors include complementary soft lavenders and muted warm tones to balance and extend usability. Neutrals range from a pure clean white to soft greys and a deep charcoal, supporting clean readability and visual hierarchy.

ComplementaryCreativesoft bluemuted redlavendercharcoal

Main (Brand) Colors

The main colors combine a calming muted blue, a soft muted red, and a balanced off-white to form a distinctive and approachable brand system that draws from the image's abstract geometric style.

PrimaryAiry Blue

RolesLogo, Btn Primary Bg, Link

Airy Blue conveys calmness and reliability, offering a professional yet approachable presence.

HEX#7899B3

RGB120, 153, 179

HSL206, 28, 59

CMYK33, 15, 0, 30

SecondaryDusty Rose

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Dusty Rose adds warmth and subtle energy without overwhelming, complementing the blue with a soft contrast.

HEX#B36F6F

RGB179, 111, 111

HSL0, 31, 57

CMYK0, 38, 38, 30

TertiarySoft Ivory

RolesHeadline

Soft Ivory lightens the main palette and provides gentle highlight and typography balance.

HEX#E3E3E0

RGB227, 227, 224

HSL60, 5, 88

CMYK0, 0, 1, 11

Support Colors

Support colors provide gentle accents with muted lavender and warm beige that harmonize with the main colors, reinforcing the palette without competing for attention.

Lavender Gray

RolesIcon, Border, Divider, Outline

Lavender Gray supports the palette by adding subtle purple undertones that complement the blue and red hues.

HEX#A598B3

RGB165, 152, 179

HSL269, 15, 65

CMYK8, 15, 0, 30

Warm Taupe

Warm Taupe introduces a grounded warmth, balancing the coolness of Airy Blue and the softness of Dusty Rose.

HEX#C3B49B

RGB195, 180, 155

HSL38, 25, 69

CMYK0, 8, 21, 24

Neutral Colors

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

Pure White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Soft Grey

RolesBg Dark

HEX#F6F6F6

RGB246, 246, 246

HSL0, 0, 96

CMYK0, 0, 0, 4

Charcoal

RolesText, Btn Primary Text

HEX#2F2F2F

RGB47, 47, 47

HSL0, 0, 18

CMYK0, 0, 0, 82

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Airy Blue", "hex": "#7899B3", "role": "main", "cmyk": { "c": 33, "m": 15, "y": 0, "k": 30, "source": "colorfly" } }, { "name": "Dusty Rose", "hex": "#B36F6F", "role": "main", "cmyk": { "c": 0, "m": 38, "y": 38, "k": 30, "source": "colorfly" } }, { "name": "Soft Ivory", "hex": "#E3E3E0", "role": "main", "cmyk": { "c": 0, "m": 0, "y": 1, "k": 11, "source": "colorfly" } }, { "name": "Lavender Gray", "hex": "#A598B3", "role": "support", "cmyk": { "c": 8, "m": 15, "y": 0, "k": 30, "source": "colorfly" } }, { "name": "Warm Taupe", "hex": "#C3B49B", "role": "support", "cmyk": { "c": 0, "m": 8, "y": 21, "k": 24, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Soft Grey", "hex": "#F6F6F6", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 4, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2F2F2F", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 82, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-airy-blue: #7899B3; --color-dusty-rose: #B36F6F; --color-soft-ivory: #E3E3E0; --color-lavender-gray: #A598B3; --color-warm-taupe: #C3B49B; --color-pure-white: #FFFFFF; --color-soft-grey: #F6F6F6; --color-charcoal: #2F2F2F; }

:root { --role-logo: #7899B3; --role-btn-primary-bg: #7899B3; --role-link: #7899B3; --role-btn-secondary-bg: #B36F6F; --role-btn-outlined-border: #B36F6F; --role-btn-outlined-text: #B36F6F; --role-headline: #E3E3E0; --role-icon: #A598B3; --role-border: #A598B3; --role-divider: #A598B3; --role-outline: #A598B3; --role-bg-light: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #F6F6F6; --role-text: #2F2F2F; --role-btn-primary-text: #2F2F2F; }

{ "airy-blue": "#7899B3", "dusty-rose": "#B36F6F", "soft-ivory": "#E3E3E0", "lavender-gray": "#A598B3", "warm-taupe": "#C3B49B", "pure-white": "#FFFFFF", "soft-grey": "#F6F6F6", "charcoal": "#2F2F2F" }

<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: #7899B3; --gradient-partner: #B5C7D5; --gradient-accent: #86939E; --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: #7899B3; --gradient-text-b: #626B73; --gradient-text-c: #86939E; 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>