Purple Color
Back to top

Purple Color Palette Documentation

  1. Home
  2. Color Palette
  3. Purple

Purple

Purple Color Palette with color code and other elements.

Purple Background Color
Background Color Options Class Description
Background Color .bg-purple Purple Class for background color.
Lighten Color .bg-purple.bg-lighten-* For lighten purple background color, this two classes needed. Here *: 1,2,3,4 lighten purple color options.
Darken Color .bg-purple.bg-darken-* For darken purple background color, this two classes needed. Here *: 1,2,3,4 darken purple color options.
Accent Color .bg-purple.bg-accent-* For accent purple background color, this two classes needed. Here *: 1,2,3,4 accent purple color options.

Purple Border Color

Border Color Options Class Description
Border Color .border-purple Purple Class for background color.
Lighten Border .border-purple
.border-lighten-*		 For lighten purple background color, this two classes needed. Here *: 1,2,3,4 lighten purple color options.
Lighten Top Border .border-top-purple
.border-top-lighten-*		 For lighten purple top border. Use this classes if you need to highlight only top border.
Lighten Bottom Border .
.border-bottom-lighten-*		 For lighten purple bottom border. Use this classes if you need to highlight only bottom border.
Lighten Right Border .border-right-purple
.border-right-lighten-*		 For lighten purple right border. Use this classes if you need to highlight only right border.
Lighten Left Border .border-left-purple
.border-left-lighten-*		 For lighten purple left border. Use this classes if you need to highlight only left border.
Darken Border .border-purple
.border-darken-*		 For darken purple background color, this two classes needed. Here *: 1,2,3,4 darken purple color options.
Darken Top Border .border-top-purple
.border-top-darken-*		 For darken purple top border. Use this classes if you need to highlight only top border.
Darken Bottom Border .
.border-bottom-darken-*		 For darken purple bottom border. Use this classes if you need to highlight only bottom border.
Darken Right Border .border-right-purple
.border-right-darken-*		 For darken purple right border. Use this classes if you need to highlight only right border.
Darken Left Border .border-left-purple
.border-left-darken-*		 For darken purple left border. Use this classes if you need to highlight only left border.
Accent Border .border-purple
.border-accent-*		 For accent purple background color, this two classes needed. Here *: 1,2,3,4 accent purple color options.
Accent Top Border .border-top-purple
.border-top-accent-*		 For accent purple top border. Use this classes if you need to highlight only top border.
Accent Bottom Border .
.border-bottom-accent-*		 For accent purple bottom border. Use this classes if you need to highlight only bottom border.
Accent Right Border .border-right-purple
.border-right-accent-*		 For accent purple right border. Use this classes if you need to highlight only right border.
Accent Left Border .border-left-purple
.border-left-accent-*		 For accent purple left border. Use this classes if you need to highlight only left border.

Purple Text Color

Border Color Options Class Description
Text Color .purple Class for Purple Text color.
Lighten Color .purple.lighten-* For lighten purple text color, this two classes needed. Here *: 1,2,3,4 for lighten purple color options.
Darken Color .purple.darken-* For darken purple text color, this two classes needed. Here *: 1,2,3,4 for darken purple color options.
Accent Color .purple.accent-* For accent purple text color, this two classes needed. Here *: 1,2,3,4 for accent purple color options.

Reference :

Type URL
Classic Purple https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/color-palette-purple.html
Material Purple https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/color-palette-purple.html