Slate Blue#556f8c
Cadet Blue#8099b3
Palette direction

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
palette-preview.example
Creative color direction

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.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Alice Blue #F7F9FBon Slate Blue #556F8C4.9:1 Strong
Logo Charcoal #1F2937on Alice Blue #F7F9FB13.9:1 Excellent
Logo Alice Blue #F7F9FBon Charcoal #1F293713.9:1 Excellent
Logo Charcoal #1F2937on Lavender Gray #D9E2EC11.2:1 Excellent
Icon color
BackgroundSlate Blue#556f8cTextAlice Blue#f7f9fb
Primary Button4.93:1
AA

Best for the main action users should notice first.

BackgroundSlate Blue#556f8cTextAlice Blue#f7f9fb
Secondary Button4.93:1
AA

Useful for softer choices and secondary paths.

BackgroundAlice Blue#f7f9fbTextSlate Blue#556f8c
Outlined Button4.93:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundAlice Blue#f7f9fbTextSlate Blue#556f8c
Text Button4.93:1
AA

A quiet action for links, navigation, and inline decisions.

Palette composition5 colorsMonochromatic color relationship
9:41Soft Monochrome Blue Color Palette Color role balance
Monochromatic system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CSoft Monochrome Blue Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

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.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Slate Blue #556f8c
HeadlineUsed for main titles and key messages.Cadet Blue #8099b3
LinkUsed for links and interactive text.Slate Blue #556f8c

Buttons

Primary Button
BackgroundSlate Blue #556f8c
TextAlice Blue #f7f9fb
Secondary Button
BackgroundSlate Blue #556f8c
TextAlice Blue #f7f9fb
Outlined Button
BackgroundSlate Blue #556f8c
TextSlate Blue #556f8c

Interface

TextDefault readable body text.Charcoal #1f2937
Bg LightLight page or section background.Alice Blue #f7f9fb
Bg DarkDark page or section background.Lavender Gray #d9e2ec
IconSmall interface icons and marks.Cadet Blue #8099b3
BorderCards, inputs, and component borders.Cadet Blue #8099b3
DividerSubtle separators between content.Cadet Blue #8099b3
OutlineFocus rings and emphasis outlines.Cadet Blue #8099b3

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

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

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.

Use when: you need the actual colors.
:root {
  --color-slate-blue: #556f8c;
  --color-cadet-blue: #8099b3;
  --color-alice-blue: #f7f9fb;
  --color-lavender-gray: #d9e2ec;
  --color-charcoal: #1f2937;
}

Role tokens

Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.

Use when: you need UI roles, not just swatches.
: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;
}

JSON

Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.

Use when: a developer or app needs data.
{
    "slate-blue": "#556f8c",
    "cadet-blue": "#8099b3",
    "alice-blue": "#f7f9fb",
    "lavender-gray": "#d9e2ec",
    "charcoal": "#1f2937"
}
Press Space to load new palette