Color selection
Two components exist to aid color selection: EuiColorPicker and EuiColorPalettePicker.
Color picker
Color input component allowing for multiple methods of entry and selection.
Direct text entry will match hexadecimal (hex) and RGB(a) colors, and output will return both hex and RGBa values. Spatial selection involves HSV manipulation, which is converted to hex.
Swatches allow consumers to predefine preferred or suggested choices. The swatches must also be entered in hex or RGBa format.
Color palette picker
Use EuiColorPalettePicker to select palettes to apply colors to data visualization like maps and charts.
Use the palettes prop to pass your palettes as an array strings or an array of ColorStops in the form
of { stop: number, color: string }. For each object, you should pass a palette (array of hex values)
and specify the type. Use fixed palettes for categorical data and gradient palettes for continuous data.
Color palette display
Use EuiColorPaletteDisplay to show the palette in use for a data visualization.
Use the palette prop to pass your palette as an array of color strings or an array of ColorStops
in the form of { stop: number, color: string }. Use fixed palettes for categorical data
and gradient palettes for continuous data.
In cases you need to apply a palette, it's recommended to use the EuiColorPalettePicker.
Format selection
Format selection does not limit the format of text input the picker will allow, but instead attempts to keep consistency during HSV selection. By default, the color picker will automatically use the last input value format. Notice in following the examples how hue and saturation selection behave differently.
Swatches will always show the "as-authored" color value, as will the value provided via the color prop.
Alpha channel (opacity) selection
To allow color opacity via alpha channel, set showAlpha=true.
This will also display a range slider allowing manual opacity updates.
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.
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.
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.
Additionally, use the secondaryInputDisplay prop to show a secondary or alternative color value input.
Options include top and bottom placement.
Empty state
For instances where an "empty" color picker has meaning other than transparent color value,
use the placeholder prop to provide context. Removing color selection and returning to the default state
can be made easier by setting isClearable=true.
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.
Containers
Demonstrating that both color selection components can exist in portal containers and that their popover positioning works in nested contexts.