Data Graphics London

Tube Colours

[If you are looking for my London Tube Stats interactive map, it’s now here.]

Transport for London (TfL) take their colours extremely seriously – the London Underground, in particularly, uses colour extensively to brand each line, and the maps and liveries are very well known.

The organisation has a colour guide to ensure that, when referencing the tube lines, the correct colour is used. Somewhat surprisingly, the guide includes hexadecimal (i.e. web) colours for only a “safe” palette – i.e. colours which would definitely work in very old web browsers. They don’t list the “true” hexadecimal for the colours, even though, confusingly, the colour shown is the true one. I couldn’t find anywhere on the web that did this either, all in one place, so here below is a summary. I’ve also included the safe colours so you can see the difference – but don’t use these unless you have to.

Line True Hexadecimal Web Safe Hexadecimal
Bakerloo #B36305 #996633
Central #E32017 #CC3333
Circle #FFD300 #FFCC00
District #00782A #006633
Hammersmith and City #F3A9BB #CC9999
Jubilee #A0A5A9 #868F98
Metropolitan #9B0056 #660066
Northern #000000 #000000
Piccadilly #003688 #000099
Victoria #0098D4 #0099CC
Waterloo and City #95CDBA #66CCCC
DLR #00A4A7 #009999
Overground #EE7C0E #FF6600
Tramlink #84B817 #66CC00
Cable Car #E21836
Crossrail #7156A5

All the colours above can be found on my new Electric Tube print.

8 replies on “Tube Colours”

What about the hue (0 to 100), the saturation (0 to 100) and the brightness (0 being the darkest, 100 being the brightest)? I need to know for my Scratch project

It is likely that the PDF has been produced for a print process that will, on the targeted printing hardware, produce a colour perceived by the human eye as the same as the quoted RGB colour. Taking an eyedropper tool and picking that colour off the PDF and converting it to hex for targeting a screens that will have a different colour profile is therefore not advisable.

For example, the colour used in the PDF for the Metropolitan Line is the one you’ve quoted, #9B0056, but the PDF advises the RGB value 117/16/86 (which converted to hex is #751056). It is this latter value that TfL website itself uses, and which anybody targeting a the web (but not concerned about using “web-safe” colours) should be using.

When used on a map, the similar colours (Victoria and DLR) don’t seem to matter that much because of their location. When listed, the colours are normally accompanied by text anyway (good practice for colour blind people!). I think the order they’re in when listed vertically has almost become familiar to me as much as the colours.

Quite remarkable the difference between the true and web safe colours in the Metropolitan Line. Strange how there’s not a more similar colour to the original magenta, than that shade of purple. Also, the difference between th DLR, Victoria, Waterloo and City and Piccadilly lines becomes much dimmer in the web safe version.

Yes, you are not the first person to express surprise over the Metropolitan line colour, in particular. I’ve double-checked the PDF and it is indeed listed like that.

I think I even prefer the web-safe version. Quite often I tend to confuse the Metropolitan line and the Hammersmith and City because of both being two shades of pink. This makes it much clearer.

Leave a Reply

Your email address will not be published. Required fields are marked *