Function: matchupColors()

matchupColors(teamA, teamB, opts): Promise<MatchupColors>

Defined in: packages/sdvplot/src/matchup-colors.ts:221

Two team colours that tell the teams apart on a chart: Game on Paper's "game colours" picker.

Parameters

teamA

Value

teamB

Value

opts

MatchupColorOptions

Returns

Promise<MatchupColors>

Remarks

One pair per theme, each the first candidate whose colours are at least 20 apart in CIEDE2000 and each at least 2.5:1 (WCAG) against that theme's background. Candidates, in order: both primaries, teamB's secondary, teamA's secondary, both secondaries; so a team keeps its primary whenever it works, and teamA (Game on Paper's home team) keeps it first. When no candidate works, an unreadable colour's L* moves just far enough to read; then both colours' L* move, least total movement first, until they separate; failing that, the widest readable separation found. A team with no colour gets #2394fd. Deterministic.

Example

import { matchupColors } from "@sportsdataverse/sdvplot";

// two crimson teams; light: ["#9e1b32", "#2c2a29"] (Georgia's secondary), dark: ["#ffffff", "#ba0c2f"]
// in a page, pick the pair for the theme:
// const [alabama, georgia] = window.matchMedia("(prefers-color-scheme: dark)").matches ? dark : light;
await matchupColors("Alabama", "Georgia", { league: "cfb" });