NBA color palette
SportsThe NBA's color identity is anchored by a deep blue, accented with red and white, reflecting its American heritage and legacy. The palette is clean and bold, supporting strong contrast and clarity across digital and print applications.
nba.comNBA colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- NBA BluePrimary37, 59, 115
- NBA RedSecondary201, 8, 42
- NBA WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- NBA Light GrayBackground245, 245, 245
- NBA Surface GraySurface229, 229, 229
- NBA Border GrayBorder209, 211, 212
Text
Three tiers of copy.- NBA Blue TextText37, 59, 115
- NBA CharcoalSecondary text34, 34, 34
- NBA Muted GrayMuted text110, 110, 110
Semantic
Feedback and state colors.- NBA Success GreenSuccess67, 160, 71
- NBA Warning YellowWarning249, 168, 37
- NBA Error RedError211, 47, 47
- NBA Info BlueInfo25, 118, 210
Use NBA's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
nba-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #FFFFFF;
--border: #D1D3D4;
--primary: #253B73;
--success: #43A047;
--surface: #E5E5E5;
--warning: #F9A825;
--secondary: #C9082A;
--text-muted: #6E6E6E;
--background: #F5F5F5;
--text-primary: #253B73;
--text-secondary: #222222;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
9.9:1
Pass
Text on surface
Needs 4.5:1 for body text
8.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
14.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
12.6:1
Pass
Muted text on background
Needs 3:1 for large text
4.7:1
Pass
Muted text on surface
Needs 3:1 for large text
4.0:1
Pass
NBA background, border and text colors
The quiet part of the NBA palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- NBA Light GrayBackground
- HEX
- RGB
- HSL
- NBA Surface GraySurface
- HEX
- RGB
- HSL
- NBA Border GrayBorder
- HEX
- RGB
- HSL
- NBA Blue TextText
- HEX
- RGB
- HSL
- NBA CharcoalSecondary text
- HEX
- RGB
- HSL
- NBA Muted GrayMuted text
- HEX
- RGB
- HSL
About NBA's colors
The NBA color palette uses a triadic scheme of blue, red, and white, evoking energy, trust, and clarity. Neutral grays support accessibility and modern UI needs.
Primary blue and secondary red are complementary and create strong visual contrast.
White is used for clarity and separation.
Grays provide neutral backgrounds and surfaces for content.
Psychology
Blue conveys trust, authority, and professionalism, aligning with the NBA's stature. Red adds energy and excitement, while white and gray tones ensure readability and balance.
Evolution
The NBA's core blue, red, and white palette has remained consistent for decades, reinforcing brand recognition. Recent updates have refined the gray tones for digital clarity and accessibility.
Where NBA uses each color
- Primary
NBA Blue is used in the logo, website navigation bars, and primary call-to-action buttons.
- Secondary
NBA Red appears in the logo, highlights, and promotional graphics.
- Accent
NBA White is used for backgrounds, text, and logo separation.
- Backgrounds
NBA Light Gray is the main background color on the website and app screens.
- Text
NBA Blue and Charcoal are used for primary and secondary text, ensuring legibility.
- Semantic
Success, warning, error, and info colors are used for notifications, status indicators, and UI feedback.
NBA color questions
Hex codes, RGB values, neutrals and how to use the palette.
The NBA primary color hex code is #253B73. This deep blue is central to the league's branding.
NBA Blue (#253B73) is RGB(37, 59, 115) and CMYK(90, 72, 9, 2). Use these values for accurate color reproduction in digital and print.
The NBA uses NBA Light Gray (#F5F5F5), NBA Surface Gray (#E5E5E5), and NBA Border Gray (#D1D3D4) for backgrounds, surfaces, and borders. These neutrals support content clarity and accessibility.
Use NBA Blue (#253B73) for primary branding elements, NBA Red (#C9082A) for accents, and NBA White (#FFFFFF) for backgrounds and separation. Grays are reserved for UI surfaces and text backgrounds.
The secondary color is NBA Red, #C9082A, and the accent is NBA 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 NBA's colors consistently when it generates UI.
Make something in the spirit of NBA
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.