Team Colors

Team Colors is a reference of HEX, RGB, CMYK, and Pantone color values of major league sports teams.

Technical Overview

"Server" side

Gulp is used to compile all necessary static assets locally into assets/. Those are then pushed to github pages which deploys and hosts the assets (hence the CNAME file).

To run, simply do npm install to get all necessary packages. Then run gulp to compile everything (or for developing).

Client side

Static index.html file is loaded with all necessary data. If javascript is supported, it loads styles and vector versions of the team logos (if SVG is supported by the browser).

Project Structure

Color data is rendered from each correspondingly-named league .json file in src/data/. Any changes to the data of the page can be done from those files.

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

Edit Team Color or Name

Determine the team’s league
Find the league’s corresponding .json file in src/data/
Edit it
Run gulp
Commit

Adding a Team

Determine the team’s league
Following the established pattern, add the team’s name and colors in its league’s .json file in src/data/
Add a vector logo for the team in its corresponding .sketch league file in src/img/ with the team’s name (as referenced in its .json file) in lowercase with hyphens, i.e. "utah-jazz"
Export the team’s .svg logo to assets/img/
Run gulp
Commit

Adding a League

Same essential steps as adding a team, except you would need new league files, i.e. a new file in src/data matching the league’s name (lowercase) with the league’s teams and colors, a new .sketch file in src/img/ with the league’s teams and their logos, etc.

Official Color References

NBA

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.

NFL

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.

EPL, MLB, MLS, NHL

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.

beacrea / teamcolors.github.io