UI: Components

Color Picker

<ui-color-picker> is a custom element that allows users to select a color from a color picker.
It's using the XY Controller to set the brightness and saturation of a color. Click the color-sample button to copy the current value (in hex) to the clipboard.

In general, it's recommended to use the native color picker, as this is a better experience on phones — but this component can be useful for custom designs.

Event

The change-event returns an object of values, here simplified and stringified:

With opposite color-scheme

Triggering with popover

Click the button to open the color picker in a popover.