This palette channels FIFA’s global sports authority through a disciplined mix of deep navy, vivid cyan, and electric green inspired by the brand’s existing identity. The result feels international and competitive while staying clean enough for digital products, event branding, and broadcast-style interfaces.
This palette channels FIFA’s global sports authority through a disciplined mix of deep navy, vivid cyan, and electric green inspired by the brand’s existing identity. The result feels international and competitive while staying clean enough for digital products, event branding, and broadcast-style interfaces.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors pair FIFA-style deep navy, bright cyan, and vivid green to create a recognizable sports system with global energy and modern digital clarity. Their contrast feels competitive and international rather than decorative.
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 FIFA-style deep navy, bright cyan, and vivid green to create a recognizable sports system with global energy and modern digital clarity. Their contrast feels competitive and international rather than decorative.
RolesLogo, Headline
Navy gives the palette the formal FIFA-like foundation and keeps the brand feeling authoritative and global.
#0121691, 33, 105222, 98, 2199, 69, 0, 59RolesLink, Btn Primary Bg
Cyan adds broadcast-style clarity and makes interactive elements feel energetic and modern.
#00A3E00, 163, 224196, 100, 44100, 27, 0, 12RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Green brings a fresh football-field signal that adds motion and distinction without overpowering the system.
#00B1400, 177, 64142, 100, 35100, 0, 64, 31The support colors extend the FIFA-inspired palette with cooler and softer accents that keep the interface lively while staying subordinate to the main sports hues.
RolesIcon, Border
Steel Blue softens the stronger main colors and works well for UI structure without competing for attention.
#3D6FB661, 111, 182215, 50, 4866, 39, 0, 29RolesDivider, Outline
Seafoam adds a lighter athletic accent that supports separation and layering while remaining quiet.
#7FD9C5127, 217, 197167, 54, 6741, 0, 9, 15Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F3F6FA243, 246, 250214, 41, 973, 2, 0, 2RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#11182717, 24, 39221, 39, 1156, 38, 0, 85Copy 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: #012169;
--color-cyan: #00A3E0;
--color-green: #00B140;
--color-steel-blue: #3D6FB6;
--color-seafoam: #7FD9C5;
--color-white: #FFFFFF;
--color-ivory: #F3F6FA;
--color-charcoal: #111827;
}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: #012169;
--role-headline: #012169;
--role-link: #00A3E0;
--role-btn-primary-bg: #00A3E0;
--role-btn-secondary-bg: #00B140;
--role-btn-outlined-border: #00B140;
--role-btn-outlined-text: #00B140;
--role-icon: #3D6FB6;
--role-border: #3D6FB6;
--role-divider: #7FD9C5;
--role-outline: #7FD9C5;
--role-bg-light: #FFFFFF;
--role-bg-dark: #111827;
--role-text: #111827;
--role-btn-primary-text: #111827;
--role-btn-secondary-text: #111827;
}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": "#012169",
"cyan": "#00A3E0",
"green": "#00B140",
"steel-blue": "#3D6FB6",
"seafoam": "#7FD9C5",
"white": "#FFFFFF",
"ivory": "#F3F6FA",
"charcoal": "#111827"
}