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"
  :style="{ background: primary }"
>
  Brand Color<div class="value">#409EFF</div>
<div 
  class="bg-color-sub"
  :style="{ background: tintColor(primary, 0.9) }"
>
<div 
  class="bg-blue-sub-item" 
  v-for="(item, key) in Array(8)"
  :key="key"
  :style="{ background: tintColor(primary, (key + 1) / 10) }"
    >
</div>
</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"
:style="{ background: success }"
>Success<div class="value">#67C23A</div>
  <div 
    class="bg-color-sub"
  >
    <div 
      class="bg-success-sub-item" 
      v-for="(item, key) in Array(2)"
      :key="key"
      :style="{ background: tintColor(success, (key + 8) / 10) }"
        >
    </div>
  </div>
</div>

<div class="demo-color-box"
:style="{ background: warning }"
>Warning<div class="value">#E6A23C</div>
  <div 
      class="bg-color-sub"
    >
    <div 
      class="bg-success-sub-item" 
      v-for="(item, key) in Array(2)"
      :key="key"
      :style="{ background: tintColor(warning, (key + 8) / 10) }"
        >
    </div>
  </div>
</div>

<div class="demo-color-box"
:style="{ background: danger }"
>Danger<div class="value">#F56C6C</div>
  <div 
      class="bg-color-sub"
    >
    <div 
      class="bg-success-sub-item" 
      v-for="(item, key) in Array(2)"
      :key="key"
      :style="{ background: tintColor(danger, (key + 8) / 10) }"
        >
    </div>
  </div>
</div>

<div class="demo-color-box"
:style="{ background: info }"
>Info<div class="value">#909399</div>
  <div 
      class="bg-color-sub"
    >
    <div 
      class="bg-success-sub-item" 
      v-for="(item, key) in Array(2)"
      :key="key"
      :style="{ background: tintColor(info, (key + 8) / 10) }"
        >
    </div>
  </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 demo-color-box-other"
  :style="{ background: textPrimary }"
  >Primary Text<div class="value">{{textPrimary}}</div></div>
  <div class="demo-color-box demo-color-box-other"
  :style="{ background: textRegular }"
  >
  Regular Text<div class="value">{{textRegular}}</div></div>
  <div class="demo-color-box demo-color-box-other"
  :style="{ background: textSecondary }"
  >Secondary Text<div class="value">{{textSecondary}}</div></div>
  <div class="demo-color-box demo-color-box-other"
  :style="{ background: textPlaceholder }"
  >Placeholder Text<div class="value">{{textPlaceholder}}</div></div>
</div>

<div class="demo-color-box-group">
  <div class="demo-color-box demo-color-box-other demo-color-box-lite"
  :style="{ background: borderBase }"
  >Base Border<div class="value">{{borderBase}}</div></div>
  <div class="demo-color-box demo-color-box-other demo-color-box-lite"
  :style="{ background: borderLight }"
  >Light Border<div class="value">{{borderLight}}</div></div>
  <div class="demo-color-box demo-color-box-other demo-color-box-lite"
  :style="{ background: borderLighter }"
  >Lighter Border<div class="value">{{borderLighter}}</div></div>
  <div class="demo-color-box demo-color-box-other demo-color-box-lite"
  :style="{ background: borderExtraLight }"
  >Extra Light Border<div class="value">{{borderExtraLight}}</div></div>
</div>

<div class="demo-color-box-group">
  <div 
  class="demo-color-box demo-color-box-other"
  :style="{ background: black }"
  >Basic Black<div class="value">{{black}}</div></div>
  <div
  class="demo-color-box demo-color-box-other"
  :style="{ background: white, color: '#303133', border: '1px solid #eee' }"
  >Basic White<div class="value">{{white}}</div></div>
  <div class="demo-color-box demo-color-box-other bg-transparent">Transparent<div class="value">Transparent</div>
  </div>
</div>