These standards intend to outline basic principles and therefore cannot cover every application or eventuality. If you have any questions, please contact us.
Introduction
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.
Accessibility
All colours must have enough contrast to be accessible and we are continuously reviewing colours.
Foundations
Beck Blue
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.
Uses
• Reassurance
• Good service
• Primary buttons
Johnston Black
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.
Black
Used for mapping pictograms, UI symbols, Northern Line and National Rail lines.
White
Use plenty of white. It’s our default canvas.
Grey
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
• Disruption
• Disabled button states
• Option picker states
• Defocused states
• Form field hint text
• Fills
• Shadows
• Illustrations
Not used for
• Secondary button states
• Secondary text labels or content
• Anything important
• Type, unless necessary
Yellow
This acidic yellow is used for high alert event messaging, bus disruptions and closed bus stops. Use sparingly and infrequently.
Night
Represents the Night service. It’s used on digital displays and in UI when the Night service is operating.
Blue
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
In general
• 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
Services
Underground and surface colours. For Cable car use Central, for TfL Rail use Piccadilly.
Colour Values
Core
| Name | RGB | Hex | |
|---|---|---|---|
| Beck Blue | 0, 25, 168 | 0019A8 | |
| Johnston Black | 3, 7, 28 | 03071C | |
| Black | 0, 0, 0 | 000000 | |
| White | 255, 255, 255 | FFFFFF |
Greys
| Name | RGB | Hex | |
|---|---|---|---|
| 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 |
Services
Underground
| Name | RGB | Hex | |
|---|---|---|---|
| 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 |
Overground
| Name | RGB | Hex | |
|---|---|---|---|
| Liberty | 97, 104, 107 | #61686B | |
| Lioness | 255, 166, 0 | #FFA600 | |
| Mildmay | 0, 111, 230 | #006FE6 | |
| Suffragette | 24, 169, 93 | #18A95D | |
| Weaver | 155, 0, 88 | #9B0058 | |
| Windrush | 220, 36, 31 | #DC241F |
Surface
| Name | RGB | Hex | |
|---|---|---|---|
| Bus | 220, 36, 31 | 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 |
Themes
| Name | RGB | Hex | |
|---|---|---|---|
| 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, 69, 125 | FF457D |
Mapping
| Name | RGB | Hex | |
|---|---|---|---|
| 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.
Shades
Naming
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.
| Colour name | 90 | 70 | 10 | 5 |
|---|---|---|---|---|
| Bakerloo | 753500 | 9E5200 | F1E3D1 | |
| Central | 940000 | BD0404 | F9DCDB | |
| Hammersmith & City | CC526A | E06C87 | FDE3EA | |
| Jubilee | 4E5F6B | 677680 | E1E4E5 | |
| Metropolitan | 54003A | 7D004D | EFD6E4 | |
| Northern | 474747 | 333333 | E0E0E0 | |
| Overground | BD4B00 | E66700 | FEE0C3 | |
| Piccadilly | 00004D | 000875 | D6DAF1 | |
| Thameslink | 9C0964 | C42B7F | F6D2E5 | |
| Tram | 2A8201 | 48A115 | D9EDCB | |
| Victoria | 0068B3 | 0084D1 | C3E7F9 | |
| Waterloo & City | 319475 | 5CBDA5 | D9F2ED | |
| Yellow | D6B300 | F5D800 | FFF7CC | |
| Night | 05040D | 0E0D21 | ||
| Blue | EDF6FF | |||
| Light Green | DEFAE0 | |||
| Light Pink | FFDBE3 |
Event colour system
Three colour systems represent levels of severity. Red should not be used to represent warning or disruption messages.
Yellow
High alert events. Black on yellow. Used very sparingly.
Black
Yellow on black. Used for stop or access events.
Grey
White on Grey 90. Used for delays and disruption events.
Buses
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.
Shades
Oyster and Contactless
Legacy colours. Still in use in some products.
| Name | RGB | Hex | |
|---|---|---|---|
| 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
Backgrounds
Used for on-boarding in Oyster & Contactless app.
| Name | RGB | Hex | |
|---|---|---|---|
| Green | 0, 164, 168 | 00A4A8 | |
| Blue | 13, 158, 220 | 0D9EDC | |
| Pink | 232, 97, 126 | E8617F |
Contrast ratios
Colour on white
| Foreground | 4.5:1 | On core white | |
|---|---|---|---|
| Beck Blue | Pass | 12.32:1 | |
| Johnston Black | Pass | 19.98:1 | |
| Bakerloo | Pass | 4.49:1 | |
| Central | Pass | 4.87:1 | |
| District | Pass | 5.28:1 | |
| Metropolitan | Pass | 8.29:1 | |
| Northern | Pass | 21.00:1 | |
| Piccadilly | Pass | 12.32:1 | |
| Jubilee | Fail (3:1 pass) | 3.39:1 | |
| Victoria | Fail (3:1 pass) | 3.08:1 | |
| Circle | Fail | 1.55:1 | |
| Hammersmith & City | Fail | 2.33:1 | |
| Waterloo & City | Fail | 1.82:1 | |
| Bus | Pass | 4.87:1 | |
| DLR | Fail | 2.71:1 | |
| Elizabeth | Pass | 8.15:1 | |
| Cable car | Pass | 4.87:1 | |
| Overground | Fail | 2.66:1 | |
| TfL Rail | Pass | 12.32:1 | |
| Tram | Fail | 2.58:1 | |
| River Bus | Fail (3:1 pass) | 3.08:1 | |
| Night Service | Pass | 16.87:1 | |
| Grey 90* | Pass | 4.93: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.
