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">#E6A23C</div></div>

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

<div class="demo-color-box bg-info">Info<div class="value">#909399</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">#303133</div></div>
  <div class="demo-color-box bg-text-regular">Regular Text<div class="value">#606266</div></div>
  <div class="demo-color-box bg-text-secondary">Secondary Text<div class="value">#909399</div></div>
  <div class="demo-color-box bg-text-placeholder">Placeholder Text<div class="value">#C0C4CC</div></div>
</div>

<div class="demo-color-box-group">
  <div class="demo-color-box bg-border-base">Base Border<div class="value">#DCDFE6</div></div>
  <div class="demo-color-box bg-border-light">Light Border<div class="value">#E4E7ED</div></div>
  <div class="demo-color-box bg-border-lighter">Lighter Border<div class="value">#EBEEF5</div></div>
  <div class="demo-color-box bg-border-extra-light">Extra Light Border<div class="value">#F2F6FC</div></div>
</div>