FC Barcelona color palette
SportsFC Barcelona's color identity is defined by its iconic deep blue and garnet red, accented with yellow and complemented by a rich palette of supporting tones. These colors are rooted in the club's heritage and are used consistently across kits, digital platforms, and branding.
fcbarcelona.comFC Barcelona colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Barça GarnetPrimary165, 0, 68
- Barça BlueSecondary0, 77, 152
- Barça YellowAccent253, 185, 19
Surfaces
Page, cards and dividers.- Barça WhiteBackground255, 255, 255
- Barça Light GraySurface245, 245, 245
- Barça SilverBorder211, 211, 211
Text
Three tiers of copy.- Barça CharcoalText34, 34, 34
- Barça GraySecondary text85, 85, 85
- Barça Muted GrayMuted text136, 136, 136
Semantic
Feedback and state colors.- Barça GreenSuccess59, 181, 74
- Barça AmberWarning255, 183, 0
- Barça RedError211, 47, 47
- Barça Info BlueInfo25, 118, 210
Use FC Barcelona's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
fc-barcelona-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #FDB913;
--border: #D3D3D3;
--primary: #A50044;
--success: #3BB54A;
--surface: #F5F5F5;
--warning: #FFB700;
--secondary: #004D98;
--text-muted: #888888;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #555555;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.8:1
Pass
Muted text on background
Needs 3:1 for large text
3.5:1
Pass
Muted text on surface
Needs 3:1 for large text
3.3:1
Pass
FC Barcelona gray and neutral colors
The quiet part of the FC Barcelona palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Barça WhiteBackground
- HEX
- RGB
- HSL
- Barça Light GraySurface
- HEX
- RGB
- HSL
- Barça SilverBorder
- HEX
- RGB
- HSL
- Barça CharcoalText
- HEX
- RGB
- HSL
- Barça GraySecondary text
- HEX
- RGB
- HSL
- Barça Muted GrayMuted text
- HEX
- RGB
- HSL
About FC Barcelona's colors
FC Barcelona's palette is built around complementary deep blue and garnet red, with yellow as a vibrant accent. This triadic scheme ensures strong visual contrast and brand recognition.
Garnet and blue are used together for maximum contrast.
Yellow is reserved for highlights and accents.
Neutral grays and white provide balance and readability.
Psychology
The garnet red conveys passion and energy, while the blue represents loyalty and stability. Yellow adds optimism and draws attention to key elements.
Evolution
The core blue and garnet colors have remained stable since the club's founding, with minor adjustments for digital clarity. Accent and neutral tones have been refined for modern digital and print applications.
Where FC Barcelona uses each color
- Primary
Barça Garnet is featured on the home jersey stripes and key website elements.
- Secondary
Barça Blue is used for backgrounds, headers, and secondary stripes on kits.
- Accent
Barça Yellow highlights logos, trim, and call-to-action buttons.
- Backgrounds
Barça White and Light Gray provide clean backgrounds for digital and print materials.
- Text
Barça Charcoal and Gray are used for primary and secondary text across all platforms.
- Semantic
Green, Amber, Red, and Info Blue are used for status indicators and notifications in digital interfaces.
FC Barcelona color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official primary color of FC Barcelona is Barça Garnet, hex code #A50044.
Barça Garnet (#A50044) is RGB(165, 0, 68) and CMYK(0, 100, 59, 35).
Barça Light Gray (#F5F5F5), Barça Silver (#D3D3D3), and Barça Charcoal (#222222) are used for backgrounds, borders, and text.
Use Barça Garnet and Blue for primary branding, with Yellow as an accent and neutrals for backgrounds and text. Maintain high contrast and follow official guidelines for digital and print consistency.
The secondary color is Barça Blue, #004D98, and the accent is Barça Yellow, #FDB913. Together with the primary they make up the three brand colors at the top of this page.
6 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 FC Barcelona's colors consistently when it generates UI.
Make something in the spirit of FC Barcelona
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.