NHL color palette
SportsThe NHL brand color system is built around a bold black primary, complemented by silver, white, and neutral grays, reflecting the league's iconic logo and professional sports identity.
nhl.comNHL colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- NHL BlackPrimary0, 0, 0
- NHL SilverSecondary162, 170, 173
- NHL WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- NHL Light GrayBackground245, 245, 245
- NHL Surface GraySurface229, 229, 229
- NHL Border GrayBorder200, 200, 200
Text
Three tiers of copy.- NHL Black TextText0, 0, 0
- NHL Medium Gray TextSecondary text108, 108, 108
- NHL Silver TextMuted text162, 170, 173
Semantic
Feedback and state colors.- NHL Success GreenSuccess76, 175, 80
- NHL Warning YellowWarning255, 193, 7
- NHL Error RedError211, 47, 47
- NHL Info BlueInfo25, 118, 210
Use NHL's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
nhl-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #FFFFFF;
--border: #C8C8C8;
--primary: #000000;
--success: #4CAF50;
--surface: #E5E5E5;
--warning: #FFC107;
--secondary: #A2AAAD;
--text-muted: #A2AAAD;
--background: #F5F5F5;
--text-primary: #000000;
--text-secondary: #6C6C6C;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
19.3:1
Pass
Text on surface
Needs 4.5:1 for body text
16.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.2: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
NHL gray and neutral colors
The quiet part of the NHL palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- NHL Light GrayBackground
- HEX
- RGB
- HSL
- NHL Surface GraySurface
- HEX
- RGB
- HSL
- NHL Border GrayBorder
- HEX
- RGB
- HSL
- NHL Black TextText
- HEX
- RGB
- HSL
- NHL Medium Gray TextSecondary text
- HEX
- RGB
- HSL
- NHL Silver TextMuted text
- HEX
- RGB
- HSL
About NHL's colors
The NHL color palette is dominated by black, silver, and white, creating a strong, timeless look. These colors convey authority, tradition, and clarity across all brand touchpoints.
Black and silver are used together for contrast and sophistication.
White provides clarity and space in layouts.
Neutral grays support UI elements and backgrounds.
Psychology
Black communicates strength, seriousness, and professionalism, fitting the league's position in sports. Silver and white add balance and a modern, clean feel.
Evolution
The NHL palette has remained consistent for decades, with black and silver as core elements. Minor adjustments to gray tones have modernized the UI, but the overall scheme is stable.
Where NHL uses each color
- Primary
NHL Black is used in the league logo, navigation bars, and primary headlines.
- Secondary
NHL Silver appears in the logo outline, secondary buttons, and UI highlights.
- Accent
NHL White is used for backgrounds, text, and negative space.
- Backgrounds
NHL Light Gray and Surface Gray are used for app and website backgrounds.
- Text
NHL Black Text and Medium Gray Text are used for primary and secondary content, respectively.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for status indicators and alerts in digital products.
NHL color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official NHL primary color is black, with the hex code #000000. This color is central to the league's identity.
NHL Black (#000000) in RGB is (0, 0, 0) and in CMYK is (0, 0, 0, 100). Use these values for accurate reproduction in digital and print.
NHL Silver (#A2AAAD), Light Gray (#F5F5F5), and Surface Gray (#E5E5E5) are the official neutral tones. These are used extensively in UI backgrounds and borders.
Use NHL Black (#000000) for primary branding, Silver (#A2AAAD) for accents, and White (#FFFFFF) for backgrounds and text. Neutral grays support UI clarity and hierarchy.
The secondary color is NHL Silver, #A2AAAD, and the accent is NHL 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 NHL's colors consistently when it generates UI.
Make something in the spirit of NHL
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.