Color panel

The inner machinery of ColorPicker, on its own: the saturation and brightness area, the hue strip, the transparency strip if asked for, the hexadecimal field and the saved colors. To mount inside a panel of your own, without the picker's button or floating layer.

When to use it

• An editor with its own settings column (the background of a poster, the color of a label) where the panel is always in view.
• A floating layer or a dialog of your own that already has its trigger.
• It is CONTROLLED: color is an already parsed color, not text, and onChange receives the new one. If onChange does not update color, the panel does not move. To go from text to a color there is textColor('#a16207') (it returns null if the text is not a color), and the color goes back to text with color.toString('hex') or any other format (rgb, hsl, hsb and their versions with alpha).
• samples sets the saved colors, in any format that can be read; those that cannot be read do not appear. alphaChannel adds the transparency strip, and the hexadecimal gets the fourth pair. Without it, the transparency that color brings is kept.
• size (sm, md or lg) changes the width of the panel, the height of the area and the size of the thumb and of the saved colors.

When not to

• A form field, with its label, its help, its error and the value as text: ColorPicker.
• Choosing among the colors of a product: VariantPicker.

Keyboard: Tab goes through the area, the hue strip, the transparency strip, the hexadecimal and the saved colors, one stop each. In the area, left and right move the saturation and up and down the brightness, one by one; with Shift, ten by ten; Page Up and Page Down move the brightness ten by ten, and Home and End take the saturation to 0 and to 100. In the strips, left and right move one by one (one degree of hue, one point of transparency) and with Shift they jump 15 degrees or 10 points. In the hexadecimal you type: the color changes as soon as what is typed is a real color, and a half-typed value stays until you leave the field. In the saved colors, the arrows go through them, Home and End go to the ends, and Enter or Space choose.

Accessibility: the area is ONE control for the screen reader, a "2D slider" called "Color picker" whose value says both axes and the hue ("Saturation: 96 %, Brightness: 63 %, Hue: 35°, brown"); the strips are sliders with the name of their channel ("Hue", "Transparency") and their value in words ("35°, brown"). The hexadecimal has its label, and each saved color is announced by its name in words, not by its hexadecimal; the one matching the current color is marked as selected. With touch, the strips and the saved colors are 44 px and the area grows.

Fine-tuning: in .amset-color__panel: --amset-color-panel-width, --amset-color-area-height, --amset-color-strip-height (the bar), --amset-color-strip-touch (the pressable zone), --amset-color-thumb and --amset-color-sample-side (the saved colors).