Color utilities

Colors and accessibility

Never rely solely on color to convey meaning. Colors can be overridden by system forced colors, or can be difficult to distinguish for different users. Always combine color context with accompanying icons or copy to indicate states such as error, activity, etc.

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.

✄𐘗
tsx code block:
✄𐘗color: 'transparent' | 'plain' | 'subdued' | 'accent' | 'accentSecondary' | 'primary' | 'success' | 'warning' | 'danger';

background-color: #FFEBF5

✄𐘗
tsx code block:
✄𐘗const colorStyles = useEuiBackgroundColorCSS();
const cssStyles = [colorStyles['accent']];

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

Utilities

Contrast

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.

✄𐘗
text code block:
✄𐘗foreground: string;
ratio?: number = 4.5;
background?: string = euiTheme.colors.body;

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

✄𐘗
tsx code block:
✄𐘗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.

5.03: makeHighContrastColor(#fdc791, euiTheme)

✄𐘗
tsx code block:
✄𐘗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.

✄𐘗
text code block:
✄𐘗red: 0-255;
green: 0-255;
blue: 0-255;

Light

✄𐘗
tsx code block:
✄𐘗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.

✄𐘗
text code block:
✄𐘗color: string;
alpha: decimal = 0-1;

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

✄𐘗
tsx code block:
✄𐘗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.

✄𐘗
text code block:
✄𐘗color: string;
ratio: decimal = 0-1;

tint(#C61E25, 0.75) = #f1c7c9

✄𐘗
tsx code block:
✄𐘗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.

✄𐘗
text code block:
✄𐘗color: string;
ratio: decimal = 0-1;

shade(#C61E25, 0.75) = #95171c

✄𐘗
tsx code block:
✄𐘗shade(euiTheme.colors.danger, 0.25)