UEFA color palette
SportsUEFA's color identity is defined by a distinctive deep blue primary, complemented by white, silver, and accent reds, reflecting its pan-European football heritage. The palette is used consistently across digital, print, and event branding.
uefa.comUEFA colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- UEFA BluePrimary27, 58, 104
- UEFA WhiteSecondary255, 255, 255
- UEFA RedAccent228, 27, 35
Surfaces
Page, cards and dividers.- UEFA Light GrayBackground245, 246, 250
- UEFA Surface GraySurface229, 232, 237
- UEFA Border GrayBorder192, 198, 209
Text
Three tiers of copy.- UEFA Blue TextText27, 58, 104
- UEFA Secondary TextSecondary text76, 90, 106
- UEFA Muted TextMuted text139, 152, 169
Semantic
Feedback and state colors.- UEFA GreenSuccess67, 176, 71
- UEFA YellowWarning247, 181, 0
- UEFA RedError228, 27, 35
- UEFA Blue InfoInfo27, 58, 104
Use UEFA's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
uefa-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1B3A68;
--error: #E41B23;
--accent: #E41B23;
--border: #C0C6D1;
--primary: #1B3A68;
--success: #43B047;
--surface: #E5E8ED;
--warning: #F7B500;
--secondary: #FFFFFF;
--text-muted: #8B98A9;
--background: #F5F6FA;
--text-primary: #1B3A68;
--text-secondary: #4C5A6A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
10.5:1
Pass
Text on surface
Needs 4.5:1 for body text
9.2: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
5.7: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.4:1
Fail
UEFA background, border and text colors
The quiet part of the UEFA palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- UEFA Light GrayBackground
- HEX
- RGB
- HSL
- UEFA Surface GraySurface
- HEX
- RGB
- HSL
- UEFA Border GrayBorder
- HEX
- RGB
- HSL
- UEFA Blue TextText
- HEX
- RGB
- HSL
- UEFA Secondary TextSecondary text
- HEX
- RGB
- HSL
- UEFA Muted TextMuted text
- HEX
- RGB
- HSL
About UEFA's colors
UEFA's palette is built around a strong blue, symbolizing trust and unity, with red as a dynamic accent and clean neutrals for clarity. The colors are balanced to work across digital and physical applications.
Primary blue paired with white for high contrast.
Red accent highlights key actions and elements.
Grays provide neutral backgrounds and surfaces.
Psychology
The deep blue conveys professionalism, stability, and authority, fitting for a leading sports organization. Red adds energy and excitement, while white and gray keep the look modern and accessible.
Evolution
UEFA's core blue and red have remained consistent for decades, reinforcing brand recognition. The use of lighter grays and refined neutrals has increased in digital contexts for a cleaner, more contemporary interface.
Where UEFA uses each color
- Primary
UEFA Blue is used for headers, navigation bars, and key brand marks.
- Secondary
UEFA White serves as the main background and text color for maximum legibility.
- Accent
UEFA Red highlights call-to-action buttons, links, and important notifications.
- Backgrounds
UEFA Light Gray is used for page backgrounds and section dividers in digital products.
- Text
UEFA Blue Text and Secondary Text are used for headlines and body copy, with Muted Text for less prominent information.
- Semantic
Green, yellow, and red are used for status indicators such as success messages, warnings, and errors.
UEFA color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official UEFA primary brand color is UEFA Blue, hex code #1B3A68.
UEFA Blue (#1B3A68) is RGB(27, 58, 104) and CMYK(74, 44, 0, 59).
UEFA uses Light Gray (#F5F6FA), Surface Gray (#E5E8ED), and Border Gray (#C0C6D1) for backgrounds, surfaces, and borders.
Use UEFA Blue (#1B3A68) for primary navigation and branding, with White (#FFFFFF) and grays for backgrounds and surfaces. Red (#E41B23) is reserved for accents and important actions.
The secondary color is UEFA White, #FFFFFF, and the accent is UEFA Red, #E41B23. 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 UEFA's colors consistently when it generates UI.
Make something in the spirit of UEFA
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.