cssadapt

Point your camera at the world. The page picks the most common colours it sees and uses them as live CSS custom properties. These can be used for theming the page or as a dynamic palette.

Think of it as the ultimate light/dark mode - it's full camouflage for your page.

How it works

  1. A frame is grabbed from the webcam 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.

Live palette

Camera is off.

Camera preview

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

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 .