Colors
Elastic UI builds with a color palette that is based on predefined 14-step scales for a core set of three colors (blue / teal / pink) as well as a green / yellow / red qualitative set and combined with a 28-step grayscale. Colors are defined to work well when combined for their semantic purpose.
When switching between light and dark color modes, the theme keys do not change, only their values do.
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.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.
tsx code block: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 #0B64DD |
colors.accent | Pulls attention to key indicators like notifications or number of selections. | Value #BC1E70 |
colors.accentSecondary | Secondary attention indicator with lower priority. | Value #008B87 |
colors.success | Used for positive messages/graphics and additive actions. | Value #008A5E |
colors.warning | Used for warnings and actions that have potential to be destructive. | Value #FACB3D |
colors.danger | Used for negative messages/graphics like errors and destructive elements. | Value #C61E25 |
Text colors
Each brand color also has a corresponding text variant that 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.
tsx code block:css` color: ${euiTheme.colors.textWarning}; `
Sample | Token | Value |
|---|---|---|
Aa colors.textParagraph | Value #1D2A3E | |
Aa colors.textHeading | Value #111C2C | |
Aa colors.textSubdued | Value #516381 | |
Aa colors.link | Value #1750BA | |
Aa colors.textPrimary | Value #1750BA | |
Aa colors.textAccent | Value #A11262 | |
Aa colors.textAccentSecondary | Value #047471 | |
Aa colors.textSuccess | Value #09724D | |
Aa colors.textWarning | Value #6A4906 | |
Aa colors.textDanger | Value #A71627 |
Background colors
Semantic background colors. These should be used according to their semantic purpose.
If a border is needed use the semantically related border color, e.g. backgroundBasePrimary with borderBasePrimary.
tsx code block:css` background-color: ${euiTheme.colors.backgroundFilledWarning}; `
Sample | Token | Value |
|---|---|---|
colors.backgroundBasePrimary | Value #E8F1FF | |
colors.backgroundBaseAccent | Value #FFEBF5 | |
colors.backgroundBaseAccentSecondary | Value #E2F9F7 | |
colors.backgroundBaseSuccess | Value #E2F8F0 | |
colors.backgroundBaseWarning | Value #FDF3D8 | |
colors.backgroundBaseDanger | Value #FFE8E5 | |
colors.backgroundBaseSubdued | Value #F6F9FC | |
colors.backgroundBasePlain | Value #FFFFFF | |
colors.backgroundBaseDisabled | Value #ECF1F9 | |
colors.backgroundBaseHighlighted | Value #F6F9FC | |
colors.backgroundBaseFormsPrepend | Value #ECF1F9 | |
colors.backgroundBaseFormsControlDisabled | Value #CAD3E2 | |
colors.backgroundBaseInteractiveHover | Value rgba(23,80,186, 0.04) | |
colors.backgroundBaseInteractiveSelect | Value #E8F1FF | |
colors.backgroundBaseInteractiveOverlay | Value rgba(72,89,117, 0.7) | |
colors.backgroundBaseSkeletonEdge | Value rgba(72,89,117, 0.16) | |
colors.backgroundBaseSkeletonEdge | Value rgba(72,89,117, 0.04) | |
colors.backgroundLightPrimary | Value #D9E8FF | |
colors.backgroundLightAccent | Value #FDDDE9 | |
colors.backgroundLightAccentSecondary | Value #C9F3F0 | |
colors.backgroundLightSuccess | Value #C9F3E3 | |
colors.backgroundLightWarning | Value #FDE9B5 | |
colors.backgroundLightDanger | Value #FDDDD8 | |
colors.backgroundLightText | Value #E3E8F2 | |
colors.backgroundFilledPrimary | Value #0B64DD | |
colors.backgroundFilledAccent | Value #BC1E70 | |
colors.backgroundFilledAccentSecondary | Value #008B87 | |
colors.backgroundFilledSuccess | Value #008A5E | |
colors.backgroundFilledWarning | Value #FACB3D | |
colors.backgroundFilledDanger | Value #C61E25 | |
colors.backgroundFilledText | Value #5A6D8C |
Borders
Semantic border colors. These should be used according to their semantic purpose.
The default border color (used as border.color) borderBaseSubdued.
Use the base border colors for most cases. Use borderBasePlain for a slightly stronger border (e.g. for forms).
tsx code block:css` border-color: ${euiTheme.colors.borderBaseWarning}; `
Sample | Token | Value |
|---|---|---|
colors.backgroundBasePrimary | Value #E8F1FF | |
colors.borderBasePrimary | Value #BFDBFF | |
colors.borderBaseAccent | Value #FFC7DB | |
colors.borderBaseAccentSecondary | Value #A6EDEA | |
colors.borderBaseSuccess | Value #AEE8D2 | |
colors.borderBaseWarning | Value #FCD883 | |
colors.borderBaseDanger | Value #FFC9C2 | |
colors.borderBasePlain | Value #CAD3E2 | |
colors.borderBaseSubdued | Value #E3E8F2 | |
colors.borderBaseDisabled | Value #CAD3E2 | |
colors.borderBaseFloating | Value transparent | |
colors.borderBaseFormsColorSwatch | Value rgba(72,89,117, 0.24) | |
colors.borderBaseFormsControl | Value #8E9FBC | |
colors.borderStrongPrimary | Value #1750BA | |
colors.borderStrongAccent | Value #A11262 | |
colors.borderStrongAccentSecondary | Value #047471 | |
colors.borderStrongSuccess | Value #09724D | |
colors.borderStrongWarning | Value #825803 | |
colors.borderStrongDanger | Value #A71627 |
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.
tsx code block: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. @deprecated - use specific semantic color tokens instead. | Value #FFFFFF |
colors.lightestShade | Used to lightly shade areas that contain secondary content or contain panel-like components. @deprecated - use specific semantic color tokens instead. | Value #ECF1F9 |
colors.lightShade | Used for most borders and dividers (horizontal rules). @deprecated - use specific semantic color tokens instead. | Value #CAD3E2 |
colors.mediumShade | The middle gray for all themes; this is the base for colors.subdued@deprecated - use specific semantic color tokens instead. | Value #8E9FBC |
colors.darkShade | Slightly subtle graphic color | Value #5A6D8C |
colors.darkestShade | Used as the text color and the background color for inverted components like tooltips and the control bar. @deprecated - use specific semantic color tokens instead. | Value #2B394F |
colors.fullShade | The opposite of emptyShade@deprecated - use specific semantic color tokens instead. | Value #07101F |
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.
text code block: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 @deprecated - use backgroundBasePlain or backgroundBaseSubduedinstead | Value #F6F9FC |
colors.highlight | Used to highlight text when matching against search strings. | Value #E8F1FF |
colors.disabled | Computed against colors.darkestShade.@deprecated - use specific semantic tokens instead (e.g. backgroundBaseDisabled, borderBaseDisabled etc) | Value #E3E8F2 |
colors.disabledText | Computed against colors.disabled@deprecated - use textDisabled instead | Value #6A7FA0 |
colors.shadow | The base color for shadows that gets transparentized at a base value on the colorMode and then layered. | Value #000000 |
colors.ghost | @deprecated - use plainLight instead | Value #FFFFFF |
colors.ink | @deprecated - use plainDark instead | Value #07101F |
Data visualization colors
euiTheme.colors.vis[token] token
The following colors are color-blind safe and should be used in categorically seried visualizations and graphics.
They are meant to be contrasted against the value of colors.backgroundBasePlain for the current theme.
text code block:css` background-color: ${euiTheme.colors.vis.euiColorVis0}; `
Sample | Token | Value |
|---|---|---|
colors.vis.euiColorVis0 | Value #16C5C0 | |
colors.vis.euiColorVis1 | Value #A6EDEA | |
colors.vis.euiColorVis2 | Value #61A2FF | |
colors.vis.euiColorVis3 | Value #BFDBFF | |
colors.vis.euiColorVis4 | Value #EE72A6 | |
colors.vis.euiColorVis5 | Value #FFC7DB | |
colors.vis.euiColorVis6 | Value #F6726A | |
colors.vis.euiColorVis7 | Value #FFC9C2 | |
colors.vis.euiColorVis8 | Value #EAAE01 | |
colors.vis.euiColorVis9 | Value #FCD883 |