Form

Color Picker

How the Color Picker works with a keyboard and assistive tech.

Guidance#

The spectrum is a focusable slider: the arrow keys move saturation and brightness, Shift takes bigger steps.

Hue, opacity and each gradient stop are role="slider" with their value in degrees or percent.

The fill types are a radio group, and the recent colours are native radios named by colour.

The value field accepts #RGB, #RRGGBB or rgb()/rgba() text, so the colour can be set without a pointer.

The eyedropper uses the browser's EyeDropper where it exists, and is disabled with a reason where it does not.