This palette evokes the historical elegance and architectural grandeur of the classic building under a bright blue sky, combining soft creams, muted golden tones, and rich blues with harmonious neutrals for balanced usability.
This palette evokes the historical elegance and architectural grandeur of the classic building under a bright blue sky, combining soft creams, muted golden tones, and rich blues with harmonious neutrals for balanced usability.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine the sky's vibrant blue, the building's golden cream, and a deeper muted blue, creating a recognizable and harmonious palette that suggests classic elegance and trust.
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 the sky's vibrant blue, the building's golden cream, and a deeper muted blue, creating a recognizable and harmonious palette that suggests classic elegance and trust.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Sky Blue brings vibrancy and trust, capturing the bright, clear sky above the classic building.
#4A90E274, 144, 226212, 72, 5967, 36, 0, 11RolesBtn Secondary Bg, Headline
Golden Cream adds warmth and sophistication, reflecting the historical sandstone facade of the building.
#D6BA7E214, 186, 12641, 52, 670, 13, 41, 16Deep Slate Blue offers depth and stability, grounding the palette with a mature, refined tone.
#2F4F7F47, 79, 127216, 46, 3463, 38, 0, 50Support colors extend the palette by providing soft, muted undertones that enhance usability and visual hierarchy without overpowering the main colors.
RolesIcon, Border, Divider, Outline
Muted Sand complements the main golden cream with its softer, earthy undertone, balancing contrast while remaining subtle.
#BEB6A6190, 182, 16640, 16, 700, 4, 13, 25Soft Steel Blue reinforces the blues with a lighter, calming hue that supports interface elements and icons.
#A9C1D9169, 193, 217210, 39, 7622, 11, 0, 15Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F5F5F3245, 245, 24360, 9, 960, 0, 1, 4RolesText, Btn Primary Text, Btn Secondary Text
#2B2B2B43, 43, 430, 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-sky-blue: #4A90E2;
--color-golden-cream: #D6BA7E;
--color-deep-slate-blue: #2F4F7F;
--color-muted-sand: #BEB6A6;
--color-soft-steel-blue: #A9C1D9;
--color-pure-white: #FFFFFF;
--color-ivory-mist: #F5F5F3;
--color-charcoal: #2B2B2B;
}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: #4A90E2;
--role-link: #4A90E2;
--role-btn-primary-bg: #4A90E2;
--role-btn-outlined-border: #4A90E2;
--role-btn-outlined-text: #4A90E2;
--role-btn-secondary-bg: #D6BA7E;
--role-headline: #D6BA7E;
--role-icon: #BEB6A6;
--role-border: #BEB6A6;
--role-divider: #BEB6A6;
--role-outline: #BEB6A6;
--role-bg-light: #FFFFFF;
--role-bg-dark: #F5F5F3;
--role-text: #2B2B2B;
--role-btn-primary-text: #2B2B2B;
--role-btn-secondary-text: #2B2B2B;
}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.{
"sky-blue": "#4A90E2",
"golden-cream": "#D6BA7E",
"deep-slate-blue": "#2F4F7F",
"muted-sand": "#BEB6A6",
"soft-steel-blue": "#A9C1D9",
"pure-white": "#FFFFFF",
"ivory-mist": "#F5F5F3",
"charcoal": "#2B2B2B"
}