Bundesliga color palette
SportsThe Bundesliga brand identity is defined by a bold red primary color, supported by black, white, and gray neutrals for a modern, high-contrast sports presentation. The palette is consistent across digital, broadcast, and print applications.
bundesliga.comBundesliga colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Bundesliga RedPrimary226, 0, 26
- Bundesliga BlackSecondary0, 0, 0
- Bundesliga WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Bundesliga Light GrayBackground245, 245, 245
- Bundesliga Surface GraySurface237, 237, 237
- Bundesliga Border GrayBorder204, 204, 204
Text
Three tiers of copy.- Bundesliga Text BlackText0, 0, 0
- Bundesliga Text GraySecondary text102, 102, 102
- Bundesliga Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Bundesliga Success GreenSuccess75, 181, 67
- Bundesliga Warning YellowWarning255, 180, 0
- Bundesliga Error RedError226, 0, 26
- Bundesliga Info BlueInfo0, 114, 206
Use Bundesliga's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
bundesliga-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #E2001A;
--accent: #FFFFFF;
--border: #CCCCCC;
--primary: #E2001A;
--success: #4BB543;
--surface: #EDEDED;
--warning: #FFB400;
--secondary: #000000;
--text-muted: #999999;
--background: #F5F5F5;
--text-primary: #000000;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
19.3:1
Pass
Text on surface
Needs 4.5:1 for body text
17.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.9:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Bundesliga gray and neutral colors
The quiet part of the Bundesliga palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Bundesliga Light GrayBackground
- HEX
- RGB
- HSL
- Bundesliga Surface GraySurface
- HEX
- RGB
- HSL
- Bundesliga Border GrayBorder
- HEX
- RGB
- HSL
- Bundesliga Text BlackText
- HEX
- RGB
- HSL
- Bundesliga Text GraySecondary text
- HEX
- RGB
- HSL
- Bundesliga Muted GrayMuted text
- HEX
- RGB
- HSL
About Bundesliga's colors
Bundesliga's palette is built around a vivid red, contrasted with black and white for clarity and impact. The use of neutral grays supports readability and a modern UI aesthetic.
Red and black create a strong, energetic contrast.
White and light grays provide balance and space.
Accent blue and green are reserved for semantic feedback.
Psychology
Red conveys excitement, passion, and energy, aligning with the dynamic nature of football. Black and white add authority and clarity, ensuring information stands out.
Evolution
The core red, black, and white palette has remained stable for decades, reinforcing brand recognition. Minor adjustments to gray tones have been made for digital accessibility and modern UI needs.
Where Bundesliga uses each color
- Primary
Bundesliga Red is used in the logo, headlines, and key call-to-action buttons.
- Secondary
Bundesliga Black appears in navigation bars, text, and backgrounds for contrast.
- Accent
Bundesliga White is used for text on red backgrounds and as a primary background color.
- Backgrounds
Light and surface grays are used for app screens, tables, and content backgrounds.
- Text
Text Black and Text Gray are used for primary and secondary content across digital and print.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for notifications, status indicators, and alerts.
Bundesliga color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Bundesliga brand color is Bundesliga Red, hex code #E2001A. This color is used prominently in the logo and key brand elements.
Bundesliga Red (#E2001A) has an RGB value of 226, 0, 26 and a typical CMYK value of 0, 100, 88, 11. Use these values for accurate reproduction in digital and print.
Bundesliga uses several grays: Light Gray (#F5F5F5), Surface Gray (#EDEDED), Border Gray (#CCCCCC), Text Gray (#666666), and Muted Gray (#999999). These ensure readability and modern UI consistency.
Bundesliga Red (#E2001A) should be reserved for key brand elements and calls to action, while black, white, and grays structure the UI and content. Semantic colors are used only for feedback and status indications.
The secondary color is Bundesliga Black, #000000, and the accent is Bundesliga 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 Bundesliga's colors consistently when it generates UI.
Make something in the spirit of Bundesliga
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.