These standards intend to outline basic principles and therefore cannot cover every application or eventuality. If you have any questions, please contact us.
The colours in this standard have been created for products and services displayed on digital screens. They differ from those defined in the TFL Corporate Design Colour Standard, tfl.gov.uk website, or any previous digital design guidelines.
They fall into four categories, as we distinguish between colours that are being used across all our products and colours that are specific to different experiences – for instance colours that are specific to planning or travelling, paying or using an account, discovering new services or features and getting help and support.
All colours must have enough contrast to be accessible and we are continuously reviewing colours.
This colour is used for the Piccadilly line, TfL Rail, good service and user interface elements. In other TfL design standards documentation this colour is also referred to as Corporate Blue, TfL Blue, Transport for London, London Underground.
• Good service
• Primary buttons
This blue-black has been chosen to reduce eye strain while retaining the appearance of black. However, the Northern line is always rendered simply Black, using rgb (0, 0, 0). Johnston Black is primarily used for type.
Used for mapping pictograms, UI symbols, Northern Line and National Rail lines.
Use plenty of white. It’s our default canvas.
Grey means off, disabled, not working — for example, we use grey to show that a Tube line is closed. We don’t use grey for type, except in rare instances. If you do consider using it for type, please use Grey 90 for high contrast. Lighter greys are more neutral, while darker greys shift towards blue. There are six shades of grey, ranging from 5 to 90.
It’s used for
• Closed or not operating
• Disabled button states
• Option picker states
• Defocused states
• Form field hint text
Not used for
• Secondary button states
• Secondary text labels or content
• Anything important
• Type, unless necessary
This acidic yellow is used for high alert event messaging, bus disruptions and closed bus stops. Use sparingly and infrequently.
Represents the Night service. It’s used on digital displays and in UI when the Night service is operating.
Use sparingly for features involving payments, identity and forms. This colour is accessible and can be used for type on a white background or, as a background colour overlaid with white type and symbols. In other TfL design standards this colour is referred to as Safety Blue.
Colour on colour
• Service colours are not placed over other service colours
• White can only be placed on black, Beck Blue, Night Tube, or Grey 90
• Avoid placing type or pictograms over service fills
Plan and travel products
• All colours to be placed on a white or light grey (Grey 5, Grey 10) ground
Underground and surface colours. For Cable car use Central, for TfL Rail use Piccadilly.
|Beck Blue||0, 25, 168||0019A8|
|Johnston Black||3, 7, 28||03071C|
|Black||0, 0, 0||000000|
|White||255, 255, 255||FFFFFF|
|Grey 5||247, 249, 250||F7F9FA|
|Grey 10||242, 244, 245||F2F4F5|
|Grey 30||225, 228, 232||E1E4E8|
|Grey 50||193, 200, 210||C1C8D2|
|Grey 70||134, 144, 158||86909E|
|Grey 90||99, 114, 130||637282|
|Bakerloo||178, 99, 0||B26300|
|Central||220, 36, 31||DC241F|
|Circle||255, 200, 10||FFC80A|
|District||0, 125, 50||007D32|
|Hammersmith & City||245, 137, 166||F589A6|
|Metropolitan||155, 0, 88||9B0058|
|Northern||0, 0, 0||000000|
|Piccadilly||0, 25, 168||0019A8|
|Jubilee||131, 141, 147||838D93|
|Victoria||3, 155, 229||039BE5|
|Waterloo & City||118, 208, 189||76D0BD|
|Bus||178, 99, 0||DC241F|
|Night Bus||195, 217, 247||C3D9F7|
|River Bus||3, 155, 229||039BE5|
|Cable car||220, 36, 31||DC241F|
|DLR||0, 175, 173||00AFAD|
|Elizabeth line||96, 57 158||60399E|
|National Rail||0, 0, 0||000000|
|Overground||250, 123, 5||FA7B05|
|Thameslink||218, 66, 144||DA4290|
|TfL Rail||0, 25, 168||0019A8|
|Tram||95, 181, 38||5FB526|
|London Coaches||255, 166, 0||FFA600|
|Taxi & Private Hire||140, 136, 227||8C88E3|
|Night Service||26, 26, 54||1A1A36|
|Yellow||255, 229, 0||FFE500|
|Blue||0, 111, 230||006FE6|
|Green||24, 169, 93||18A95D|
|Red||255, 43, 38||FF2B26|
|Light green||0, 221, 120||00DD78|
|Light pink||255, 74, 98||FF4A62|
|Interchanges and pictograms||0, 0, 0||000000|
|River (Fill)||199, 234, 251||C7EAFB|
|River (Keyline)||3, 155, 229||039BE5|
|National Rail symbol||220, 36, 31||DC241F|
Light and dark
Light and dark service and theme colour variants are used for UI and mapping.
Colours are named by appending the service name with the appropriate shade number, either 10, 70 or, 90. For example: Bakerloo 10, Bakerloo 70, Bakerloo 90. For Cable car use Central values, for TfL Rail use Piccadilly values.
|Hammersmith & City||CC526A||E06C87||FDE3EA|
|Waterloo & City||319475||5CBDA5||D9F2ED|
Event colour system
Three colour systems represent levels of severity. Red should not be used to represent warning or disruption messages.
High alert events. Black on yellow. Used very sparingly.
Yellow on black. Used for stop or access events.
White on Grey 90. Used for delays and disruption events.
To align with physical signage, bus stop closures and disrupted bus routes use the yellow system.
Busyness colour system
Three colours represent three different busyness levels — very busy, busy and quiet. These fluorescent style colours are paired with lighter variants (Colour 10) to create busyness indicators.
Oyster and Contactless
Legacy colours. Still in use in some products.
|Oyster Yellow||255, 210, 43||FFD22B|
|Oyster blue (On white)||0, 138, 198||008AC6|
|Oyster blue (On dark)||14, 169, 236||0EA9EC|
|Cherry (Used for alerts)||211, 7, 65||D30741|
|Charcoal grey||45, 48, 57||2D3039|
|Battleship grey||103, 112, 120||677078|
Discover, Help & Support
Used for on-boarding in Oyster & Contactless app.
|Green||0, 164, 168||00A4A8|
|Blue||13, 158, 220||0D9EDC|
|Pink||232, 97, 126||E8617F|
Colour on white
|Foreground||4.5:1||On core white|
|Jubilee||Fail (3:1 pass)||3.39:1|
|Victoria||Fail (3:1 pass)||3.08:1|
|Hammersmith & City||Fail||2.33:1|
|Waterloo & City||Fail||1.82:1|
|River Bus||Fail (3:1 pass)||3.08:1|
|Yellow||Pass||16.46 (Only use yellow on black)|
*Grey 90 is the only accessible grey. It can be applied to type on a white background or used as a background colour with white type overlaid.