New Balance color palette
FashionNew Balance's color identity centers on a bold red, complemented by a palette of grayscale neutrals for a modern, athletic look. The brand uses these colors consistently across footwear, apparel, and digital platforms.
newbalance.comNew Balance colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- New Balance RedPrimary207, 10, 44
- New Balance BlackSecondary35, 31, 32
- New Balance WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- New Balance Light GrayBackground245, 245, 245
- New Balance Surface GraySurface229, 229, 229
- New Balance Border GrayBorder209, 211, 212
Text
Three tiers of copy.- New Balance Text BlackText35, 31, 32
- New Balance Text GraySecondary text109, 110, 113
- New Balance Muted GrayMuted text167, 168, 170
Semantic
Feedback and state colors.- New Balance Success GreenSuccess75, 174, 79
- New Balance Warning YellowWarning246, 168, 0
- New Balance Error RedError207, 10, 44
- New Balance Info BlueInfo0, 114, 206
Use New Balance's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
new-balance-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #CF0A2C;
--accent: #FFFFFF;
--border: #D1D3D4;
--primary: #CF0A2C;
--success: #4BAE4F;
--surface: #E5E5E5;
--warning: #F6A800;
--secondary: #231F20;
--text-muted: #A7A8AA;
--background: #F5F5F5;
--text-primary: #231F20;
--text-secondary: #6D6E71;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.0:1
Pass
Text on surface
Needs 4.5:1 for body text
12.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.0:1
Fail
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
New Balance gray and neutral colors
The quiet part of the New Balance palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- New Balance Light GrayBackground
- HEX
- RGB
- HSL
- New Balance Surface GraySurface
- HEX
- RGB
- HSL
- New Balance Border GrayBorder
- HEX
- RGB
- HSL
- New Balance Text BlackText
- HEX
- RGB
- HSL
- New Balance Text GraySecondary text
- HEX
- RGB
- HSL
- New Balance Muted GrayMuted text
- HEX
- RGB
- HSL
About New Balance's colors
New Balance's palette is dominated by a signature red, balanced by black, white, and a range of grays for clarity and versatility. The use of vivid red ensures strong brand recognition in both digital and physical contexts.
Primary red contrasts with white for high visibility.
Neutral grays provide balance and support for content.
Black anchors typography and key UI elements.
Psychology
The bold red conveys energy, confidence, and athleticism, aligning with the brand's sports heritage. Grays and black add professionalism and a modern edge.
Evolution
The core red and grayscale palette has remained consistent for decades, reinforcing brand recognition. Minor adjustments to gray tones have modernized the UI without altering the brand's core identity.
Where New Balance uses each color
- Primary
Used for logos, call-to-action buttons, and key highlights on packaging and digital assets.
- Secondary
Appears in navigation bars, headlines, and background elements for contrast.
- Accent
Used for backgrounds, negative space, and product photography backdrops.
- Backgrounds
Light gray backgrounds are standard on website pages and product listings.
- Text
Black and gray tones are used for primary and secondary text throughout all digital and print materials.
- Semantic
Red is used for error states, green for success messages, yellow for warnings, and blue for informational highlights in digital interfaces.
New Balance color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official New Balance primary color hex code is #CF0A2C. This bold red is used across all major brand assets.
The RGB value for #CF0A2C is (207, 10, 44). For CMYK, it is approximately (0, 95, 79, 19).
New Balance uses a range of grays such as #F5F5F5 (Light Gray), #E5E5E5 (Surface Gray), and #D1D3D4 (Border Gray) for backgrounds and UI elements. These neutrals provide a clean, modern foundation for the brand's digital presence.
Use #CF0A2C for key brand elements and calls to action, with grays and black for backgrounds and text. Accent with white and semantic colors for clarity and accessibility.
The secondary color is New Balance Black, #231F20, and the accent is New Balance White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
3 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 New Balance's colors consistently when it generates UI.
Make something in the spirit of New Balance
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.