Atlético Madrid color palette
SportsAtlético Madrid's color identity is defined by its iconic deep red and blue, accented by white, reflecting the club's heritage and Spanish roots. The palette is bold and instantly recognizable in sports branding.
en.atleticodemadrid.comAtlético Madrid colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Atlético RedPrimary198, 12, 48
- Atlético BlueSecondary39, 46, 97
- Atlético WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Atlético Light GrayBackground246, 246, 246
- Atlético Surface GraySurface229, 229, 229
- Atlético Border GrayBorder176, 176, 176
Text
Three tiers of copy.- Atlético BlackText26, 26, 26
- Atlético BlueSecondary text39, 46, 97
- Atlético Muted GrayMuted text109, 109, 109
Semantic
Feedback and state colors.- Atlético Success GreenSuccess75, 181, 67
- Atlético Warning YellowWarning255, 194, 14
- Atlético Error RedError215, 38, 61
- Atlético Info BlueInfo0, 159, 218
Use Atlético Madrid's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
atletico-madrid-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009FDA;
--error: #D7263D;
--accent: #FFFFFF;
--border: #B0B0B0;
--primary: #C60C30;
--success: #4BB543;
--surface: #E5E5E5;
--warning: #FFC20E;
--secondary: #272E61;
--text-muted: #6D6D6D;
--background: #F6F6F6;
--text-primary: #1A1A1A;
--text-secondary: #272E61;
}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.1:1
Pass
Text on surface
Needs 4.5:1 for body text
13.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
11.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
10.1:1
Pass
Muted text on background
Needs 3:1 for large text
4.8:1
Pass
Muted text on surface
Needs 3:1 for large text
4.1:1
Pass
Atlético Madrid background, border and text colors
The quiet part of the Atlético Madrid palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Atlético Light GrayBackground
- HEX
- RGB
- HSL
- Atlético Surface GraySurface
- HEX
- RGB
- HSL
- Atlético Border GrayBorder
- HEX
- RGB
- HSL
- Atlético BlackText
- HEX
- RGB
- HSL
- Atlético BlueSecondary text
- HEX
- RGB
- HSL
- Atlético Muted GrayMuted text
- HEX
- RGB
- HSL
About Atlético Madrid's colors
Atlético Madrid's palette is based on a strong triad of red, blue, and white, creating a bold and patriotic identity. The colors are highly saturated, conveying energy and tradition.
Red and blue are complementary and create visual tension.
White is used for contrast and clarity.
Grays provide neutral backgrounds for digital interfaces.
Psychology
Red symbolizes passion, strength, and determination, fitting for a football club. Blue adds trust and stability, while white brings in a sense of fairness and clarity.
Evolution
Atlético Madrid's core colors have remained stable for decades, with only minor adjustments to shades for digital and print consistency. The addition of grays and neutrals has increased with the growth of digital platforms.
Where Atlético Madrid uses each color
- Primary
Atlético Red is featured on home jerseys, the club crest, and primary navigation elements on the website.
- Secondary
Atlético Blue is used on away kits, secondary buttons, and highlights in digital media.
- Accent
Atlético White appears in the club's stripes, text, and as a background for contrast.
- Backgrounds
Atlético Light Gray is used for website backgrounds and app screens to provide a neutral base.
- Text
Atlético Black and Atlético Blue are used for primary and secondary text across digital and print materials.
- Semantic
Success, warning, error, and info colors are used in UI notifications and alerts on the club's digital platforms.
Atlético Madrid color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Atlético Madrid primary brand color hex code is #C60C30, known as Atlético Red.
Atlético Red (#C60C30) in RGB is 198, 12, 48. In CMYK, it is approximately 0, 94, 76, 22.
Atlético Madrid uses several grays such as Atlético Light Gray (#F6F6F6), Surface Gray (#E5E5E5), and Border Gray (#B0B0B0) for backgrounds and UI elements.
Use Atlético Red (#C60C30) for primary branding, Atlético Blue (#272E61) for secondary elements, and Atlético White (#FFFFFF) for contrast and clarity. Grays and semantic colors support digital UI and accessibility.
The secondary color is Atlético Blue, #272E61, and the accent is Atlético White, #FFFFFF. 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 Atlético Madrid's colors consistently when it generates UI.
Make something in the spirit of Atlético Madrid
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.