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.
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 systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The palette uses a harmonious set of blues progressing from deep to bright, establishing a clean, recognizable system that evokes reliability and optimism.
Clear roles create a consistent brand experience.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this system.
The palette uses a harmonious set of blues progressing from deep to bright, establishing a clean, recognizable system that evokes reliability and optimism.
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.
#0040800, 64, 128210, 100, 25100, 50, 0, 50RolesBtn Secondary Bg
Sky Blue adds brightness and approachability, inspiring clarity and positivity.
#3399FF51, 153, 255210, 100, 6080, 40, 0, 0Light Blue offers a gentle tone that complements Sky Blue, enhancing softness and friendliness.
#66CCFF102, 204, 255200, 100, 7060, 20, 0, 0The support colors extend the main palette with cooler blue-gray tones, adding subtle contrast and balance while keeping the overall feel fresh and approachable.
RolesIcon, Border, Divider, Outline
Pale Blue Gray subtly supports the brighter blues by providing calm, quiet areas that balance the composition.
#99CCDD153, 204, 221195, 50, 7331, 8, 0, 13Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F2F6FA242, 246, 250210, 44, 963, 2, 0, 2RolesBg Dark, Text, Btn Secondary Text
#000D1A0, 13, 26210, 100, 5100, 50, 0, 90Copy palette values for design systems, websites, and client handoff.
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;
}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;
}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"
}