GrColorPicker

modelValue is #RRGGBB, and with alpha it is #RRGGBBAA. That is the form in which a colour lies in the theme tokens, arrives from the backend and is understood by CSS: the consumer has to convert neither on the way in nor on the way out.

An invalid value does not crash the component and emits nothing: the panel shows #000000 and the model stays as it is. The component has no right to rewrite someone else’s data silently.

Internally the colour lives in HSLA and separately from the model, because hex is a lossy projection: black, white and any grey have no hue. Were the component to keep its state in hex alone, the hue slider would jump to 0° every time the user takes the saturation down to zero.

The channels are stored as fractions in the process. The integer HSL grid is coarser than the hex grid, and snapping to it changes the colour: of twelve typical brand values eleven would come back different — #10b981 as #10b77f. Integers are needed by the scales, and the scales get them: a slider reads the rounding of its channel, while the stored value stays exact. That is why a selected preset, a pasted hex and a colour taken with the eyedropper come back exactly the same.

view decides what sets the saturation and the lightness. The hue and the transparency are sliders in both views.

The default stayed as it was on purpose: the view changes the look of panels already standing in applications, and that decision belongs to the application rather than to the package. It is also switched globally — <GrConfigProvider :component-defaults="{ GrColorPicker: { view: 'area' } }">.

The usual trouble with a 2D area is that it is a mouse thing: it has neither values a screen reader would read nor keys. Here inside the square there are two real input[type=range], one per axis: they are visually hidden but stay in the tab order with their names and values, and the focus is shown by the area itself through focus-within. A screen reader sees two sliders — “Saturation 90 %” and “Lightness 66 %” — rather than a nameless picture.

Hence the two Tab stops per square: there are two axes, as there are two thumbs in a GrSlider range. The keys — ../keyboard.md.

The square is assembled from three layers: a saturation scale at 50 % lightness and a pair of veils, white on top and black at the bottom. This is not a device “by eye”: lightening and darkening in HSL are linear interpolation towards white and towards black, exactly what blending with alpha does. The colour under the handle matches the hex to the last digit, and that is verified by a pixel in a live browser.

The axes are saturation and lightness rather than the saturation and value familiar from HSV. Converting to HSV would give a prettier fill but would bring a second lossy projection: at zero value the HSV saturation is undefined, and black would lose it the way grey loses its hue.

eyedropper adds a button beside the hex field. It is drawn only where the browser provides EyeDropper — today that is Chromium; elsewhere it is absent altogether rather than present and not working. A refusal by the user (Esc during the pick) changes nothing and reports nothing: it is not an error.

What arrives from the screen is an already blended colour, with no transparency of its own — the current one stays as it was.

Tab out of the panel moves the focus further along the page rather than trapping it inside: nothing behind the page is blocked, and there is nothing to trap the user for. Esc closes the panel and returns the focus to the trigger — that is done by the shared layer stack through GrPopover.

The opening can be controlled from the outside: v-model:open, and the position with placement.

presets is an array of hex strings. Invalid ones are filtered out, and the selected preset gets aria-pressed. If it is empty, there is no presets block at all.

Theme tokens are not substituted into presets: --gr-primary lives as a CSS variable and is not resolved into hex at build time. The palette is assembled by the application — from its own config or from getComputedStyle.

The whole form-control contract: disabled, readonly, invalid, required, ariaLabel, the update:modelValue/change/focus/blur emits, the exported focus()/blur(). The name comes from GrFormField (<label for> points at the trigger) or from ariaLabel.

name gives the current value to a native form through a hidden field — there must be no interactive elements inside the widget.

There is no clearable on purpose: a colour has no empty state. If “not set” is needed, that is undefined in the model at the level of the application, not a state of the control.

• there is no history of recent colours — that is the state of the application;
• there are no gradients — the component is about a single colour.