getForegroundFromBackground() — ui Function Reference

Architecture documentation for the getForegroundFromBackground() function in colors.ts from the ui codebase.

Function typescript ComponentRegistry Styles called by 1

Entity Profile

ComponentRegistry→ Styles→ getForegroundFromBackground() — ui Function Reference

Dependency Diagram

graph TD
  6b606878_0d79_8de6_e626_663ec772f427["getForegroundFromBackground()"]
  955bc1fa_55c7_f589_a22c_805b535067fd["colors.ts"]
  6b606878_0d79_8de6_e626_663ec772f427 -->|defined in| 955bc1fa_55c7_f589_a22c_805b535067fd
  99de8c20_3740_56dc_5dbd_6723bac57629["getColors()"]
  99de8c20_3740_56dc_5dbd_6723bac57629 -->|calls| 6b606878_0d79_8de6_e626_663ec772f427
  style 6b606878_0d79_8de6_e626_663ec772f427 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/lib/colors.ts lines 79–93

function getForegroundFromBackground(rgb: string) {
  const [r, g, b] = rgb.split(" ").map(Number)

  function toLinear(number: number): number {
    const base = number / 255
    return base <= 0.04045
      ? base / 12.92
      : Math.pow((base + 0.055) / 1.055, 2.4)
  }

  const luminance =
    0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b)

  return luminance > 0.179 ? "#000" : "#fff"
}