Team colours

A league's palette, the contrast of any pair, matchupColors choosing a pair that reads on a light and a dark page, and team colours as an Observable Plot scale. The colours come from the bundled team index; the charts draw the 2024 NFL, 2023-24 NBA and 2025-26 NHL seasons.

A league's palette

Every team's primary or secondary colour in one league, keyed by abbreviation (by team_id where two teams share one). Each label is drawn in the ink onColor picks for its swatch: black or white, whichever has the higher contrast.

teams have a colour.

Two teams that clash

Two teams' primary colours can be hard to tell apart: the Lakers' purple and the Kings' purple are a classic case. matchupColors(teamA, teamB, { league }) returns one pair for a light page and one for a dark page. Each colour reads on its background (contrast at least 2.5:1) and the two stay apart (a CIEDE2000 distance of at least 20); when a primary fails, it tries the secondary, then moves the lightness. The numbers under each swatch are its contrast against that background.

The raw primaries and have a contrast of :1 with each other (1 is the same colour). On a light page matchupColors draws in and in ; on a dark page, and .

A team-coloured chart on a light or a dark page

Every 2024 regular-season game of the Chiefs and the Eagles, as each team's running point differential by week. The two lines take matchupColors("KC", "PHI"): Theme follows this page's light or dark mode, or forces either one, and the chart takes the pair made for that background. Each line ends in its team's logo.

On the background, Kansas City is and Philadelphia : contrast :1 and :1 against it.

Team colours as a Plot scale

teamFill(league, { values }) is an ordinal Plot colour scale whose range is each team's colour, so fill: "team" paints every bar in its own team's colour, and its legend names the teams. Logos sit at the bar ends. Standings switches between three real tables.