Saturation describes how intense or pure a color appears. In a color picker, dragging horizontally adjusts saturation, while vertical movement adjusts brightness. section 11.1
A two-dimensional coordinate picker exposes saturation on the x axis and brightness on the y axis. A draggable thumbnail selects both values simultaneously, with position represented by x and y percentage attributes. section 11.2
A browser implementation handles the interaction through:
- Mouse coordinates converted into horizontal and vertical positions. section 11.2
- Clamping the thumbnail within the picker before updating x and y. section 11.2
- A white-to-transparent horizontal gradient that exposes saturation over the selected background color. section 11.2
Shows the two-dimensional saturation and brightness picker used as the component’s visual model. section 11.1
