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:

color: {
  "hex": "#007bff",
  "rgba": "rgba(0, 123, 255, 1)",
  "hsla": "hsla(211, 100%, 50%, 1)",
  "hsva": "hsv(211, 0.9999999999999999, 1, 1)"
}

With opposite color-scheme

Triggering with popover

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