Color Selection
Two components exist to aid color selection: EuiColorPicker and EuiColorStops.
Color picker
Color input component allowing for multiple methods of entry and selection.
Direct text entry will only match hexadecimal (hex) colors, and output values only return hex values. Spatial selection involves HSV manipulaton, which is converted to hex.
Swatches allow consumers to predefine preferred or suggested choices. The swatches must also be entered in hex format.
Color stops
Use EuiColorStops to define color stops for data driven styling. Stops are numbers within the provided range. The color segment spans from the given stop number (inclusive) to the next stop number (exclusive).
Empty start: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
Standard: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
Random new color: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
Extended range: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
Fixed color segments: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
Free-range color stops
Typical use of EuiColorStops (as above) will have defined `min` and `max` range values. It is also possible to leave the range open-ended for cases where the target data set is unknown or maleable. In this case, a user's added values will define `min` and `max` and users will have more freedom over resetting the values on the fly.
Empty start: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
Empty start: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
Empty start: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
Single start: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
Single start: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
Single start: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
Custom color swatches
By default the colors provided are the ten color blind safe visualization colors. You can however pass in your own color set with the swatches prop.
Set color stops: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
Limited selection modes
By default, both swatch selection and the gradient color map will be rendered. Use the mode prop to pass `swatch` for swatch-only selection, or pass `picker` for gradient map and hue slider selection without swatches.
Set stops with swatches: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
Set stops with picker: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
Custom button
Available only in EuiColorPicker. You can optionally use a custom button as the trigger for selection using the button prop. Please remember to add accessibility to this component, using proper button markup and aria labeling.
Inline
Available only in EuiColorPicker. Set the display prop to `inline` to display the color picker without an input or popover. Note that the button prop will be ignored in this case.
Use the arrow keys to navigate the square color gradient. The coordinates resulting from each key press will be used to calculate HSV color mode 'saturation' and 'value' numbers, in the range of 0 to 1. Left and right decrease and increase (respectively) the 'saturation' value. Up and down decrease and increase (respectively) the 'value' value.
Containers
Demonstrating that both color selection components can exist in portal containers and that their popover positioning works in nested contexts.
Color stops: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
Option toggling
Kitchen sink: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.