element-ui/examples/docs/en-US/color.md

Color

Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.

Main Color

The main color of Element is bright and friendly blue.

<div class="demo-color-box bg-blue">Blue<div class="value">#409EFF</div></div>

Secondary Color

Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)

<div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>

<div class="demo-color-box bg-warning">Warning<div class="value">#EB9E05</div></div>

<div class="demo-color-box bg-danger">Danger<div class="value">#FA5555</div></div>

<div class="demo-color-box bg-info">Info<div class="value">#878D99</div></div>

Neutral Color

Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.

<div class="demo-color-box-group">
  <div class="demo-color-box bg-text-primary">Primary Text<div class="value">#2D2F33</div></div>
  <div class="demo-color-box bg-text-regular">Regular Text<div class="value">#5A5E66</div></div>
  <div class="demo-color-box bg-text-secondary">Secondary Text<div class="value">#878D99</div></div>
  <div class="demo-color-box bg-text-placeholder">Placeholder Text<div class="value">#B4BCCC</div></div>
</div>

<div class="demo-color-box-group">
  <div class="demo-color-box bg-border-base">Base Border<div class="value">#D8DCE5</div></div>
  <div class="demo-color-box bg-border-light">Light Border<div class="value">#DFE4ED</div></div>
  <div class="demo-color-box bg-border-lighter">Lighter Border<div class="value">#E6EBF5</div></div>
  <div class="demo-color-box bg-border-extra-light">Extra Light Border<div class="value">#EDF2FC</div></div>
</div>