Dusty Blue and Ivory Color Palette for Creative Branding

Dusty Blue Ivory Color Palette

This palette draws inspiration from the soft pastel hues and gentle contrasts in the image, combining dusty blues, warm ivories, and calm grays to create a refined and approachable identity. The main colors establish a serene yet distinctive recognition, while the support colors quietly reinforce the palette with subtle variations that maintain balance and usability. Neutrals add versatile options for text, backgrounds, and interface elements ensuring strong readability and contrast.

MonochromaticCreativedusty blueivoryceruleanpastel palette

Main (Brand) Colors

The three main colors form a harmonious analogous scheme with soft blue and dusty shades creating a calm, sophisticated identity that is easily recognizable.

PrimaryPastel Blue

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline

Pastel Blue provides a gentle, trustworthy feeling that anchors the brand with its calm and approachable tone.

HEX#91A8D0

RGB145, 168, 208

HSL218, 40, 69

CMYK30, 19, 0, 18

SecondaryIvory

RolesBg Light

Ivory delivers warmth and softness that balances cooler tones, enhancing readability and a welcoming character.

HEX#ECE6DB

RGB236, 230, 219

HSL39, 31, 89

CMYK0, 3, 7, 7

TertiaryDusty Cerulean

RolesBtn Secondary Bg

Dusty Cerulean offers a muted contrast with sophistication, adding depth and visual interest without overpowering the main tone.

HEX#627D98

RGB98, 125, 152

HSL210, 22, 49

CMYK36, 18, 0, 40

Support Colors

Support colors extend the palette with muted, low saturation blues and grays to harmonize with main colors while remaining visually subordinate.

Slate Blue

RolesIcon, Border, Divider, Outline

Slate Blue subtly reinforces the palette with a cooler but subdued shade that complements the dusty blues while supporting interface elements.

HEX#A3B5CC

RGB163, 181, 204

HSL214, 29, 72

CMYK20, 11, 0, 20

Pale Taupe

Pale Taupe adds a touch of warm neutrality, balancing the cooler blues and linking well with the ivory for button states.

HEX#D4CFCB

RGB212, 207, 203

HSL27, 9, 81

CMYK0, 2, 4, 17

Neutral Colors

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

White

RolesBg Dark, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Alabaster

HEX#F6F5F3

RGB246, 245, 243

HSL40, 14, 96

CMYK0, 0, 1, 4

Charcoal

RolesText, Btn Primary Text

HEX#2C2F33

RGB44, 47, 51

HSL214, 7, 19

CMYK14, 8, 0, 80

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Pastel Blue", "hex": "#91A8D0", "role": "main", "cmyk": { "c": 30, "m": 19, "y": 0, "k": 18, "source": "colorfly" } }, { "name": "Ivory", "hex": "#ECE6DB", "role": "main", "cmyk": { "c": 0, "m": 3, "y": 7, "k": 7, "source": "colorfly" } }, { "name": "Dusty Cerulean", "hex": "#627D98", "role": "main", "cmyk": { "c": 36, "m": 18, "y": 0, "k": 40, "source": "colorfly" } }, { "name": "Slate Blue", "hex": "#A3B5CC", "role": "support", "cmyk": { "c": 20, "m": 11, "y": 0, "k": 20, "source": "colorfly" } }, { "name": "Pale Taupe", "hex": "#D4CFCB", "role": "support", "cmyk": { "c": 0, "m": 2, "y": 4, "k": 17, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Alabaster", "hex": "#F6F5F3", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 1, "k": 4, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2C2F33", "role": "neutral", "cmyk": { "c": 14, "m": 8, "y": 0, "k": 80, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-pastel-blue: #91A8D0; --color-ivory: #ECE6DB; --color-dusty-cerulean: #627D98; --color-slate-blue: #A3B5CC; --color-pale-taupe: #D4CFCB; --color-white: #FFFFFF; --color-alabaster: #F6F5F3; --color-charcoal: #2C2F33; }

:root { --role-logo: #91A8D0; --role-link: #91A8D0; --role-btn-primary-bg: #91A8D0; --role-btn-outlined-border: #91A8D0; --role-btn-outlined-text: #91A8D0; --role-headline: #91A8D0; --role-bg-light: #ECE6DB; --role-btn-secondary-bg: #627D98; --role-icon: #A3B5CC; --role-border: #A3B5CC; --role-divider: #A3B5CC; --role-outline: #A3B5CC; --role-bg-dark: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-text: #2C2F33; --role-btn-primary-text: #2C2F33; }

{ "pastel-blue": "#91A8D0", "ivory": "#ECE6DB", "dusty-cerulean": "#627D98", "slate-blue": "#A3B5CC", "pale-taupe": "#D4CFCB", "white": "#FFFFFF", "alabaster": "#F6F5F3", "charcoal": "#2C2F33" }

<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: #91A8D0; --gradient-partner: #B2C2DE; --gradient-accent: #CCD7E9; --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: #91A8D0; --gradient-text-b: #606978; --gradient-text-c: #7A818C; 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>

Dusty Blue Ivory Color Palette

Dusty Blue Ivory Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system

Palette workspace

Dusty Blue Ivory Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system