Color Design Specifications

Element Plus uses a specific set of palettes to specify colors, providing a consistent look and feel for the products you build.

When to Use

• Understanding the color system
• Applying brand colors correctly
• Using semantic colors (success, warning, danger)
• Working with neutral colors for text and backgrounds

Main Color

The main color of Element Plus is a bright and friendly blue.

Secondary Colors

Secondary colors are used in different scenarios (e.g., danger color indicates dangerous operations).

Success

Warning

Danger

Info

Neutral Colors

Neutral colors are for text, background, and border colors. Use different neutral colors to represent the hierarchical structure.

Text Colors

Background Colors

Color Usage Guidelines

Semantic Usage

/* Success states */
.success-message {
  color: var(--el-color-success);
  background-color: var(--el-color-success-light-9);
}

/* Warning states */
.warning-message {
  color: var(--el-color-warning);
  background-color: var(--el-color-warning-light-9);
}

/* Error states */
.error-message {
  color: var(--el-color-danger);
  background-color: var(--el-color-danger-light-9);
}

/* Info states */
.info-message {
  color: var(--el-color-info);
  background-color: var(--el-color-info-light-9);
}

Text Hierarchy

/* Primary text - headings, important content */
h1, h2, h3 {
  color: var(--el-text-color-primary);
}

/* Regular text - body content */
p {
  color: var(--el-text-color-regular);
}

/* Secondary text - captions, hints */
.caption {
  color: var(--el-text-color-secondary);
}

/* Placeholder text */
input::placeholder {
  color: var(--el-text-color-placeholder);
}

CSS Variables Summary

:root {
  /* Primary */
  --el-color-primary: #409eff;
  
  /* Semantic Colors */
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;
  
  /* Text Colors */
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #a8abb2;
  --el-text-color-disabled: #c0c4cc;
  
  /* Background Colors */
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f2f3f5;
  --el-bg-color-overlay: #ffffff;
  
  /* Fill Colors */
  --el-fill-color: #f0f2f5;
  --el-fill-color-light: #f5f7fa;
  --el-fill-color-lighter: #fafafa;
}

Best Practices

1. Use CSS Variables: Always use predefined color variables for consistency
2. Semantic Colors: Use appropriate semantic colors for their intended purpose
3. Text Hierarchy: Use text color variables to establish visual hierarchy
4. Dark Mode: Colors automatically adjust in dark mode
5. Customization: Override primary color to match your brand