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, necesitas utiizar 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">#EB9E05</div></div>

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

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

Color neutro

Los colores neutrales son para texto, fondos y bordes. Puedes 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">#2D2F33</div></div>
  <div class="demo-color-box bg-text-regular">Texto regular<div class="value">#5A5E66</div></div>
  <div class="demo-color-box bg-text-secondary">Texto secundario<div class="value">#878D99</div></div>
  <div class="demo-color-box bg-text-placeholder">Texto de placeholder<div class="value">#B4BCCC</div></div>
</div>

<div class="demo-color-box-group">
  <div class="demo-color-box bg-border-base">Borde base<div class="value">#D8DCE5</div></div>
  <div class="demo-color-box bg-border-light">Borde ligero<div class="value">#DFE4ED</div></div>
  <div class="demo-color-box bg-border-lighter">Borde claro<div class="value">#E6EBF5</div></div>
  <div class="demo-color-box bg-border-extra-light">Borde extra claro<div class="value">#EDF2FC</div></div>
</div>