Handle behavior

In the color area and color slider, the handle can slide all the way to the edge of the component. It always displays the selected color inside the handle and never gets cut off by the border or any container.

Transparent colors

When using transparent colors, the handle and loupe display an opacity checkerboard background to clearly show the level of transparency.

Color loupe

The loupe is a floating element positioned above the handle. It provides a preview that reflects the color currently sampled by its parent color component and disappears when the interaction ends.

Keyboard focus

The keyboard focus state enlarges the handle to become twice as large. The loupe is a visual-only element and should not receive focus since it does not provide interactive functionality.