Element Plus Colors

Element Plus provides a comprehensive color system that ensures consistency, accessibility, and scalability across our UI components. This guide outlines the primary colors, semantic colors, and neutral colors used in Element Plus design system.

Element Plus Color Library
Element Plus Color Library

Access our comprehensive Element Plus color library and design resources

Element Plus Color System

A comprehensive color palette designed for consistency, accessibility, and visual hierarchy across all Element Plus components. Click any color to copy its value to your clipboard.

Quick Usage Tips
  • •Click any color swatch to copy its hex value
  • •Click the CSS variable name to copy it for use in stylesheets
  • •Light and dark mode values are shown side-by-side
  • •Use semantic colors for consistent state communication
Primary Brand Colors
Item.com signature purple palette with carefully crafted variations for different UI states

Light
Dark

Primary

Main brand color

Light:#753BBD
Dark:#763ABF
CSS:--el-color-primary
Light
Dark

Primary Light 3

Hover states

Light:#9561D0
Dark:#6C38AD
CSS:--el-color-primary-light-3
Light
Dark

Primary Light 5

Active elements

Light:#A788E1
Dark:#693f9d
CSS:--el-color-primary-light-5
Light
Dark

Primary Light 7

Subtle backgrounds

Light:#CDBAF0
Dark:#562d87
CSS:--el-color-primary-light-7
Light
Dark

Primary Light 8

Very light tints

Light:#E0D4F4
Dark:#562d87
CSS:--el-color-primary-light-8
Light
Dark

Primary Light 9

Near-white purple

Light:#F5F0FB
Dark:#0a090a
CSS:--el-color-primary-light-9
Light
Dark

Primary Dark 2

Pressed states

Light:#5B2D94
Dark:#5c2a9a
CSS:--el-color-primary-dark-2
Semantic Colors
Contextual colors that communicate meaning and guide user actions

Light

Success

Positive actions & confirmations

Light:#15803D
CSS:--el-color-success
Light
Dark

Success Light

Success backgrounds

Light:#DCFCE7
Dark:#15803c20
CSS:--el-color-success-light-7
Light

Warning

Caution states & alerts

Light:#e79f04
CSS:--el-color-warning
Light
Dark

Warning Light

Warning backgrounds

Light:#FEF3C7
Dark:#473A1E
CSS:--el-color-warning-light-7
Light

Danger

Errors & destructive actions

Light:#F0283C
CSS:--el-color-danger
Light
Dark

Danger Light

Error backgrounds

Light:#FECACA
Dark:#f0283c23
CSS:--el-color-danger-light-7
Light

Info

Neutral information

Light:#666666
CSS:--el-color-info
Light
Dark

Info Light

Info backgrounds

Light:#DEDFE0
Dark:#181818
CSS:--el-color-info-light-7
Text Colors
Typography hierarchy through color weight and opacity

Light
Dark

Text Primary

Headings & emphasis

Light:#181818
Dark:#ffffff
CSS:--el-text-color-primary
Light
Dark

Text Regular

Body text

Light:#3c3c3c
Dark:#ffffff
CSS:--el-text-color-regular
Light
Dark

Text Secondary

Descriptions & labels

Light:#666666
Dark:#999999
CSS:--el-text-color-secondary
Light
Dark

Text Placeholder

Input placeholders

Light:#666666
Dark:#737373
CSS:--el-text-color-placeholder
Light
Dark

Text Disabled

Inactive elements

Light:#6666665d
Dark:#7373736d
CSS:--el-text-color-disabled
Background Colors
Layered backgrounds for depth and visual separation

Light
Dark

Background

Main background

Light:#F9F9F9
Dark:#000000
CSS:--el-bg-color
Light
Dark

Background Page

Page background

Light:#F2F3F5
Dark:#0A0A0A
CSS:--el-bg-color-page
Light
Dark

Background Overlay

Overlay surfaces

Light:#FFFFFF
Dark:#0D0D0D
CSS:--el-bg-color-overlay
Border Colors
Subtle borders for defining component boundaries and interactive states

Light
Dark

Border

Default borders

Light:#C0C1C2
Dark:#343434
CSS:--el-border-color
Light
Dark

Border Light

Subtle borders

Light:#E0E0E0
Dark:#292929
CSS:--el-border-color-light
Light
Dark

Border Lighter

Very light borders

Light:#dbdbdb
Dark:#292929
CSS:--el-border-color-lighter
Light
Dark

Border Hover

Hover state

Light:#C0C4CC
Dark:#6E6E70
CSS:--el-border-color-hover
Fill Colors
Background fills for various component states and surfaces

Light
Dark

Fill

Component backgrounds

Light:#F0F2F5
Dark:#303030
CSS:--el-fill-color
Light
Dark

Fill Light

Light fills

Light:#f3f3f3
Dark:#262627
CSS:--el-fill-color-light
Light
Dark

Fill Lighter

Lightest fills

Light:#eaeaea
Dark:#1D1E1E
CSS:--el-fill-color-lighter
Light
Dark

Fill Blank

Pure backgrounds

Light:#FFFFFF
Dark:#0d0d0d
CSS:--el-fill-color-blank
A comprehensive directory for all your needs

Copyright © 2025 item. All rights reserved.

item-logo
Getting Started
Design Guidelines
Design Guidelines
    Element Plus Colors | Item Design System & Brand Guide