This palette channels Super Bowl energy through a high-contrast, broadcast-ready mix of deep navy, championship red, and metallic gold. The system feels bold and celebratory while staying grounded with crisp neutrals that keep the look legible across digital and event touchpoints.
This palette channels Super Bowl energy through a high-contrast, broadcast-ready mix of deep navy, championship red, and metallic gold. The system feels bold and celebratory while staying grounded with crisp neutrals that keep the look legible across digital and event touchpoints.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
Deep navy and championship red create the core rivalry energy of the palette, while metallic gold adds the celebratory finish expected from a Super Bowl-inspired system. Together they feel iconic, high-impact, and instantly tied to big-game spectacle.
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.
Deep navy and championship red create the core rivalry energy of the palette, while metallic gold adds the celebratory finish expected from a Super Bowl-inspired system. Together they feel iconic, high-impact, and instantly tied to big-game spectacle.
RolesLogo, Btn Primary Bg, Headline
Navy gives the palette authority and a broadcast-sports backbone.
#0B1F3A11, 31, 58214, 68, 1481, 47, 0, 77RolesLink, Btn Secondary Bg
Crimson brings urgency and rivalry energy that fits the pace of game-day visuals.
#C1121F193, 18, 31356, 83, 410, 91, 84, 24RolesBtn Outlined Border, Btn Outlined Text
Gold adds a championship cue that makes the palette feel celebratory and premium.
#D4AF37212, 175, 5546, 65, 520, 17, 74, 17The support colors soften the competition between the main hues and extend the palette into usable accent territory for charts, badges, and supporting UI moments. They stay refined and secondary so the core Super Bowl identity remains dominant.
RolesIcon, Border
Burgundy bridges the red and navy with a deeper accent that feels mature and controlled.
#8A2D2D138, 45, 450, 51, 360, 67, 67, 46RolesDivider, Outline
Bronze echoes the gold family in a quieter way, helping structure layouts without stealing attention.
#7A5C2E122, 92, 4636, 45, 330, 25, 62, 52Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F3F1EC243, 241, 23643, 23, 940, 1, 3, 5RolesText
#11111117, 17, 170, 0, 70, 0, 0, 93Copy 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: #0B1F3A;
--color-crimson: #C1121F;
--color-gold: #D4AF37;
--color-burgundy: #8A2D2D;
--color-bronze: #7A5C2E;
--color-white: #FFFFFF;
--color-ivory: #F3F1EC;
--color-charcoal: #111111;
}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: #0B1F3A;
--role-btn-primary-bg: #0B1F3A;
--role-headline: #0B1F3A;
--role-link: #C1121F;
--role-btn-secondary-bg: #C1121F;
--role-btn-outlined-border: #D4AF37;
--role-btn-outlined-text: #D4AF37;
--role-icon: #8A2D2D;
--role-border: #8A2D2D;
--role-divider: #7A5C2E;
--role-outline: #7A5C2E;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F3F1EC;
--role-text: #111111;
}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": "#0B1F3A",
"crimson": "#C1121F",
"gold": "#D4AF37",
"burgundy": "#8A2D2D",
"bronze": "#7A5C2E",
"white": "#FFFFFF",
"ivory": "#F3F1EC",
"charcoal": "#111111"
}