jimniels/teamcolors

Team Colors for professional sports teams

Team Colors

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

How-To

Install: yarn install Development: yarn start Build: yarn build

How It Works

Site is built on the react framework. index.html is the shell container for react app. If javascript is not supported, a link is shown to the raw JSON data which has all color information.

Color data is housed in a single .json file 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 public/img.

Edit Team Color or Name

Find teams .json file in src/teams.json, and edit the info you need.

Add a Team

1. Determine the team’s league
2. Following the established pattern, add the team’s name and colors the .json file
3. Add a vector logo for the team in its corresponding .sketch league file in sketch with the team’s name (as referenced in its .json file) in lowercase with hyphens, i.e. "utah-jazz"
4. Export the team’s .svg logo to public/img/
5. Preferably, optimize the svg (with a tool like SVGO)
6. Run yarn build, commit, push

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.

• AFC North
• AFC South
• AFC East
• AFC West
• NFC North
• NFC South
• NFC East
• NFC West

MLB

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.

• American League logo slick
• National League logo slick

NHL

NHL colors are official. As per Michael Sharer of the NHL.

MLS

MLS colors are currently approximations, with the exceptions listed below. I am working on getting official colors of the remaining teams.

• Philadelphia Union

EPL

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.

To-Dos

• Switch to flex for layout
• 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 id manually to JSON file ??

teamcolors's Issues

Update Minnesota Vikings Logo

Good catch from @mattq (comment on issue #14)

Looks like there is indeed a new logo, though the changes are rather subtle.

Currently, we are using this:

It appears this is the new one. Does that sound right?

I can't find an SVG version of the newest one. You happen to know the location of one @mattq ? If not, we'll probably have to do a PNG fallback for the Vikings.

:rocket: Modernize Codebase

Hi @jimniels,

I want to work on upgrading the repo all over. For this I want to do the following changes:

• ⬆️ Upgrade to React 18 and Functional Components
• 🦺 Add TypeScript
• 🏗️ Swap out CRA for Vite
• 📦 Switch to use PNPM instead of yarn
• 🎨 Improve Site Theming
• 🧛 Add Dark Mode
• 🔨 Complete the To-Do list

I am creating this issue to indicate that I am interested in working on this. Please let me know if this is something that you would consider merging and if you have any concerns or questions.

I think this is a cool project and should be kept up to date.

Brazilian Series A and B

Is there any interest in adding brazilian soccer teams? Specifically from 1st and 2nd divisions?

If you think that's relevant I would like to contribute with this.

Need Jaguar's SVG

If no one has one I'll try converting from the PNG we have.

Atlanta United and Minnesota United FC

Are joining the MLS in 2017. Here is the data I'm using but I dont have "official" colours (extracted with Tineye) and no logos:

{
  "name": "Minnesota United FC",
  "type": "MLS",
  "internalId": "MIN",
  "colours": ["#e2e3df", "#222", "#9bcce3"]
},
{
  "name": "Atlanta United FC",
  "type": "MLS",
  "internalId": "ATL",
  "colours": ["#252021", "#918254", "#7e000b"]
}

Pick the bones as you wish or ignore for now.

print problem

Clever page but some or most of the hex values print as white on white (from Chrome) ... oops. Love to stay and play but don't time right this second. I'll check back later.

Green Bay Packers

The Packers official colors are Dark Green (PMS 5535-C), Gold (PMS 1235-C) and White.

Gold (PMS 1235-C) would be #ffb81c or (websafe #ffcc33)
Dark Green (PMS 5535-C) would be #183028 or (websafe #003333)

:-)

Source: http://www.packers.com/fan-zone/faq.html

Use of SVG logos

Hi @jimniels - first of all, what a great wee project this is. Thank you for sharing it.

I am working on my own wee single page app / project to teach myself better React. Its on a similar theme to yourself. I came across your repo as I was trying to find logos of the teams and you have a great collection (and well sourced).

I was wondering if I would be able to use them in my personal (hopefully one day, commercial) project? More than happy to credit you appropriately (I did look for a License but I couldn't see one, sorry).

Thank you Sir and keep up the good work.

Washington Redskins is now Washington Commanders

The Washington Redskins changed their name and logo in 2020. Currently they are the Washington Commanders and the logo is a W. I believe the burgundy is slightly different but the yellow is the same.

MLB official (?) colors

Craig Robinson lists Pantone codes for all the team colors in a 2012 infographic, supposedly derived from the MLB pressbox website: http://flipflopflyin.com/flipflopflyball/gb13.html

Update Dolphins logo

We also need a new Miami Dolphins logo.

Broken in IE

Not sure if worth fixing @jimniels...

Source for EPL, MLB, MLS, NHL?

For leagues/teams with no official colors, is there a source for the approximations?

I came across this link: http://www.glidden.com/Team-Colors and was wondering if those values would be 'better' than the current values.

Score the official paint colors of your favorite sports teams. Team Colors paints are perfect matches to college and professional sports teams’ colors, and are available from Glidden® paint at The Home Depot®.

Looks like the RGB values can be extracted from the individual swatches. I'd be interested in helping out on this if there is interest.

EPL out of date

Using http://www.espnfc.us/english-premier-league/23/table as reference against your data file, it seems that you are a wee bit out of date (last years teams maybe?)

need to remove

• Aston Villa
• Newcastle United
• Queens Park Rangers

need to add

• Watford
• Middlesbrough
• Bournemouth

Once I source some colours, I'll let you know.

NBA Hex

NBA data set does not have HEX. For consistency I think it should have that. Thanks!

Corrupt Panthers logo

The Panthers logo was corrupted. Does anyone have another version of it?

:accessibility: Update `master` branch to `main`

I understand that master was the default back when this repo was created. But to keep up with the times I think the branch name should be updated.

Potential pull request

I've forked your project and am using a few grunt plugins to create PNG fallbacks and am experimenting with the creation of league webfonts. It's still a work in progress, but I'm getting close to decision points and your input would help.

Is this something you'd be interested in merging back into this project or should I just plan to keep those changes in a separate fork?

If you'd prefer to keep it separate, I have minified the SVGs and can contribute those back if helpful

.

add a license

Screen Flickers on initial load

There is a small flicker that occurs on the initial page load. This is occurring because the stylesheet is being loaded by main.js and it has to wait for the document to be ready to edit.

Moving the loading into the template itself would correct this issue.

Create "click to copy"

To make copy/pasting of team colors easier, write a little javascript that implements a "clip to copy" functionality on the HEX values.

This repo is missing a "sponsor" button

https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository