getForegroundFromBackground() — ui Function Reference

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

Function typescript DocumentationAtlas ContentSourcing called by 1

Entity Profile

DocumentationAtlas→ ContentSourcing→ getForegroundFromBackground() — ui Function Reference

Dependency Diagram

graph TD
  988d5a25_23a6_0bf0_8e03_f19874f623d5["getForegroundFromBackground()"]
  56f11136_44de_59ff_9172_8077200c483f["colors.ts"]
  988d5a25_23a6_0bf0_8e03_f19874f623d5 -->|defined in| 56f11136_44de_59ff_9172_8077200c483f
  31dffeeb_cef5_7e8d_2ffb_14b1670c4ccd["getColors()"]
  31dffeeb_cef5_7e8d_2ffb_14b1670c4ccd -->|calls| 988d5a25_23a6_0bf0_8e03_f19874f623d5
  style 988d5a25_23a6_0bf0_8e03_f19874f623d5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/lib/colors.ts lines 82–96

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"
}