This palette translates the cloud image into a crisp sky system with luminous blues, airy blue-gray support tones, and balanced neutrals. The result feels fresh and expansive while staying practical for clear digital hierarchy and readable interfaces.
This palette translates the cloud image into a crisp sky system with luminous blues, airy blue-gray support tones, and balanced neutrals. The result feels fresh and expansive while staying practical for clear digital hierarchy and readable interfaces.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors stay within a tight blue range, echoing the layered cloud and sky tones in the source image. This creates a recognizable system that feels airy, trustworthy, and visually cohesive.
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 main colors stay within a tight blue range, echoing the layered cloud and sky tones in the source image. This creates a recognizable system that feels airy, trustworthy, and visually cohesive.
RolesLogo, Link, Btn Primary Bg
Royal Blue anchors the palette with a vivid, confident tone that keeps the brand recognizable and active.
#0F3FBF15, 63, 191224, 85, 4092, 67, 0, 25RolesBtn Secondary Bg, Headline, Btn Outlined Border, Btn Outlined Text
Cornflower Blue adds a brighter, more approachable energy that lifts the system without breaking cohesion.
#3F8FE863, 143, 232212, 79, 5873, 38, 0, 9The support colors extend the cloud effect with restrained blue-gray undertones that add depth, structure, and interface utility. They stay subordinate to the main blues while improving balance across layouts and components.
RolesIcon, Border
Light Slate Blue gives icons and borders a calm structural tone that bridges the brighter blues and the neutrals.
#9FB9CF159, 185, 207208, 33, 7223, 11, 0, 19RolesDivider, Outline
Pale Azure keeps dividers and outlines soft and atmospheric so the interface feels open rather than heavy.
#BFD2E5191, 210, 229210, 42, 8217, 8, 0, 10Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F8FC245, 248, 252214, 54, 973, 2, 0, 1RolesBg Dark, Text, Btn Secondary Text
#0E1A2B14, 26, 43215, 51, 1167, 40, 0, 83Copy 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-royal-blue: #0F3FBF;
--color-cornflower-blue: #3F8FE8;
--color-light-slate-blue: #9FB9CF;
--color-pale-azure: #BFD2E5;
--color-white: #FFFFFF;
--color-snow: #F5F8FC;
--color-midnight-navy: #0E1A2B;
}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: #0F3FBF;
--role-link: #0F3FBF;
--role-btn-primary-bg: #0F3FBF;
--role-btn-secondary-bg: #3F8FE8;
--role-headline: #3F8FE8;
--role-btn-outlined-border: #3F8FE8;
--role-btn-outlined-text: #3F8FE8;
--role-icon: #9FB9CF;
--role-border: #9FB9CF;
--role-divider: #BFD2E5;
--role-outline: #BFD2E5;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #0E1A2B;
--role-text: #0E1A2B;
--role-btn-secondary-text: #0E1A2B;
}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.{
"royal-blue": "#0F3FBF",
"cornflower-blue": "#3F8FE8",
"light-slate-blue": "#9FB9CF",
"pale-azure": "#BFD2E5",
"white": "#FFFFFF",
"snow": "#F5F8FC",
"midnight-navy": "#0E1A2B"
}