Spalding color palette
SportsSpalding's brand color identity is built around a bold, classic blue paired with strong black and white neutrals, reflecting its heritage in sports equipment. The palette is simple and authoritative, emphasizing clarity and trust.
spalding.comSpalding colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Spalding BluePrimary0, 61, 165
- Spalding BlackSecondary0, 0, 0
- Spalding OrangeAccent241, 90, 34
Surfaces
Page, cards and dividers.- Spalding WhiteBackground255, 255, 255
- Spalding Light GraySurface245, 245, 245
- Spalding SilverBorder209, 211, 212
Text
Three tiers of copy.- Spalding BlackText0, 0, 0
- Spalding BlueSecondary text0, 61, 165
- Spalding GrayMuted text110, 110, 110
Semantic
Feedback and state colors.- Spalding GreenSuccess67, 176, 42
- Spalding YellowWarning255, 199, 44
- Spalding RedError200, 16, 46
- Spalding TealInfo0, 156, 166
Use Spalding's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
spalding-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009CA6;
--error: #C8102E;
--accent: #F15A22;
--border: #D1D3D4;
--primary: #003DA5;
--success: #43B02A;
--surface: #F5F5F5;
--warning: #FFC72C;
--secondary: #000000;
--text-muted: #6E6E6E;
--background: #FFFFFF;
--text-primary: #000000;
--text-secondary: #003DA5;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
21.0:1
Pass
Text on surface
Needs 4.5:1 for body text
19.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
9.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
8.7:1
Pass
Muted text on background
Needs 3:1 for large text
5.1:1
Pass
Muted text on surface
Needs 3:1 for large text
4.7:1
Pass
Spalding background, border and text colors
The quiet part of the Spalding palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Spalding WhiteBackground
- HEX
- RGB
- HSL
- Spalding Light GraySurface
- HEX
- RGB
- HSL
- Spalding SilverBorder
- HEX
- RGB
- HSL
- Spalding BlackText
- HEX
- RGB
- HSL
- Spalding BlueSecondary text
- HEX
- RGB
- HSL
- Spalding GrayMuted text
- HEX
- RGB
- HSL
About Spalding's colors
Spalding's palette is anchored by a deep blue and strong black, conveying professionalism and reliability. Accent orange nods to basketball heritage, while neutrals ensure clarity and versatility.
Primary blue and black provide contrast and brand recognition.
Orange accent is used for highlights and sports context.
Neutrals balance the bold colors for legibility and usability.
Psychology
Blue communicates trust, dependability, and tradition, reinforcing Spalding's reputation in sports. Orange adds energy and excitement, referencing the iconic basketball color.
Evolution
Spalding's palette has remained consistent over time, with blue and black as core brand identifiers. Minor updates have refined the orange accent and neutral tones for modern digital use.
Where Spalding uses each color
- Primary
Spalding Blue is used for navigation bars, headers, and key brand elements.
- Secondary
Spalding Black appears in the logo, text, and product details.
- Accent
Spalding Orange is featured in call-to-action buttons and basketball imagery.
- Backgrounds
Spalding White and Light Gray are used for website backgrounds and product displays.
- Text
Black is primary for body text, with blue for links and highlights, and gray for muted or secondary information.
- Semantic
Green, yellow, and red are used for status indicators and alerts in digital interfaces.
Spalding color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Spalding brand color is Spalding Blue, with the hex code #003DA5.
Spalding Blue (#003DA5) in RGB is 0, 61, 165. In CMYK, it is approximately 100, 63, 0, 35.
Spalding uses Spalding Black (#000000), Spalding White (#FFFFFF), and Spalding Light Gray (#F5F5F5) for neutral backgrounds and text.
Use Spalding Blue (#003DA5) for primary brand elements, Black (#000000) for text, and Orange (#F15A22) for accents. Neutrals provide background and surface contrast for clarity.
The secondary color is Spalding Black, #000000, and the accent is Spalding Orange, #F15A22. 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 Spalding's colors consistently when it generates UI.
Make something in the spirit of Spalding
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.