Colours

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.

 

johnston black

 

Black

Used for mapping pictograms, UI symbols, Northern Line and National Rail lines.

 

Black

 

White

Use plenty of white. It’s our default canvas.

 

White

 

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.

 

yellow

 

Night

Represents the Night service. It’s used on digital displays and in UI when the Night service is operating.

 

night

 

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.

 

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.

 

Services

 

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

 

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.