Green Color Page

Green Color Palette with background & border color.

Green Background Color


Green Color

.bg-green

#4CAF50

Green Lighten 1#66BB6A

.bg-green.bg-lighten-1

Green Lighten 2#81C784

.bg-green.bg-lighten-2

Green Lighten 3#A5D6A7

.bg-green.bg-lighten-3

Green Lighten 4#C8E6C9

.bg-green.bg-lighten-4

Green Darken 1#43A047

.bg-green.bg-darken-1

Green Darken 2#388E3C

.bg-green.bg-darken-2

Green Darken 3#2E7D32

.bg-green.bg-darken-3

Green Darken 4#1B5E20

.bg-green.bg-darken-4

Green Accent 1#B9F6CA

.bg-green.bg-accent-1

Green Accent 2#69F0AE

.bg-green.bg-accent-2

Green Accent 3#00E676

.bg-green.bg-accent-3

Green Accent 4#00C853

.bg-green.bg-accent-4

Green Palette Classes

Green color palette contains 13 colors: 1 main green color and 4 lighten colors, 4 darken colors and 4 Accent colors. All colors works perfectly with any bootstrap components, form components or any robust controls, that makes Robust very effective, flexible and configurable.

Please note: You can use .bg-green and .btn-green as main colors, but if you want to use lighten, darken or accent colors, use bg-* bg-lighten-NUMBER for lighten color, bg-* bg-darken-NUMBER for darken color and bg-* bg-accent-NUMBER for accent colors.

Class Description
.bg-green Green Class for background color.
.bg-green
.bg-lighten-*
For lighten green background color, this two classes needed. Here *: 1,2,3,4 lighten green color options.
.bg-green
.bg-darken-*
For darken green background color, this two classes needed. Here *: 1,2,3,4 darken green color options.
.bg-green
.bg-accent-*
For accent green background color, this two classes needed. Here *: 1,2,3,4 accent green color options.

Green Border Color


Green Color

.border-green

#4CAF50

Green Lighten 1#66BB6A

.border-green.border-lighten-1

Green Lighten 2#81C784

.border-green.border-lighten-2

Green Lighten 3#A5D6A7

.border-green.border-lighten-3

Green Lighten 4#C8E6C9

.border-green.border-lighten-4

Green Darken 1#43A047

.border-green.border-darken-1

Green Darken 2#388E3C

.border-green.border-darken-2

Green Darken 3#2E7D32

.border-green.border-darken-3

Green Darken 4#1B5E20

.border-green.border-darken-4

Green Accent 1#B9F6CA

.border-green.border-accent-1

Green Accent 2#69F0AE

.border-green.border-accent-2

Green Accent 3#00E676

.border-green.border-accent-3

Green Accent 4#00C853

.border-green.border-accent-4

Green Border Classes

Class Description
.border-green Green Class for background color.
.border-green
.border-lighten-*
For lighten green background color, this two classes needed. Here *: 1,2,3,4 lighten green color options.
.border-top-green
.border-top-lighten-*
For lighten green top border. Use this classes if you need to highlight only top border.
.border-bottom-green
.border-bottom-lighten-*
For lighten green bottom border. Use this classes if you need to highlight only bottom border.
.border-right-green
.border-right-lighten-*
For lighten green right border. Use this classes if you need to highlight only right border.
.border-left-green
.border-left-lighten-*
For lighten green left border. Use this classes if you need to highlight only left border.
.border-green
.border-darken-*
For darken green background color, this two classes needed. Here *: 1,2,3,4 darken green color options.
.border-top-green
.border-top-darken-*
For darken green top border. Use this classes if you need to highlight only top border.
.border-bottom-green
.border-bottom-darken-*
For darken green bottom border. Use this classes if you need to highlight only bottom border.
.border-right-green
.border-right-darken-*
For darken green right border. Use this classes if you need to highlight only right border.
.border-left-green
.border-left-darken-*
For darken green left border. Use this classes if you need to highlight only left border.
.border-green
.border-accent-*
For accent green background color, this two classes needed. Here *: 1,2,3,4 accent green color options.
.border-top-green
.border-top-accent-*
For accent green top border. Use this classes if you need to highlight only top border.
.border-bottom-green
.border-bottom-accent-*
For accent green bottom border. Use this classes if you need to highlight only bottom border.
.border-right-green
.border-right-accent-*
For accent green right border. Use this classes if you need to highlight only right border.
.border-left-green
.border-left-accent-*
For accent green left border. Use this classes if you need to highlight only left border.

Green Text Color


Green Color

.green

#4CAF50

Green Lighten 1#66BB6A

.green.lighten-1

Green Lighten 2#81C784

.green.lighten-2

Green Lighten 3#A5D6A7

.green.lighten-3

Green Lighten 4#C8E6C9

.green.lighten-4

Green Darken 1#43A047

.green.darken-1

Green Darken 2#388E3C

.green.darken-2

Green Darken 3#2E7D32

.green.darken-3

Green Darken 4#1B5E20

.green.darken-4

Green Accent 1#B9F6CA

.green.accent-1

Green Accent 2#69F0AE

.green.accent-2

Green Accent 3#00E676

.green.accent-3

Green Accent 4#00C853

.green.accent-4

Green Text Classes

Class Description
.green Class for Green Text color.
.green
.lighten-*
For lighten green text color, this two classes needed. Here *: 1,2,3,4 for lighten green color options.
.green
.darken-*
For darken green text color, this two classes needed. Here *: 1,2,3,4 for darken green color options.
.green
.accent-*
For accent green text color, this two classes needed. Here *: 1,2,3,4 for accent green color options.

Theme Customizer


Customize & Preview in Real Time

Menu Color Options

Layout Options

Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now