This palette draws from the warm golden yellows and contrasting dark greens of the architecture, paired with soft neutral tones to balance and ground the vibrant main colors for versatile brand usage.
This palette draws from the warm golden yellows and contrasting dark greens of the architecture, paired with soft neutral tones to balance and ground the vibrant main colors for versatile brand usage.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
This complementary palette balances a warm golden yellow with a deep emerald green to create a recognizable and harmonious visual system evocative of classic architectural elegance.
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.
This complementary palette balances a warm golden yellow with a deep emerald green to create a recognizable and harmonious visual system evocative of classic architectural elegance.
RolesLogo, Link, Btn Primary Bg, Headline
Golden Yellow conveys warmth, optimism, and timeless elegance, anchoring the brand with a bold yet inviting presence.
#f2c100242, 193, 048, 100, 470, 20, 100, 5RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Emerald Green provides depth and a grounded, natural contrast that enhances the vibrancy of the golden yellow.
#014d401, 77, 64170, 97, 1599, 0, 17, 70Sage Green extends the palette with a softer, muted tonal variation that supports secondary green without overpowering.
#7a9b82122, 155, 130135, 14, 5421, 0, 16, 39Support colors in soft cream and warm muted tones extend the palette for subtle accents and balanced highlights, complementing the bold main colors with understated refinement.
RolesIcon, Border, Divider, Outline
Cream offers a gentle, warm neutral that lightens the palette and balances heavier tones.
#ebe2c6235, 226, 19845, 48, 850, 4, 16, 8Muted Gold subtly reinforces the golden yellow while providing a less saturated support for borders and icons.
#cfc38a207, 195, 13850, 42, 680, 6, 33, 19Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#ffffff255, 255, 2550, 0, 1000, 0, 0, 0#f5f5f5245, 245, 2450, 0, 960, 0, 0, 4RolesBg Dark, Text, Btn Primary Text
#22222234, 34, 340, 0, 130, 0, 0, 87Copy 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-golden-yellow: #f2c100;
--color-emerald-green: #014d40;
--color-sage-green: #7a9b82;
--color-cream: #ebe2c6;
--color-muted-gold: #cfc38a;
--color-pure-white: #ffffff;
--color-light-gray: #f5f5f5;
--color-charcoal-black: #222222;
}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: #f2c100;
--role-link: #f2c100;
--role-btn-primary-bg: #f2c100;
--role-headline: #f2c100;
--role-btn-secondary-bg: #014d40;
--role-btn-outlined-border: #014d40;
--role-btn-outlined-text: #014d40;
--role-icon: #ebe2c6;
--role-border: #ebe2c6;
--role-divider: #ebe2c6;
--role-outline: #ebe2c6;
--role-bg-light: #ffffff;
--role-btn-secondary-text: #ffffff;
--role-bg-dark: #222222;
--role-text: #222222;
--role-btn-primary-text: #222222;
}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.{
"golden-yellow": "#f2c100",
"emerald-green": "#014d40",
"sage-green": "#7a9b82",
"cream": "#ebe2c6",
"muted-gold": "#cfc38a",
"pure-white": "#ffffff",
"light-gray": "#f5f5f5",
"charcoal-black": "#222222"
}