This palette blends the Bay Area’s fog, cable-car warmth, and Pacific depth into a clean urban system that feels inventive without becoming loud. The restrained contrasts make it flexible for civic, tech, or lifestyle brands that want a distinctly San Francisco identity.
This palette blends the Bay Area’s fog, cable-car warmth, and Pacific depth into a clean urban system that feels inventive without becoming loud. The restrained contrasts make it flexible for civic, tech, or lifestyle brands that want a distinctly San Francisco identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors pair Pacific blue with cable-car red and a softened gold, echoing the city’s coast, transit, and hillside light in a way that feels immediately recognizable. Together they create a balanced urban system that is energetic, cultured, and rooted in place.
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 pair Pacific blue with cable-car red and a softened gold, echoing the city’s coast, transit, and hillside light in a way that feels immediately recognizable. Together they create a balanced urban system that is energetic, cultured, and rooted in place.
RolesLogo, Link, Btn Primary Bg
Pacific Harbor anchors the brand with a steady coastal depth that feels credible and distinctly Bay Area.
#1F5E7A31, 94, 122198, 59, 3075, 23, 0, 52RolesBtn Secondary Bg, Headline
Cable Car Red adds historic character and urgency, giving the palette a vivid civic signature.
#B63A31182, 58, 494, 58, 450, 68, 73, 29RolesBtn Outlined Border, Btn Outlined Text
Golden Gate Amber brings a warm accent that suggests bridge light and helps the system feel less cold and more human.
#C79A3B199, 154, 5941, 56, 510, 23, 70, 22The support colors extend the palette with foggy, coastal accents that stay subordinate to the main trio and keep the system balanced. They soften the stronger city colors while preserving a modern San Francisco mood.
RolesIcon, Border
Fog Harbor adds a misted neutral-blue that supports UI structure without competing with the main hues.
#6E8792110, 135, 146198, 14, 5025, 8, 0, 43RolesDivider, Outline
Marina Moss introduces a muted green note that balances the warmer accents and nods to the city’s parks and hills.
#4F7A6D79, 122, 109162, 21, 3935, 0, 11, 52Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F2F4F5242, 244, 245200, 13, 951, 0, 0, 4RolesBg Dark, Text
#11131717, 19, 23220, 15, 826, 17, 0, 91Copy 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-pacific-harbor: #1F5E7A;
--color-cable-car-red: #B63A31;
--color-golden-gate-amber: #C79A3B;
--color-fog-harbor: #6E8792;
--color-marina-moss: #4F7A6D;
--color-pure-white: #FFFFFF;
--color-fog-white: #F2F4F5;
--color-bay-night: #111317;
}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: #1F5E7A;
--role-link: #1F5E7A;
--role-btn-primary-bg: #1F5E7A;
--role-btn-secondary-bg: #B63A31;
--role-headline: #B63A31;
--role-btn-outlined-border: #C79A3B;
--role-btn-outlined-text: #C79A3B;
--role-icon: #6E8792;
--role-border: #6E8792;
--role-divider: #4F7A6D;
--role-outline: #4F7A6D;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #111317;
--role-text: #111317;
}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.{
"pacific-harbor": "#1F5E7A",
"cable-car-red": "#B63A31",
"golden-gate-amber": "#C79A3B",
"fog-harbor": "#6E8792",
"marina-moss": "#4F7A6D",
"pure-white": "#FFFFFF",
"fog-white": "#F2F4F5",
"bay-night": "#111317"
}