Blue Color
Back to top

Blue Color Palette Documentation

  1. Home
  2. Color Palette
  3. Blue

Blue

Blue Color Palette with color code and other elements.

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

Blue Border Color

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

Blue Text Color

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

Reference :

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