Soft Monochrome Blue Color Palette for Architectural Diagrams

Soft Monochrome Blue Color Palette

This palette uses a soft, almost monochrome range of blues and grey-blues to evoke calm, clarity, and precision ideal for architectural diagrams. The harmonious main colors provide visual depth without overpowering the designs, while the subtle support colors add gentle contrast for functional elements. The balanced neutral colors maintain readability and crispness in the interface.

MonochromaticCreativesoftmonochromearchitecturalblue

Main (Brand) Colors

The main colors are selected from a cohesive palette of muted blues with low saturation and moderate brightness, establishing visual harmony and subtlety ideal for architectural diagrams. These colors maintain distinct roles with enough differentiation to guide attention without harsh contrasts.

PrimarySlate Blue

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

Slate Blue brings a calm and professional feel, anchoring the palette with a trustworthy yet soft tone suitable for primary brand elements like logos and buttons.

HEX#556f8c

RGB85, 111, 140

HSL212, 24, 44

CMYK39, 21, 0, 45

Support Colors

These support colors extend the blue monotone by introducing softer grey-blues that reinforce the main colors while enabling delicate accents for icons, borders, and interface separation without competing visually.

Cadet Blue

RolesHeadline, Icon, Border, Divider, Outline

Cadet Blue is a lighter, subdued blue-grey that complements Slate Blue by adding balanced softness ideal for supporting graphical and textual accents.

HEX#8099b3

RGB128, 153, 179

HSL211, 25, 60

CMYK28, 15, 0, 30

Neutral Colors

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

Alice Blue

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#f7f9fb

RGB247, 249, 251

HSL210, 33, 98

CMYK2, 1, 0, 2

Lavender Gray

RolesBg Dark

HEX#d9e2ec

RGB217, 226, 236

HSL212, 33, 89

CMYK8, 4, 0, 7

Charcoal

RolesText

HEX#1f2937

RGB31, 41, 55

HSL215, 28, 17

CMYK44, 25, 0, 78

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Slate Blue", "hex": "#556F8C", "role": "main", "cmyk": { "c": 39, "m": 21, "y": 0, "k": 45, "source": "colorfly" } }, { "name": "Cadet Blue", "hex": "#8099B3", "role": "support", "cmyk": { "c": 28, "m": 15, "y": 0, "k": 30, "source": "colorfly" } }, { "name": "Alice Blue", "hex": "#F7F9FB", "role": "neutral", "cmyk": { "c": 2, "m": 1, "y": 0, "k": 2, "source": "colorfly" } }, { "name": "Lavender Gray", "hex": "#D9E2EC", "role": "neutral", "cmyk": { "c": 8, "m": 4, "y": 0, "k": 7, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#1F2937", "role": "neutral", "cmyk": { "c": 44, "m": 25, "y": 0, "k": 78, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --role-logo: #556f8c; --role-link: #556f8c; --role-btn-primary-bg: #556f8c; --role-btn-secondary-bg: #556f8c; --role-btn-outlined-border: #556f8c; --role-btn-outlined-text: #556f8c; --role-headline: #8099b3; --role-icon: #8099b3; --role-border: #8099b3; --role-divider: #8099b3; --role-outline: #8099b3; --role-bg-light: #f7f9fb; --role-btn-primary-text: #f7f9fb; --role-btn-secondary-text: #f7f9fb; --role-bg-dark: #d9e2ec; --role-text: #1f2937; }

<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: #556F8C; --gradient-partner: #A2B0C0; --gradient-accent: #8099B3; --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: #556F8C; --gradient-text-b: #A2B0C0; --gradient-text-c: #8099B3; 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>