Navy Blue#004080
Sky Blue#3399FF
Light Blue#66CCFF
Pale Blue Gray#99CCDD
Palette direction

Sky Blue Cloud Color Palette

This palette draws inspiration from the vibrant blues and bright whites of a cloudy sky, combining crisp, fresh primary blues with soft support hues and grounding neutrals to evoke clarity, openness, and trust.

MonochromaticTechblueskycloudbright
palette-preview.example
Tech color direction

Sky Blue Cloud Color Palette

This palette draws inspiration from the vibrant blues and bright whites of a cloudy sky, combining crisp, fresh primary blues with soft support hues and grounding neutrals to evoke clarity, openness, and trust.

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 Rich Black #000D1Aon Light Blue #66CCFF10.9:1 Excellent
Logo White #FFFFFFon Navy Blue #00408010.3:1 Excellent
Logo Rich Black #000D1Aon Sky Blue #3399FF6.7:1 Strong
Logo Rich Black #000D1Aon White #FFFFFF19.6:1 Excellent
Icon color
BackgroundNavy Blue#004080TextWhite#FFFFFF
Primary Button10.27:1
AAA

Best for the main action users should notice first.

BackgroundSky Blue#3399FFTextRich Black#000D1A
Secondary Button6.66:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextNavy Blue#004080
Outlined Button10.27:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextNavy Blue#004080
Text Button10.27:1
AAA

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

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

CSky Blue Cloud Color PaletteTech brand direction ColorFly.design
Strategic palette preview

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.Navy Blue #004080
HeadlineUsed for main titles and key messages.Navy Blue #004080
LinkUsed for links and interactive text.Navy Blue #004080

Buttons

Primary Button
BackgroundNavy Blue #004080
TextWhite #FFFFFF
Secondary Button
BackgroundSky Blue #3399FF
TextRich Black #000D1A
Outlined Button
BackgroundNavy Blue #004080
TextNavy Blue #004080

Interface

TextDefault readable body text.Rich Black #000D1A
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Rich Black #000D1A
IconSmall interface icons and marks.Pale Blue Gray #99CCDD
BorderCards, inputs, and component borders.Pale Blue Gray #99CCDD
DividerSubtle separators between content.Pale Blue Gray #99CCDD
OutlineFocus rings and emphasis outlines.Pale Blue Gray #99CCDD

Palette Colors

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

Main (Brand) Colors

The palette uses a harmonious set of blues progressing from deep to bright, establishing a clean, recognizable system that evokes reliability and optimism.

PrimaryNavy Blue

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

Navy Blue conveys professionalism and depth, anchoring the brand with trust and authority.

HEX#004080
RGB0, 64, 128
HSL210, 100, 25
CMYK100, 50, 0, 50
SecondarySky Blue

RolesBtn Secondary Bg

Sky Blue adds brightness and approachability, inspiring clarity and positivity.

HEX#3399FF
RGB51, 153, 255
HSL210, 100, 60
CMYK80, 40, 0, 0
TertiaryLight Blue

Light Blue offers a gentle tone that complements Sky Blue, enhancing softness and friendliness.

HEX#66CCFF
RGB102, 204, 255
HSL200, 100, 70
CMYK60, 20, 0, 0

Support Colors

The support colors extend the main palette with cooler blue-gray tones, adding subtle contrast and balance while keeping the overall feel fresh and approachable.

Pale Blue Gray

RolesIcon, Border, Divider, Outline

Pale Blue Gray subtly supports the brighter blues by providing calm, quiet areas that balance the composition.

HEX#99CCDD
RGB153, 204, 221
HSL195, 50, 73
CMYK31, 8, 0, 13

Neutral Colors

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

White

RolesBg Light, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Fresh White
HEX#F2F6FA
RGB242, 246, 250
HSL210, 44, 96
CMYK3, 2, 0, 2
Rich Black

RolesBg Dark, Text, Btn Secondary Text

HEX#000D1A
RGB0, 13, 26
HSL210, 100, 5
CMYK100, 50, 0, 90

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-navy-blue: #004080;
  --color-sky-blue: #3399FF;
  --color-light-blue: #66CCFF;
  --color-pale-blue-gray: #99CCDD;
  --color-white: #FFFFFF;
  --color-fresh-white: #F2F6FA;
  --color-rich-black: #000D1A;
}

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: #004080;
  --role-link: #004080;
  --role-btn-primary-bg: #004080;
  --role-btn-outlined-border: #004080;
  --role-btn-outlined-text: #004080;
  --role-headline: #004080;
  --role-btn-secondary-bg: #3399FF;
  --role-icon: #99CCDD;
  --role-border: #99CCDD;
  --role-divider: #99CCDD;
  --role-outline: #99CCDD;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #000D1A;
  --role-text: #000D1A;
  --role-btn-secondary-text: #000D1A;
}

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.
{
    "navy-blue": "#004080",
    "sky-blue": "#3399FF",
    "light-blue": "#66CCFF",
    "pale-blue-gray": "#99CCDD",
    "white": "#FFFFFF",
    "fresh-white": "#F2F6FA",
    "rich-black": "#000D1A"
}
Press Space to load new palette