FIFA color palette
SportsFIFA's brand color system is anchored by a distinctive blue, supported by gold, white, and a range of neutral grays. The palette reflects professionalism, prestige, and global unity in football.
fifa.comFIFA colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- FIFA BluePrimary50, 98, 149
- FIFA GoldSecondary230, 176, 18
- FIFA WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- FIFA Light GrayBackground245, 246, 250
- FIFA Surface GraySurface233, 236, 239
- FIFA Border GrayBorder197, 204, 214
Text
Three tiers of copy.- FIFA CharcoalText26, 26, 26
- FIFA SlateSecondary text76, 90, 105
- FIFA Muted GrayMuted text138, 153, 168
Semantic
Feedback and state colors.- FIFA Success GreenSuccess46, 139, 87
- FIFA Warning YellowWarning247, 181, 0
- FIFA Error RedError215, 38, 61
- FIFA Info BlueInfo59, 154, 225
Use FIFA's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
fifa-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B9AE1;
--error: #D7263D;
--accent: #FFFFFF;
--border: #C5CCD6;
--primary: #326295;
--success: #2E8B57;
--surface: #E9ECEF;
--warning: #F7B500;
--secondary: #E6B012;
--text-muted: #8A99A8;
--background: #F5F6FA;
--text-primary: #1A1A1A;
--text-secondary: #4C5A69;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.1:1
Pass
Text on surface
Needs 4.5:1 for body text
14.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.0:1
Pass
Muted text on background
Needs 3:1 for large text
2.7:1
Fail
Muted text on surface
Needs 3:1 for large text
2.5:1
Fail
FIFA background, border and text colors
The quiet part of the FIFA palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- FIFA Light GrayBackground
- HEX
- RGB
- HSL
- FIFA Surface GraySurface
- HEX
- RGB
- HSL
- FIFA Border GrayBorder
- HEX
- RGB
- HSL
- FIFA CharcoalText
- HEX
- RGB
- HSL
- FIFA SlateSecondary text
- HEX
- RGB
- HSL
- FIFA Muted GrayMuted text
- HEX
- RGB
- HSL
About FIFA's colors
FIFA's color palette is built around a strong blue and gold pairing, complemented by white and neutral grays for clarity and accessibility. The system is designed for high visibility and a sense of global prestige.
Primary blue and gold create a prestigious, official look.
White and light grays provide clean backgrounds for content.
Accent and semantic colors support clarity in digital interfaces.
Psychology
Blue conveys trust, authority, and unity, aligning with FIFA's global leadership in football. Gold adds a sense of achievement and excellence.
Evolution
FIFA's core palette has remained consistent for decades, with blue and gold as signature colors. Recent digital updates introduced more nuanced grays and semantic colors for modern UI needs.
Where FIFA uses each color
- Primary
FIFA Blue is used for navigation bars, headers, and key brand elements.
- Secondary
FIFA Gold appears in logos, medals, and highlight graphics.
- Accent
FIFA White is used for backgrounds, text, and contrast elements.
- Backgrounds
FIFA Light Gray and Surface Gray are used for page backgrounds and card surfaces.
- Text
FIFA Charcoal and Slate are used for primary and secondary text across digital and print.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for alerts, notifications, and status indicators.
FIFA color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official FIFA primary color is FIFA Blue, with the hex code #326295.
FIFA Blue (#326295) is RGB(50, 98, 149) and CMYK(66, 34, 0, 42).
FIFA uses Light Gray (#F5F6FA), Surface Gray (#E9ECEF), Border Gray (#C5CCD6), and Muted Gray (#8A99A8) for backgrounds and UI elements.
Use FIFA Blue (#326295) for primary branding and navigation, Gold (#E6B012) for highlights, and neutrals for backgrounds and text to maintain brand consistency.
The secondary color is FIFA Gold, #E6B012, and the accent is FIFA White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
4 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies FIFA's colors consistently when it generates UI.
Make something in the spirit of FIFA
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.