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 bg-blue">Azul<div class="value">#409EFF</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 bg-success">Éxito<div class="value">#67C23A</div></div>

<div class="demo-color-box bg-warning">Precaución<div class="value">#E6A23C</div></div>

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

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

Color neutro

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

<div class="demo-color-box-group">
  <div class="demo-color-box bg-text-primary">Texto primario<div class="value">#303133</div></div>
  <div class="demo-color-box bg-text-regular">Texto regular<div class="value">#606266</div></div>
  <div class="demo-color-box bg-text-secondary">Texto secundario<div class="value">#909399</div></div>
  <div class="demo-color-box bg-text-placeholder">Texto de placeholder<div class="value">#C0C4CC</div></div>
</div>

<div class="demo-color-box-group">
  <div class="demo-color-box bg-border-base">Borde base<div class="value">#DCDFE6</div></div>
  <div class="demo-color-box bg-border-light">Borde ligero<div class="value">#E4E7ED</div></div>
  <div class="demo-color-box bg-border-lighter">Borde claro<div class="value">#EBEEF5</div></div>
  <div class="demo-color-box bg-border-extra-light">Borde extra claro<div class="value">#F2F6FC</div></div>
</div>