cssadapt

Camera preview

The canvas is a small down-sampled copy used for analysis.

How it works

1. A frame is grabbed from the camera roughly once a second.
2. Pixels are quantised into hue / saturation / lightness buckets.
3. Buckets are split into low and high luminosity groups.
4. Low luminosity colours become backgrounds, high become foregrounds.
5. Foreground and accent are then nudged in lightness until they clear WCAG AA contrast against the background, so the page stays readable even in a flat or dimly lit scene.

Swatches are shown in hue order, not frequency order.

Sample content

Every coloured element on this page references one of the CSS variables that index.js sets on :root: --bg, --fg, --accent, --bg-1…--bg-4, and --fg-1…--fg-4.

A link styled with the accent colour sits next to a themed button.