[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”
[…] The official colours for each line can be found in TfL’s colour branding guide and in hex versions at Oliver O’Brien’s site. […]
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.
[…] between the colours of the lines when their opacity is set at 50%. Inspiration came from this post from CASA’s kick-ass researcher Oliver O’Brien about the colours used in the […]
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.