Cobalt Blue#1F7AE0
Stone Gray#A9B0B8
Slate#6C7A89
Cloud Gray#D6DADF
Palette direction

Minimal Neutral Bright Color Palette

This palette pairs a restrained Stone Gray with a crisp Cobalt Blue to keep the system minimal, bright, and highly legible. The cool blue adds clarity and a modern digital edge while the neutrals preserve the quiet, neutral feel the client asked for.

MonochromaticTechminimalisticneutralbrightmodern
palette-preview.example
Tech color direction

Minimal Neutral Bright Color Palette

This palette pairs a restrained Stone Gray with a crisp Cobalt Blue to keep the system minimal, bright, and highly legible. The cool blue adds clarity and a modern digital edge while the neutrals preserve the quiet, neutral feel the client asked for.

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 Charcoal #111418on Stone Gray #A9B0B88.4:1 Excellent
Logo Charcoal #111418on White #FFFFFF18.5:1 Excellent
Logo White #FFFFFFon Charcoal #11141818.5:1 Excellent
Logo Charcoal #111418on Cloud Gray #D6DADF13.2:1 Excellent
Icon color
BackgroundCobalt Blue#1F7AE0TextCharcoal#111418
Primary Button4.33:1
Large text

Best for the main action users should notice first.

BackgroundStone Gray#A9B0B8TextCharcoal#111418
Secondary Button8.43:1
AAA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextCloud Gray#D6DADF
Outlined Button1.40:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextCobalt Blue#1F7AE0
Text Button4.27:1
Large text

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

Palette composition7 colorsMonochromatic color relationship
9:41Minimal Neutral Bright 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.

CMinimal Neutral Bright Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine a cool blue with a soft gray so the palette feels bright, minimal, and easy to apply across interfaces. Their contrast is strong enough for recognition without introducing visual clutter.

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.Cobalt Blue #1F7AE0
HeadlineUsed for main titles and key messages.Stone Gray #A9B0B8
LinkUsed for links and interactive text.Cobalt Blue #1F7AE0

Buttons

Primary Button
BackgroundCobalt Blue #1F7AE0
TextCharcoal #111418
Secondary Button
BackgroundStone Gray #A9B0B8
TextCharcoal #111418
Outlined Button
BackgroundSlate #6C7A89
TextCloud Gray #D6DADF

Interface

TextDefault readable body text.Charcoal #111418
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Charcoal #111418
IconSmall interface icons and marks.Slate #6C7A89
BorderCards, inputs, and component borders.Cloud Gray #D6DADF
DividerSubtle separators between content.Ivory #F4F6F8
OutlineFocus rings and emphasis outlines.Ivory #F4F6F8

Palette Colors

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

Main (Brand) Colors

The main colors combine a cool blue with a soft gray so the palette feels bright, minimal, and easy to apply across interfaces. Their contrast is strong enough for recognition without introducing visual clutter.

PrimaryCobalt Blue

RolesLogo, Link, Btn Primary Bg

Cobalt Blue provides the crisp, trustworthy focal point and gives the palette its bright digital energy.

HEX#1F7AE0
RGB31, 122, 224
HSL212, 76, 50
CMYK86, 46, 0, 12
SecondaryStone Gray

RolesBtn Secondary Bg, Headline

Stone Gray adds a calm neutral anchor that keeps the system minimal and balanced.

HEX#A9B0B8
RGB169, 176, 184
HSL212, 10, 69
CMYK8, 4, 0, 28

Support Colors

The support accents stay quiet and practical, extending the core palette with cool structure rather than introducing a competing hue direction.

Slate

RolesBtn Outlined Border, Icon

Slate reinforces the cool, minimal tone and works well for subtle interface structure.

HEX#6C7A89
RGB108, 122, 137
HSL211, 12, 48
CMYK21, 11, 0, 46
Cloud Gray

RolesBtn Outlined Text, Border

Cloud Gray softens outlines and borders while preserving the palette's airy, bright feeling.

HEX#D6DADF
RGB214, 218, 223
HSL213, 12, 86
CMYK4, 2, 0, 13

Neutral Colors

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

White

RolesBg Light

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory

RolesDivider, Outline

HEX#F4F6F8
RGB244, 246, 248
HSL210, 22, 96
CMYK2, 1, 0, 3
Charcoal

RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text

HEX#111418
RGB17, 20, 24
HSL214, 17, 8
CMYK29, 17, 0, 91

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-cobalt-blue: #1F7AE0;
  --color-stone-gray: #A9B0B8;
  --color-slate: #6C7A89;
  --color-cloud-gray: #D6DADF;
  --color-white: #FFFFFF;
  --color-ivory: #F4F6F8;
  --color-charcoal: #111418;
}

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: #1F7AE0;
  --role-link: #1F7AE0;
  --role-btn-primary-bg: #1F7AE0;
  --role-btn-secondary-bg: #A9B0B8;
  --role-headline: #A9B0B8;
  --role-btn-outlined-border: #6C7A89;
  --role-icon: #6C7A89;
  --role-btn-outlined-text: #D6DADF;
  --role-border: #D6DADF;
  --role-bg-light: #FFFFFF;
  --role-divider: #F4F6F8;
  --role-outline: #F4F6F8;
  --role-bg-dark: #111418;
  --role-text: #111418;
  --role-btn-primary-text: #111418;
  --role-btn-secondary-text: #111418;
}

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.
{
    "cobalt-blue": "#1F7AE0",
    "stone-gray": "#A9B0B8",
    "slate": "#6C7A89",
    "cloud-gray": "#D6DADF",
    "white": "#FFFFFF",
    "ivory": "#F4F6F8",
    "charcoal": "#111418"
}
Press Space to load new palette