element-ui/examples/docs/es/color.md

Color

Element utiliza un conjunto de paletas para especificar colores, y así, proporcionar una apariencia y sensación coherente para los productos que construye.

Color principal

El color principal de Element es el azul brillante y amigable.

<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>

Color secundario

Además del color principal, se necesitan utilizar distintos colores para diferentes escenarios (por ejemplo, el color en tono rojo indica una operación peligrosa).

<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>

Color neutro

Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jerárquica.

<div class="demo-color-box-group">
  <div class="demo-color-box demo-color-box-other"
  :style="{ background: textPrimary }"
  >Texto primario<div class="value">{{textPrimary}}</div></div>
  <div class="demo-color-box demo-color-box-other"
  :style="{ background: textRegular }"
  >
  Texto regular<div class="value">{{textRegular}}</div></div>
  <div class="demo-color-box demo-color-box-other"
  :style="{ background: textSecondary }"
  >Texto secundario<div class="value">{{textSecondary}}</div></div>
  <div class="demo-color-box demo-color-box-other"
  :style="{ background: textPlaceholder }"
  >Texto de placeholder<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 }"
  >Borde base<div class="value">{{borderBase}}</div></div>
  <div class="demo-color-box demo-color-box-other demo-color-box-lite"
  :style="{ background: borderLight }"
  >Borde ligero<div class="value">{{borderLight}}</div></div>
  <div class="demo-color-box demo-color-box-other demo-color-box-lite"
  :style="{ background: borderLighter }"
  >Borde claro<div class="value">{{borderLighter}}</div></div>
  <div class="demo-color-box demo-color-box-other demo-color-box-lite"
  :style="{ background: borderExtraLight }"
  >Borde extra claro<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>