Colors

Elastic UI builds with a very limited palette. It uses a core set of three colors with a green / orange / red qualitative set and combined with a six-color grayscale. Variation beyond these colors is minimal and always done with math manipulation against the original set.

When switching between light and dark color modes, the theme keys do not change, only their values do. This is why most keys are not named for their evaluated value but by their purpose.

Brand colors

Elastic has two main brand colors. The other three are used for statefulness like indicating between successful and dangerous actions.

euiTheme.colors[brand] token

Most usages of the colors can be implemented simply by pulling and applying the values.

background: #FEC514

css`
  background: ${euiTheme.colors.warning};
`

𐘂𐘂

✄𐘗✄𐘗

Sample ↦	Token ↦	Value ↵
colors.primary ↦	Main brand color and used for most call to actions like buttons and links. ↦	Value #07C ↵
colors.accent ↦	Pulls attention to key indicators like notifications or number of selections. ↦	Value #F04E98 ↵
colors.success ↦	Used for positive messages/graphics and additive actions. ↦	Value #00BFB3 ↵
colors.warning ↦	Used for warnings and actions that have potential to be destructive. ↦	Value #FEC514 ↵
colors.danger ↦	Used for negative messages/graphics like errors and destructive elements. ↦	Value #BD271E ↵

𐘂𐘂

Text colors

Specific text colors calculated off either the brand or shade colors.

Each brand color also has a corresponding text variant that has been calculated for proper (at least 4.5) contrast against colors.body and should be used specifically when coloring text. As is used in EuiTextColor.

euiTheme.colors[colorText] token

Remember, when using any of the EUI colors for text, use the text specific variant.

If your background color is anything other than or darker than the body color, you will want to re-calculate the high contrast version by using the makeHighContrastColor(foreground)(background) method.

color: #8a6a0a

css`
  color: ${euiTheme.colors.warningText};
`

𐘂𐘂

✄𐘗✄𐘗

Sample ↦	Token ↦	Value ↵
Aa colors.text ↦	↦	Value #343741 ↵
Aa colors.title ↦	↦	Value #1a1c21 ↵
Aa colors.subduedText ↦	↦	Value #69707d ↵
Aa colors.link ↦	↦	Value #0071c2 ↵
Aa colors.primaryText ↦	↦	Value #0071c2 ↵
Aa colors.accentText ↦	↦	Value #ba3d76 ↵
Aa colors.successText ↦	↦	Value #007e77 ↵
Aa colors.warningText ↦	↦	Value #8a6a0a ↵
Aa colors.dangerText ↦	↦	Value #bd271e ↵

𐘂𐘂

Shades

A six-color grayscale palette. Variation beyond these colors is minimal and always done through computations against this set.

euiTheme.colors[colorShade] token

Since the EUI colors usually evaluate to a hex value, the easiest way to perform color operations like transparency, shading, or tinting is by using the EUI provided methods of transparentize(), shade(), and tint() respectively.

For all available color functions see the Colors Utilities page.

background: #D3DAE6

css`
  background: ${euiTheme.colors.lightShade};
`

𐘂𐘂

✄𐘗✄𐘗

Sample ↦	Token ↦	Value ↵
colors.emptyShade ↦	Used as the background color of primary page content and panels including modals and flyouts. ↦	Value #FFF ↵
colors.lightestShade ↦	Used to lightly shade areas that contain secondary content or contain panel-like components. ↦	Value #F1F4FA ↵
colors.lightShade ↦	Used for most borders and dividers (horizontal rules). ↦	Value #D3DAE6 ↵
colors.mediumShade ↦	The middle gray for all themes; this is the base for colors.subdued ↦	Value #98A2B3 ↵
colors.darkShade ↦	Slightly subtle graphic color ↦	Value #69707D ↵
colors.darkestShade ↦	Used as the text color and the background color for inverted components like tooltips and the control bar. ↦	Value #343741 ↵
colors.fullShade ↦	The opposite of emptyShade ↦	Value #000 ↵

𐘂𐘂

Special colors

These are used a lot for special cases.

euiTheme.colors[special] token

Constant colors are those that do not change no matter the theme or color mode and typically represent the polar extremes.

This text is always white and the background always black.

css`
  color: ${euiTheme.colors.ghost};
  background-color: ${euiTheme.colors.ink};
`

𐘂𐘂

✄𐘗✄𐘗

Sample ↦	Token ↦	Value ↵
colors.body ↦	The background color for the whole window (body) and is a computed value of colors.lightestShade. Provides denominator (background) value for contrast calculations ↦	Value #fff ↵
colors.highlight ↦	Used to highlight text when matching against search strings. ↦	Value #fff9e8 ↵
colors.disabled ↦	Computed against colors.darkestShade. ↦	Value #ABB4C4 ↵
colors.disabledText ↦	Computed against colors.disabled ↦	Value #abb4c4 ↵
colors.shadow ↦	The base color for shadows that gets transparentized at a base value on the colorMode and then layered. ↦	Value #000 ↵
colors.ghost ↦	↦	Value #FFF ↵
colors.ink ↦	↦	Value #000 ↵

𐘂𐘂