Placing a color area inside a color wheel

The color wheel is often used together with the color area component for color selection. When placing the color area inside the color wheel, make sure to leave enough of a margin between the two components to ensure there's enough space for the both the handles.

Display color selection

When using color areas, it's important to clearly display the color selection in real time. It can be in a color swatch, directly on the canvas, or both.

Color loupe on down/touch state

The color loupe component can be used above the handle to show the selected color that would otherwise be covered by a cursor, stylus, or finger on the down/touch state. This can be customized to appear only on finger-input, or always appear regardless of input type.