Interactive colors

A #F4F4F5 hover looks calm on white. Drop the same control on a darker panel and it flashes. Interactive color is an overlay, not a swatch.

Controls

Darker background

Static

Interactive

Steady grays are mixed for one background. The moment a row, toolbar, or menu sits on a different panel — a sidebar, a tinted canvas, a grouped table — that hover turns into a blotch.

Prefer translucent black in light mode and translucent white in dark mode. The wash borrows the surface underneath, so the same 5% overlay reads as a hover on every panel color.

Light mode: a black wash on whatever sits behind.

Dark mode: a white wash — same idea, inverted ink.

Toggle the darker background in the demo. Static fills stay glued to their original gray; interactive fills keep their contrast.