Team Colors is a reference of HEX, RGB, CMYK, and Pantone color values of major league sports teams.
How It Works
Site is built on the react framework.
Color data is housed in a single
src/teams.json. Any changes to team colors can be done there. Note on colors: Color definitions for each team are in arrays and grouped by color mode. Color values should match index position in the array across color modes, for example:
colors: rgb: TEAMS-RGB-BLUE, TEAMS-RGB-RED hex: TEAMS-HEX-BLUE, TEAMS-HEX-RED
Source artwork for each team is grouped by league in
sketch. Production versions of these logo should be in
.svg format in
Edit Team Color or Name
.json file in
src/teams.json, and edit the info you need.
Add a Team
- Determine the team’s league
- Following the established pattern, add the team’s name and colors the
- Add a vector logo for the team in its corresponding
.sketchleague file in
sketchwith the team’s name (as referenced in its
.jsonfile) in lowercase with hyphens, i.e. "utah-jazz"
- Export the team’s
- Preferably, optimize the svg (with a tool like SVGO)
yarn build, commit, push
Official Color References
All NBA colors are official (source user & pass: nbamedia).
The NBA only provides RGB, CMYK, and Pantone colors for each team, so the HEX color is a programmatic conversion of the RGB color.
All NFL colors are official (see sources below).
The NFL provides official RGB, HEX, CMYK, and Pantone colors (so none of the colors you see on Team Colors are conversions).
The NFL has logo slicks which detail team color values. These are provided on a per-conference basis. Note: each of these source links are over 100MB in size, so they take a while to download.
MLB colors have been extracted from the official “RGB Digital Art” spot color logo slicks provided at MLB Press Box (user account required). They were not explicitly stated values, but they are color values pulled from individual team logos in an official MLB document.
The extracted colors are in HEX form and their RGB counterparts are generated programmatically.
NHL colors are official. As per Michael Sharer of the NHL.
MLS colors are currently approximations, with the exceptions listed below. I am working on getting official colors of the remaining teams.
These leagues’ teams and colors are currently approximations. I am working on getting official colors. If you know how/where to find them, please open an issue here in Github.
- Switch to
- Improve filtering with fuzzy string search
- Improve error states for when data doesn't render
- Consider alternatives to no-js users rather than just "here's the raw data" (something that doesn't required a build if a single color in the JSON file is changed)
- Possibly add team
idmanually to JSON file ??