This sophisticated architecture-inspired palette balances sleek blues with subtle warm accents and a refined neutral set, crafting a timeless and professional identity suitable for precise and elegant architectural branding and digital interfaces.
This sophisticated architecture-inspired palette balances sleek blues with subtle warm accents and a refined neutral set, crafting a timeless and professional identity suitable for precise and elegant architectural branding and digital interfaces.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine deep navy and bright cornflower blue with a crisp sky blue for a harmonious, elegant, and modern architecture-centric palette that ensures strong brand recognition and clear visual hierarchy.
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 combine deep navy and bright cornflower blue with a crisp sky blue for a harmonious, elegant, and modern architecture-centric palette that ensures strong brand recognition and clear visual hierarchy.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Navy grounds the palette with strength and sophistication, conveying trust and professionalism.
#1A2B4726, 43, 71217, 46, 1963, 39, 0, 72RolesHeadline, Btn Secondary Bg
Cornflower Blue adds vibrancy and clarity, enhancing the architectural precision with a fresh, approachable tone.
#6495ED100, 149, 237219, 79, 6658, 37, 0, 7Sky Blue serves as a lighter complement to the main blues, softening and balancing the palette with airy openness.
#87CEEB135, 206, 235197, 71, 7343, 12, 0, 8The support colors subtly extend the main palette with warm and subdued tones that complement the blues, providing balance and visual interest without detracting from the primary identity.
RolesIcon, Border, Divider, Outline
Warm Taupe complements the blues with a muted earthiness, adding warmth and a tactile architectural feel.
#9E7B58158, 123, 8830, 28, 480, 22, 44, 38Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F7F7F7247, 247, 2470, 0, 970, 0, 0, 3RolesText, Btn Secondary Text
#2C2C2C44, 44, 440, 0, 170, 0, 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-navy: #1A2B47;
--color-cornflower-blue: #6495ED;
--color-sky-blue: #87CEEB;
--color-warm-taupe: #9E7B58;
--color-white: #FFFFFF;
--color-ivory: #F7F7F7;
--color-charcoal: #2C2C2C;
}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: #1A2B47;
--role-link: #1A2B47;
--role-btn-primary-bg: #1A2B47;
--role-btn-outlined-border: #1A2B47;
--role-btn-outlined-text: #1A2B47;
--role-headline: #6495ED;
--role-btn-secondary-bg: #6495ED;
--role-icon: #9E7B58;
--role-border: #9E7B58;
--role-divider: #9E7B58;
--role-outline: #9E7B58;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #F7F7F7;
--role-text: #2C2C2C;
--role-btn-secondary-text: #2C2C2C;
}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": "#1A2B47",
"cornflower-blue": "#6495ED",
"sky-blue": "#87CEEB",
"warm-taupe": "#9E7B58",
"white": "#FFFFFF",
"ivory": "#F7F7F7",
"charcoal": "#2C2C2C"
}