Colours
Official TfL line and mode colours — install tokens, map line ids, copy HEX or OKLCH.
Values follow TfL's design standards (Colour standard Issue 10). Not a licence for Johnston or the roundel; see Licensing.
Preview
Installation
Install via the shadcn registry, or copy the CSS variable layers into globals.css. Boards and Line chip also pull tfl-colours transitively.
Merges OKLCH palette, data-line bindings, and @theme aliases into your CSS.
pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/tfl-colours.jsonLine → colour mapping
Three tiers: palette vars (--tfl-line-central), data-line binding, then role vars (--line-color / --line-ink). Prefer data-line when the id is dynamic.
// data-line resolves --line-color / --line-ink for you
<span
data-line="northern"
className="inline-flex items-center bg-[var(--line-color)] px-2 py-0.5 text-xs font-bold text-[var(--line-ink)]"
>
Northern
</span>
// vars are just CSS — override when you need a one-off
<span
data-line="northern"
className="inline-flex items-center bg-[var(--line-color)] px-2 py-0.5 text-xs font-bold text-[var(--line-ink)]"
style={{ "--line-color": "#6D2077", "--line-ink": "#fff" }}
>
Northern
</span>Tailwind cannot build class names dynamically
Predefined class strings only:
import {
getLineColourBgClass,
getLineColourToken,
LINE_COLOUR_TOKENS,
} from "@/lib/tfl/line-colour-map"
// Iterate published tokens
for (const token of LINE_COLOUR_TOKENS) {
console.log(token.id, token.hex, token.bgClass)
}
const line = { id: "northern" }
// ✅ Look up a complete class string
const bg = getLineColourBgClass(line.id) // "bg-tfl-line-northern"
// ❌ Tailwind never sees this — no CSS emitted
// className={`bg-tfl-line-${line.id}`}
// ✅ Or bind dynamically without a utility class
<span data-line={line.id} className="bg-[var(--line-color)]" />All formats
Bakerloo
Central
Circle
District
Hammersmith & City
Jubilee
Metropolitan
Northern
Piccadilly
Victoria
Waterloo & City
Liberty
Lioness
Mildmay
Suffragette
Weaver
Windrush
Transport for London
DLR
Elizabeth line
London Buses
London Cable Car
London Coaches
London Dial-a-Ride
London Overground
London River Services
London Trams
London Underground
Santander Cycles
Adaptive modes
TfL has not published dark-mode line colours. We took screenshots of the TfL Go app in light and dark appearance and measured the OKLCH shift between matching line paints. Dark tokens apply that median shift to the published Colour standard values: about +3.3% lightness, a little more chroma, hue held.
.dark— those derived colours. Northern uses a light fill and black inkdata-tfl-northern="halo"— opt-in brand-black Northern with halo helpers when paint sits on an uncontrolled backgroundprefers-contrast/forced-colors— role tokens adapt; forced colours use a real borderdata-tfl-colour="mono"— app opt-in colourless mode (greys today); see Mono line styles
Mono line styles
Colour route paint vs black-and-white Tube map stroke patterns (provisional reconstruction of the large-print B&W map key). These are the motifs data-tfl-colour="mono" will carry once wired into strips — not yet the live CSS role tokens.