Contrast and mixing of team colours

{
  "kc": "#e31837",
  "lv": "#000000",
  "hex6('#E18')": "#ee1188",
  "luminance(kc)": "0.173",
  "contrast(kc, lv)": "4.45",
  "onColor(kc)": "#ffffff",
  "mix(kc, lv, 0.5)": "#720c1c",
  "solid(`${kc}80`)": "#f18b9b"
}

import { contrast, hex6, luminance, mix, onColor, solid, teamColors } from "@sportsdataverse/sdvplot";

const [kc = "#e31837", lv = "#000000"] = await teamColors("nfl", ["KC", "LV"]);

{
  kc,
  lv,
  "hex6('#E18')": hex6("#E18"), // short and upper-case forms become #rrggbb
  "luminance(kc)": luminance(kc).toFixed(3),
  "contrast(kc, lv)": contrast(kc, lv).toFixed(2), // WCAG ratio; 4.5 is the body-text bar
  "onColor(kc)": onColor(kc), // black or white text on it
  "mix(kc, lv, 0.5)": mix(kc, lv, 0.5),
  "solid(`${kc}80`)": solid(`${kc}80`), // half-transparent over white, as an opaque colour
};

Tags: contrast · colors · nfl. All sdvplot examples.