La Liga color palette
SportsLa Liga's color identity centers on a vibrant, multi-color palette anchored by a signature magenta, reflecting the league's dynamic and inclusive spirit. The palette is designed for high visibility and energetic presentation across digital and broadcast platforms.
laliga.comLa Liga colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- LaLiga MagentaPrimary230, 0, 122
- LaLiga BlackSecondary35, 31, 32
- LaLiga YellowAccent255, 214, 0
Surfaces
Page, cards and dividers.- LaLiga WhiteBackground255, 255, 255
- LaLiga Light GraySurface245, 245, 245
- LaLiga Border GrayBorder209, 211, 212
Text
Three tiers of copy.- LaLiga BlackText35, 31, 32
- LaLiga Medium GraySecondary text109, 110, 113
- LaLiga Muted GrayMuted text167, 168, 170
Semantic
Feedback and state colors.- LaLiga GreenSuccess57, 181, 74
- LaLiga YellowWarning255, 214, 0
- LaLiga MagentaError230, 0, 122
- LaLiga BlueInfo0, 174, 239
Use La Liga's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
la-liga-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00AEEF;
--error: #E6007A;
--accent: #FFD600;
--border: #D1D3D4;
--primary: #E6007A;
--success: #39B54A;
--surface: #F5F5F5;
--warning: #FFD600;
--secondary: #231F20;
--text-muted: #A7A8AA;
--background: #FFFFFF;
--text-primary: #231F20;
--text-secondary: #6D6E71;
}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.3:1
Pass
Text on surface
Needs 4.5:1 for body text
15.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
La Liga gray and neutral colors
The quiet part of the La Liga palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- LaLiga WhiteBackground
- HEX
- RGB
- HSL
- LaLiga Light GraySurface
- HEX
- RGB
- HSL
- LaLiga Border GrayBorder
- HEX
- RGB
- HSL
- LaLiga BlackText
- HEX
- RGB
- HSL
- LaLiga Medium GraySecondary text
- HEX
- RGB
- HSL
- LaLiga Muted GrayMuted text
- HEX
- RGB
- HSL
About La Liga's colors
La Liga's palette uses a bold magenta as its anchor, supported by black, white, and a spectrum of accent colors for vibrancy and inclusivity. The combination ensures strong contrast and high visibility, essential for sports branding.
Primary magenta contrasts with black and white for clarity.
Accent yellow and blue provide energy and highlight key elements.
Neutral grays support readability and structure in digital layouts.
Psychology
Magenta conveys energy, excitement, and modernity, aligning with La Liga's dynamic image. The use of black and white grounds the palette, while yellow and blue add optimism and trust.
Evolution
La Liga's palette has remained consistent since its 2016 rebrand, which introduced the magenta as the primary color. The supporting colors and neutrals have been stable, ensuring strong brand recognition.
Where La Liga uses each color
- Primary
LaLiga Magenta is used in the logo, primary call-to-action buttons, and key highlights on digital platforms.
- Secondary
LaLiga Black appears in navigation bars, text, and backgrounds for contrast.
- Accent
LaLiga Yellow is used for highlights, notifications, and promotional banners.
- Backgrounds
LaLiga White and Light Gray are used for app and website backgrounds to maintain readability.
- Text
LaLiga Black and Medium Gray are used for primary and secondary text, while Muted Gray is for disabled or less prominent text.
- Semantic
Green, Yellow, and Magenta are used for success, warning, and error states respectively, while Blue is used for informational elements.
La Liga color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official La Liga brand color hex code is #E6007A, known as LaLiga Magenta.
LaLiga Magenta (#E6007A) is RGB(230, 0, 122) and CMYK(0, 100, 0, 10).
La Liga uses LaLiga Light Gray (#F5F5F5), Border Gray (#D1D3D4), Medium Gray (#6D6E71), and Muted Gray (#A7A8AA) for backgrounds, borders, and text.
Use LaLiga Magenta (#E6007A) for primary actions and branding, with black and white for structure and legibility. Accent colors like yellow and blue should highlight important information or actions.
The secondary color is LaLiga Black, #231F20, and the accent is LaLiga Yellow, #FFD600. 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 La Liga's colors consistently when it generates UI.
Make something in the spirit of La Liga
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.