FC Barcelona

FC Barcelona Color Palette & Design System

Explore how Barcelona leverages its distinctive Grey palette to stand out in the competitive general landscape. Every shade serves a strategic purpose.

FC Barcelona Primary

HEX#A50044

RGB165, 0, 68

1. The Visual Identity of FC Barcelona

Color System Overview

FC Barcelona utilizes a high-contrast palette to distinguish itself in the tech sector. The core of this system is the primary color: #A50044, often referred to as "FC Barcelona Pink". This shade was specifically chosen to maximize visibility on digital screens (sRGB gamut) while retaining vibrancy in print (CMYK).

Industry Psychology: Why FC Barcelona Picked Pink

The Blue spectrum is the color of trust, security, and logic. For FC Barcelona, this signals reliability and professionalism.

2. Brand Usage & Strategy

FC Barcelona relies on digital-first branding. The hex code is optimized for RGB screens (mobile/desktop), ensuring that the brand feels native to the user's device.

Design Tip: When using the FC Barcelona hex code (#A50044), ensure you do not inadvertently shift the hue. The official brand identity is strict about maintaining the exact Pink saturation.

3. UI Design & Application Guide

Thinking of using the FC Barcelona color palette in your next project? Here is a professional guide on how to apply these colors effectively for web and mobile interfaces.

Typography Recommendations

When using #A50044 as a background, strict accessibility standards (WCAG) recommend using White (#FFFFFF) for your typeface to ensure maximum readability.

Header Example

This is how your text looks on the FC Barcelona primary color. Ideal for buttons or prominent hero sections.

Action Link

Use #A50044 for links or accents on a clean white card to draw the user's eye without overwhelming them.

Adobe & Figma Workflow

Professional designers working in Figma or Adobe Creative Cloud can instantly apply this palette. Instead of manually picking colors, we recommend creating a "Shared Style" in your design system library named FC Barcelona Primary. This ensures consistency across all your tech related mockups and avoids the risk of accidental hex value drift.

4. Technical Color Data Table

For developers and designers, accuracy is non-negotiable. Below are the precise conversions.

Color Name	HEX Code	RGB Values	CSS Variable
FC Barcelona Primary	#A50044	rgb(165, 0, 68)	var(--fc-barcelona-primary)

5. CSS Implementation

Copy this CSS snippet to your :root to instantly implement the FC Barcelona brand styles.


 :root {

   --barcelona-primary: #A50044;

 }

Explore Related Brand Palettes

Compare FC Barcelona with other top brands in our database.

Twitter Rolex Xbox Nba

Frequently Asked Questions

What is the exact HEX code for FC Barcelona?

The primary hexadecimal color code for FC Barcelona is #A50044. This code is verified for use in web and app design.

Is the FC Barcelona brand color ADA Compliant?

It depends on the background. #A50044 must be checked against white or black text using a Contrast Ratio calculator. Generally, bright brand colors should only be used for buttons or large headings, not body text.