sRGB colour arithmetic
State: open/verified · Kind: module · Audience: system
Summary
Section titled “Summary”- Parses the CSS colour syntaxes a browser reports (hex,
rgb()/rgba(), and thecolor(srgb …)formgetComputedStylereturns fromcolor-mix()) into one canonicalRgba, mixes and composites in gamma-encoded sRGB, and measures WCAG 2 relative luminance and contrast. - Dependency-free TypeScript module consumed by design-token tooling and UI contrast checks, not run on its own.
Statement
Section titled “Statement”The system needs to reason about colour the way a browser paints it: parse whatever colour syntax
getComputedStyle hands back, blend and composite colours in gamma-encoded sRGB matching
color-mix(in srgb, …), and score the resulting pixel’s WCAG 2 contrast ratio against another
colour. @sksizer/color provides this as a small, dependency-free arithmetic library — a canonical
Rgba type plus pure functions for parsing, formatting, mixing, alpha compositing, and
luminance/contrast measurement — so any caller that needs colour math does not reimplement CSS
colour parsing or WCAG math itself.
What it provides
Section titled “What it provides”- parseColor — hex / rgb()/rgba() / color(srgb …) into Rgba
- formatHex — Rgba back to #rrggbb(aa)
- mixColors — color-mix(in srgb, …)-equivalent per-channel blend
- withAlpha, fromPixel — alpha replacement and ImageData pixel conversion
- compositeOver — source-over alpha compositing onto an opaque ground
- relativeLuminance, contrastRatio — WCAG 2 luminance and 1-21 contrast ratio
Underlying implementation
Section titled “Underlying implementation”- packages/ts/color/index.ts
- consumed by solutions/ontological/lib/services/design-tokens/project.ts
- consumed by packages/ts/ui/scripts/token-contrast-check.ts
Locations
Section titled “Locations”packages/ts/color/index.ts