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.