Color picker

Choosing a color: a button with the swatch and the value written out, and a panel with the saturation and brightness area, the hue strip, the hexadecimal field and the saved colors. That inner machinery is available on its own in ColorPanel (Color panel), which has its own card, to mount in a panel of your own.

When to use it

• Colors chosen by the person using the application and that are saved: the store's brand color, a label's color, the background of a poster.
• The value goes in and out as text (#A16207, or the format given by outputFormat: hex, rgb, hsl, hsb and their versions with alpha), which is what is stored in a database. It is controlled with value and onChange, or left uncontrolled with initialValue. alphaChannel adds the transparency strip.
• samples sets the usual colors by hand.
• size and variant are those of all fields: the button is 30, 36 or 44 px, and the panel (area, hexadecimal and saved colors) grows with it. disabled shows the color without opening the panel.

When not to

• The library's own colors: they are tokens in oklch(), which this picker does not understand, and they are not edited from here.
• Choosing a product's color from those available: VariantPicker.

Keyboard: Tab reaches the button; Enter or Space open the panel, and Escape closes it and returns focus to the button. Inside, the area and the strips move with the arrows and jump with Page Up and Page Down; the saved colors are traversed with the arrows (Home and End go to the ends) and chosen with Enter or Space; the hexadecimal is typed.

Accessibility: the button is named with the label and the value ("Brand color #A16207"), not with a mute square; the help (hint) and the error (error) are read as its description. The area and the strips are sliders that say their channel and their value, and each saved color is announced by its name in words, not by its hexadecimal. If the text arriving in value is not a color, it says so ("The color “pistachio” is not valid") instead of painting a black and staying silent. The button has the 2 px ring of the fields, also with the panel open; the thumb and the saved colors, that of the buttons, and the chosen one is marked with a ring. With touch, the saved colors and the strips are 44 px and the area grows.

Motion: the panel enters like all floating ones; the thumb grows when pointed at and when dragged, and the saved colors grow when pointed at and give way when pressed.

Fine-tuning: the button, --amset-color-sample (the square inside) and the field variables, --amset-field-*. The panel, in .amset-color__panel (it lives in the floating layer, outside the picker): --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).