Slate#5B6875
Sky Blue#79BFE8
Cool Gray#A8B3BF
Silver#D6DCE2
Palette direction

Slate Sky Minimal Color Palette

This palette pairs a restrained Slate and a clear Sky Blue to keep the system minimal, bright, and calm without feeling sterile. The neutral structure stays crisp and spacious while the single accent adds enough clarity for links, headlines, and primary actions.

MonochromaticTechminimalneutralbrightclean
palette-preview.example
Tech color direction

Slate Sky Minimal Color Palette

This palette pairs a restrained Slate and a clear Sky Blue to keep the system minimal, bright, and calm without feeling sterile. The neutral structure stays crisp and spacious while the single accent adds enough clarity for links, headlines, and primary actions.

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 #1F2328on Sky Blue #79BFE87.8:1 Excellent
Logo White #FFFFFFon Slate #5B68755.7:1 Strong
Logo Charcoal #1F2328on White #FFFFFF15.8:1 Excellent
Logo White #FFFFFFon Charcoal #1F232815.8:1 Excellent
Icon color
BackgroundSky Blue#79BFE8TextCharcoal#1F2328
Primary Button7.85:1
AAA

Best for the main action users should notice first.

BackgroundCool Gray#A8B3BFTextSnow#F4F6F8
Secondary Button1.96:1
Low

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextCool Gray#A8B3BF
Outlined Button2.13:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextSky Blue#79BFE8
Text Button2.01:1
Low

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

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

CSlate Sky Minimal Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

Slate and Sky Blue sit close enough to feel quiet and cohesive, while the blue lift keeps the system bright and easy to scan. Together they create a minimal brand rhythm that reads as clean, modern, and trustworthy.

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 #5B6875
HeadlineUsed for main titles and key messages.Slate #5B6875
LinkUsed for links and interactive text.Sky Blue #79BFE8

Buttons

Primary Button
BackgroundSky Blue #79BFE8
TextCharcoal #1F2328
Secondary Button
BackgroundCool Gray #A8B3BF
TextSnow #F4F6F8
Outlined Button
BackgroundCool Gray #A8B3BF
TextCool Gray #A8B3BF

Interface

TextDefault readable body text.Charcoal #1F2328
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Charcoal #1F2328
IconSmall interface icons and marks.Silver #D6DCE2
BorderCards, inputs, and component borders.Silver #D6DCE2
DividerSubtle separators between content.Silver #D6DCE2
OutlineFocus rings and emphasis outlines.Silver #D6DCE2

Palette Colors

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

Main (Brand) Colors

Slate and Sky Blue sit close enough to feel quiet and cohesive, while the blue lift keeps the system bright and easy to scan. Together they create a minimal brand rhythm that reads as clean, modern, and trustworthy.

PrimarySlate

RolesLogo, Headline

Slate gives the brand a stable, understated anchor that supports a minimal look without feeling flat.

HEX#5B6875
RGB91, 104, 117
HSL210, 13, 41
CMYK22, 11, 0, 54
SecondarySky Blue

RolesLink, Btn Primary Bg

Sky Blue adds brightness and clarity, making the interface feel open and approachable while still restrained.

HEX#79BFE8
RGB121, 191, 232
HSL202, 71, 69
CMYK48, 18, 0, 9

Support Colors

These accents extend the palette with subtle structure and visibility without competing with the two main colors. They keep small UI details calm and functional while preserving the bright, minimal tone.

Cool Gray

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Cool Gray softens secondary actions and borders so they support the main colors instead of pulling focus.

HEX#A8B3BF
RGB168, 179, 191
HSL211, 15, 70
CMYK12, 6, 0, 25
Silver

RolesIcon, Border, Divider, Outline

Silver provides a light structural layer that keeps the interface airy and quiet.

HEX#D6DCE2
RGB214, 220, 226
HSL210, 17, 86
CMYK5, 3, 0, 11

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
Snow

RolesBtn Secondary Text

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

RolesBg Dark, Text, Btn Primary Text

HEX#1F2328
RGB31, 35, 40
HSL213, 13, 14
CMYK23, 13, 0, 84

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: #5B6875;
  --color-sky-blue: #79BFE8;
  --color-cool-gray: #A8B3BF;
  --color-silver: #D6DCE2;
  --color-white: #FFFFFF;
  --color-snow: #F4F6F8;
  --color-charcoal: #1F2328;
}

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: #5B6875;
  --role-headline: #5B6875;
  --role-link: #79BFE8;
  --role-btn-primary-bg: #79BFE8;
  --role-btn-secondary-bg: #A8B3BF;
  --role-btn-outlined-border: #A8B3BF;
  --role-btn-outlined-text: #A8B3BF;
  --role-icon: #D6DCE2;
  --role-border: #D6DCE2;
  --role-divider: #D6DCE2;
  --role-outline: #D6DCE2;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #F4F6F8;
  --role-bg-dark: #1F2328;
  --role-text: #1F2328;
  --role-btn-primary-text: #1F2328;
}

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": "#5B6875",
    "sky-blue": "#79BFE8",
    "cool-gray": "#A8B3BF",
    "silver": "#D6DCE2",
    "white": "#FFFFFF",
    "snow": "#F4F6F8",
    "charcoal": "#1F2328"
}
Press Space to load new palette