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.
| Color | Variable | Value | Usage |
|---|---|---|---|
| Primary | --el-color-primary | #409eff | Main brand color |
| Primary Light-3 | --el-color-primary-light-3 | #79bbff | Hover state |
| Primary Light-5 | --el-color-primary-light-5 | #a0cfff | Lighter variant |
| Primary Light-7 | --el-color-primary-light-7 | #c6e2ff | Background |
| Primary Light-8 | --el-color-primary-light-8 | #d9ecff | Light background |
| Primary Light-9 | --el-color-primary-light-9 | #ecf5ff | Extra light background |
| Primary Dark-2 | --el-color-primary-dark-2 | #337ecc | Active state |
Secondary Colors
Secondary colors are used in different scenarios (e.g., danger color indicates dangerous operations).
Success
| Variable | Value | Usage |
|---|---|---|
--el-color-success | #67c23a | Success operations |
--el-color-success-light-3 | #95d475 | Hover state |
--el-color-success-light-5 | #b3e19d | Lighter variant |
--el-color-success-light-7 | #d1edc4 | Background |
--el-color-success-light-8 | #e1f3d8 | Light background |
--el-color-success-light-9 | #f0f9eb | Extra light background |
--el-color-success-dark-2 | #529b2e | Active state |
Warning
| Variable | Value | Usage |
|---|---|---|
--el-color-warning | #e6a23c | Warning operations |
--el-color-warning-light-3 | #eebe77 | Hover state |
--el-color-warning-light-5 | #f3d19e | Lighter variant |
--el-color-warning-light-7 | #f8e3c5 | Background |
--el-color-warning-light-8 | #faecd8 | Light background |
--el-color-warning-light-9 | #fdf6ec | Extra light background |
--el-color-warning-dark-2 | #b88230 | Active state |
Danger
| Variable | Value | Usage |
|---|---|---|
--el-color-danger | #f56c6c | Danger/error operations |
--el-color-danger-light-3 | #f89898 | Hover state |
--el-color-danger-light-5 | #fab6b6 | Lighter variant |
--el-color-danger-light-7 | #fcd3d3 | Background |
--el-color-danger-light-8 | #fde2e2 | Light background |
--el-color-danger-light-9 | #fef0f0 | Extra light background |
--el-color-danger-dark-2 | #c45656 | Active state |
Info
| Variable | Value | Usage |
|---|---|---|
--el-color-info | #909399 | Information operations |
--el-color-info-light-3 | #b1b3b8 | Hover state |
--el-color-info-light-5 | #c8c9cc | Lighter variant |
--el-color-info-light-7 | #dedfe0 | Background |
--el-color-info-light-8 | #e9e9eb | Light background |
--el-color-info-light-9 | #f4f4f5 | Extra light background |
--el-color-info-dark-2 | #73767a | Active state |
Neutral Colors
Neutral colors are for text, background, and border colors. Use different neutral colors to represent the hierarchical structure.
Text Colors
| Variable | Value | Usage |
|---|---|---|
--el-text-color-primary | #303133 | Primary text |
--el-text-color-regular | #606266 | Regular text |
--el-text-color-secondary | #909399 | Secondary text |
--el-text-color-placeholder | #a8abb2 | Placeholder text |
--el-text-color-disabled | #c0c4cc | Disabled text |
Background Colors
| Variable | Value | Usage |
|---|---|---|
--el-bg-color | #ffffff | Default background |
--el-bg-color-page | #f2f3f5 | Page background |
--el-bg-color-overlay | #ffffff | Overlay background |
--el-fill-color | #f0f2f5 | Fill color |
--el-fill-color-light | #f5f7fa | Light fill |
--el-fill-color-lighter | #fafafa | Lighter fill |
--el-fill-color-extra-light | #fafcff | Extra light fill |
--el-fill-color-dark | #ebedf0 | Dark fill |
--el-fill-color-darker | #e6e8eb | Darker fill |
--el-fill-color-blank | #ffffff | Blank fill |
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
- Use CSS Variables: Always use predefined color variables for consistency
- Semantic Colors: Use appropriate semantic colors for their intended purpose
- Text Hierarchy: Use text color variables to establish visual hierarchy
- Dark Mode: Colors automatically adjust in dark mode
- Customization: Override primary color to match your brand