Color utilities

Background colors

To all but ensure proper contrast of text to background, we recommend using our pre-defined shades of background colors based on the EuiTheme brand colors. You can also use EuiPanel for the same effect plus more options like padding and rounded corners.

useEuiBackgroundColorCSS()[color] style hook

Returns an object of the available color keys containing the css string of the computed background version for the given color.

This is best used to map component prop styles to padding output.

color: 'transparent' | 'plain' | 'subdued' | 'accent' | 'primary' | 'success' | 'warning' | 'danger';

background-color: #feedf5

const colorStyles = useEuiBackgroundColorCSS();
const cssStyles = [colorStyles['accent']];

<span css={cssStyles}>
  /* Your content */
</span>

useEuiBackgroundColor(color, method?) hook

Returns just the computed background color for the given color.

color: 'transparent' | 'plain' | 'subdued' | 'accent' | 'primary' | 'success' | 'warning' | 'danger';

method? 'opaque' | 'transparent';

#fff

css`
  background: ${useEuiBackgroundColor('subdued')};
`

Different colors for different contexts

While the hook accepts rendering the value as opaque or transparent, we highly suggest reserving transparent for use only during interactive states like hover and focus.

Value measurement to show in table

𐘂𐘂

✄𐘗✄𐘗

Sample ↦	Token ↦	Value ↵
useEuiBackgroundColor('transparent') ↦	↦	Value transparent ↵
useEuiBackgroundColor('plain') ↦	↦	Value #FFF ↵
useEuiBackgroundColor('subdued') ↦	↦	Value #fff ↵
useEuiBackgroundColor('accent') ↦	↦	Value #feedf5 ↵
useEuiBackgroundColor('primary') ↦	↦	Value #e6f1fa ↵
useEuiBackgroundColor('success') ↦	↦	Value #e6f9f7 ↵
useEuiBackgroundColor('warning') ↦	↦	Value #fff9e8 ↵
useEuiBackgroundColor('danger') ↦	↦	Value #f8e9e9 ↵

𐘂𐘂

Utilities

Contrast

warning

Note that color contrast cannot be accurately detected when using transparency (colors with alpha channels).

makeHighContrastColor(foreground, ratio)(background) function

Use this function to calculate the appropriate foreground color (usually text) based on a background color.

foreground: string;
ratio?: number = 4.5;
background?: string = euiTheme.colors.body;

5.00: makeHighContrastColor('white')('pink')

css`
  color: ${makeHighContrastColor(foreground)(background)};
`

If you want to use the same background color that the EUI theme uses for all of its contrast calculations, you can pass in the euiTheme as the background.

4.91: makeHighContrastColor(#fdc791, euiTheme)

css`
  color: ${makeHighContrastColor(foreground)(euiTheme)};
`

isColorDark(red, green, blue) function

Use this function to determine whether or not to use light or dark text against the given background color. It requires the values to be passed in as rgb integers and will return a boolean if the color is dark based on luminance.

If the function returns true, use euiTheme.colors.ghost otherwise use euiTheme.colors.ink as the text color.

red: 0-255;
green: 0-255;
blue: 0-255;

Light

css`
  color: ${isColorDark(color)
    ? euiTheme.colors.ghost
    : euiTheme.colors.ink;}
`

---

Transparency

transparentize(color, alpha) function

Use this function to convert any color to rgba() with the provided alpha value.

color: string;
alpha: decimal = 0-1;

transparentize(#006837, 0.75) = rgba(0,104,55,0.25)

transparentize(color, 0.75)

---

Tint and shade

tint(color, ratio) function

Use this function to mix any color with white. The higher the ratio, the more white will be mixed.

color: string;
ratio: decimal = 0-1;

tint(#BD271E, 0.75) = #efc9c7

tint(euiTheme.colors.danger, 0.75)

shade(color, ratio) function

Use this function to mix any color with black. The higher the ratio, the more black will be mixed.

color: string;
ratio: decimal = 0-1;

shade(#BD271E, 0.75) = #8e1d17

shade(euiTheme.colors.danger, 0.25)