MLS color palette
SportsMajor League Soccer (MLS) uses a bold red, navy, and white color palette that reflects its American roots and modern sports branding. The colors are consistent across digital, print, and apparel applications.
mlssoccer.comMLS colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- MLS RedPrimary226, 35, 26
- MLS NavySecondary0, 47, 101
- MLS WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- MLS Light GrayBackground244, 244, 244
- MLS Surface GraySurface229, 229, 229
- MLS Border GrayBorder204, 204, 204
Text
Three tiers of copy.- MLS CharcoalText34, 34, 34
- MLS Medium GraySecondary text85, 85, 85
- MLS Muted GrayMuted text136, 136, 136
Semantic
Feedback and state colors.- MLS GreenSuccess60, 184, 120
- MLS YellowWarning247, 181, 0
- MLS Error RedError208, 2, 27
- MLS Info BlueInfo0, 114, 206
Use MLS's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
mls-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #D0021B;
--accent: #FFFFFF;
--border: #CCCCCC;
--primary: #E2231A;
--success: #3CB878;
--surface: #E5E5E5;
--warning: #F7B500;
--secondary: #002F65;
--text-muted: #888888;
--background: #F4F4F4;
--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
14.5:1
Pass
Text on surface
Needs 4.5:1 for body text
12.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.9:1
Pass
Muted text on background
Needs 3:1 for large text
3.2:1
Pass
Muted text on surface
Needs 3:1 for large text
2.8:1
Fail
MLS gray and neutral colors
The quiet part of the MLS palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- MLS Light GrayBackground
- HEX
- RGB
- HSL
- MLS Surface GraySurface
- HEX
- RGB
- HSL
- MLS Border GrayBorder
- HEX
- RGB
- HSL
- MLS CharcoalText
- HEX
- RGB
- HSL
- MLS Medium GraySecondary text
- HEX
- RGB
- HSL
- MLS Muted GrayMuted text
- HEX
- RGB
- HSL
About MLS's colors
MLS's color palette is built around a strong, patriotic red and navy, with white and grays for balance and clarity. The scheme is designed for high contrast and legibility across digital and physical assets.
Primary red and navy create a bold, energetic contrast.
White and light grays provide neutral space and clarity.
Accent colors like green and yellow are reserved for semantic UI states.
Psychology
Red conveys energy, passion, and excitement, aligning with the spirit of soccer. Navy adds authority and trust, while white and gray keep the look modern and clean.
Evolution
The MLS palette has remained stable since the league's 2014 rebrand, focusing on a simplified, modern look. Minor adjustments have been made to gray tones for improved digital accessibility.
Where MLS uses each color
- Primary
MLS Red is used in the logo, key calls-to-action, and major headlines.
- Secondary
MLS Navy appears in navigation bars, backgrounds, and secondary buttons.
- Accent
MLS White is used for text on dark backgrounds, logo elements, and negative space.
- Backgrounds
MLS Light Gray and Surface Gray are used for page backgrounds and UI surfaces.
- Text
MLS Charcoal and Medium Gray are used for primary and secondary text throughout the website and apps.
- Semantic
MLS Green, Yellow, Error Red, and Info Blue are used for status indicators, alerts, and notifications.
MLS color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official MLS brand color is MLS Red, with the hex code #E2231A.
MLS Red (#E2231A) in RGB is 226, 35, 26 and in CMYK is 0, 85, 89, 11.
MLS uses several grays: MLS Light Gray (#F4F4F4), Surface Gray (#E5E5E5), Border Gray (#CCCCCC), and Charcoal (#222222) for backgrounds, surfaces, borders, and text.
MLS Red (#E2231A) should be dominant in branding and key actions, with navy and white supporting. Grays and semantic colors are reserved for UI, backgrounds, and status indicators.
The secondary color is MLS Navy, #002F65, and the accent is MLS White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
5 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 MLS's colors consistently when it generates UI.
Make something in the spirit of MLS
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.