Color palettes
EUI provides a base set of color palettes that return an array of hexadecimal color for use in other EUI components or charts.
Preset qualitative palettes
Qualitative palettes are best suited for communicating and comparing discrete data series. EUI recommends using the
euiPaletteColorBlind() for qualitative and categorical data.
This palette is restricted to only 10 colors. However, you can add more groups of 10 which are alternates of the original. This is better than allowing the initial set to loop.
These colors are meant to be used as graphics and contrasted against the value of euiColorEmptyShade for the current theme. When placing text on top of these colors, use the euiPaletteColorBlindBehindText() variant. It is a brightened version of the base palette to create better contrast with text.
Recommended quantitative palettes
Quantitative palettes are best suited for displaying data on a continuum, as in the case of health statuses and large geographic or demographic-based data sets.
EUI provides the following common palettes for quantitative data and
charts. Just pass in the number of steps needed and the function will interpolate between the colors.The palette for status is the only palette that has proper contrast ratios. When using the other palettes, consider adding another form of the data for screen readers.
Custom palettes
Use the colorPalette service to generate a custom, gradiated palette array of any length from one or more hexadecimal color codes. The third parameter divergent, will interpolate between the two halves of the spectrums separately. If a middle point is not provided, it will graduate to light gray.
Props
euiPaletteColorBlind
Prop | Description and type | Default value |
|---|---|---|
Prop colors# | Description and type Defines the default set of colors the palette uses. _EuiThemeVisColors | Default value |
Prop hasVisColorAdjustment# | Description and type Specifies if some color asdjustments for vis colors are required. boolean | Default value |
Prop rotations# | Description and type How many variations of the series is needed number | Default value 1 |
Prop order# | Description and type Order similar colors as "append" | "group" | Default value append |
Prop direction# | Description and type Specifies if the direction of the color variations "lighter" | "darker" | "both" | Default value lighter |
Prop sortBy# | Description and type Use the default sort order, or re-sort them based on the color wheel (natural) "default" | "natural" | Default value default |
Prop sortShift# | Description and type Shift the sorting order by a certain number when used in conjunction with string | Default value -100 |