Get the Data
- The colors come from the MTA's official .csv file. In addition to colors for the subway lines, the file also includes color codes for the MTA's Long Island Rail Road and Metro-North Railroad lines.
- The hex codes for that data, converted into a CSS stylesheet (Last updated: March 10, 2012)
- The same data, as a JSON file (Last updated: March 10, 2012)
Contribute
The CSS and JSON files, as well as the source code for this demo site,
are hosted on GitHub. Contributions welcome, especially translations into SASS, HAML, and Stylus stylesheets.
Use the Subway Colors and Bullets
NOTE: According to the MTA website, "use of MTA logos, maps, and symbols requires a license." See their licensing page for more details. The following instructions assume that you have obtained permission to use the symbols, or are staying within the bounds of fair use.
Add a copy of mta-colors.css to your HTML document, anywhere above where you'll be using the bullets. To make a bullet, add the following two classes to a <span> or <div> element: (1) mta-bullet to define the shape, and (2) mta-{{line}} to define the color.
To support Internet Explorer 6-9, you'll need to place CSS3 PIE in the same folder as mta-colors.css.
I ride the <span class='mta-bullet mta-d'>D</span> to work.
I ride the D to work.
My favorite line is the <span class='mta-bullet mta-n'>N</span> <span class='mta-bullet mta-q'>Q</span> <span class='mta-bullet mta-r'>R</span>.
My favorite line is the N Q R.
The CSS file also includes grouped line-colors. So you could write the example above as:
My favorite line is the <span class='mta-bullet mta-nqr'>N</span> <span class='mta-bullet mta-nqr'>Q</span> <span class='mta-bullet mta-nqr'>R</span>.
My favorite line is the N Q R.
And because the shape, color, and content of the bullets are handled separately, you can also do this:
<span class='mta-bullet mta-1'>H</span> <span class='mta-bullet mta-e'>E</span> <span class='mta-bullet mta-6'>L</span> <span class='mta-bullet mta-l'>L</span> <span class='mta-bullet mta-7'>O</span>
H E L L O