Metronic | Color Library

UI Collor Collection

Just apply the color class(e.g: .blue-madison) to Metronic portlets, buttons, statistic blocks, tiles and other containers.

#ffffff

white

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-white"

Box with custom border color

class="border-white"

Box with custom background color

class="bg-white bg-font-white"

Button class="btn white"

Button class="c-btn-border-1x c-btn-white"

Button class="btn btn-circle white"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat white"

#e1e5ec

default

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-default"

Box with custom border color

class="border-default"

Box with custom background color

class="bg-default bg-font-default"

Button class="btn default"

Button class="c-btn-border-1x c-btn-default"

Button class="btn btn-circle default"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat default"

#2f353b

dark

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-dark"

Box with custom border color

class="border-dark"

Box with custom background color

class="bg-dark bg-font-dark"

Button class="btn dark"

Button class="c-btn-border-1x c-btn-dark"

Button class="btn btn-circle dark"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat dark"

#3598dc

blue

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-blue"

Box with custom border color

class="border-blue"

Box with custom background color

class="bg-blue bg-font-blue"

Button class="btn blue"

Button class="c-btn-border-1x c-btn-blue"

Button class="btn btn-circle blue"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat blue"

#578ebe

blue-madison

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-blue-madison"

Box with custom border color

class="border-blue-madison"

Box with custom background color

class="bg-blue-madison bg-font-blue-madison"

Button class="btn blue-madison"

Button class="c-btn-border-1x c-btn-blue-madison"

Button class="btn btn-circle blue-madison"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat blue-madison"

#2C3E50

blue-chambray

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-blue-chambray"

Box with custom border color

class="border-blue-chambray"

Box with custom background color

class="bg-blue-chambray bg-font-blue-chambray"

Button class="btn blue-chambray"

Button class="c-btn-border-1x c-btn-blue-chambray"

Button class="btn btn-circle blue-chambray"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat blue-chambray"

#22313F

blue-ebonyclay

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-blue-ebonyclay"

Box with custom border color

class="border-blue-ebonyclay"

Box with custom background color

class="bg-blue-ebonyclay bg-font-blue-ebonyclay"

Button class="btn blue-ebonyclay"

Button class="c-btn-border-1x c-btn-blue-ebonyclay"

Button class="btn btn-circle blue-ebonyclay"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat blue-ebonyclay"

#67809F

blue-hoki

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-blue-hoki"

Box with custom border color

class="border-blue-hoki"

Box with custom background color

class="bg-blue-hoki bg-font-blue-hoki"

Button class="btn blue-hoki"

Button class="c-btn-border-1x c-btn-blue-hoki"

Button class="btn btn-circle blue-hoki"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat blue-hoki"

#4B77BE

blue-steel

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-blue-steel"

Box with custom border color

class="border-blue-steel"

Box with custom background color

class="bg-blue-steel bg-font-blue-steel"

Button class="btn blue-steel"

Button class="c-btn-border-1x c-btn-blue-steel"

Button class="btn btn-circle blue-steel"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat blue-steel"

#4c87b9

blue-soft

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-blue-soft"

Box with custom border color

class="border-blue-soft"

Box with custom background color

class="bg-blue-soft bg-font-blue-soft"

Button class="btn blue-soft"

Button class="c-btn-border-1x c-btn-blue-soft"

Button class="btn btn-circle blue-soft"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat blue-soft"

#5e738b

blue-dark

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-blue-dark"

Box with custom border color

class="border-blue-dark"

Box with custom background color

class="bg-blue-dark bg-font-blue-dark"

Button class="btn blue-dark"

Button class="c-btn-border-1x c-btn-blue-dark"

Button class="btn btn-circle blue-dark"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat blue-dark"

#5C9BD1

blue-sharp

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-blue-sharp"

Box with custom border color

class="border-blue-sharp"

Box with custom background color

class="bg-blue-sharp bg-font-blue-sharp"

Button class="btn blue-sharp"

Button class="c-btn-border-1x c-btn-blue-sharp"

Button class="btn btn-circle blue-sharp"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat blue-sharp"

#32c5d2

green

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-green"

Box with custom border color

class="border-green"

Box with custom background color

class="bg-green bg-font-green"

Button class="btn green"

Button class="c-btn-border-1x c-btn-green"

Button class="btn btn-circle green"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat green"

#1BBC9B

green-meadow

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-green-meadow"

Box with custom border color

class="border-green-meadow"

Box with custom background color

class="bg-green-meadow bg-font-green-meadow"

Button class="btn green-meadow"

Button class="c-btn-border-1x c-btn-green-meadow"

Button class="btn btn-circle green-meadow"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat green-meadow"

#1BA39C

green-seagreen

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-green-seagreen"

Box with custom border color

class="border-green-seagreen"

Box with custom background color

class="bg-green-seagreen bg-font-green-seagreen"

Button class="btn green-seagreen"

Button class="c-btn-border-1x c-btn-green-seagreen"

Button class="btn btn-circle green-seagreen"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat green-seagreen"

#36D7B7

green-turquoise

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-green-turquoise"

Box with custom border color

class="border-green-turquoise"

Box with custom background color

class="bg-green-turquoise bg-font-green-turquoise"

Button class="btn green-turquoise"

Button class="c-btn-border-1x c-btn-green-turquoise"

Button class="btn btn-circle green-turquoise"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat green-turquoise"

#44b6ae

green-haze

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-green-haze"

Box with custom border color

class="border-green-haze"

Box with custom background color

class="bg-green-haze bg-font-green-haze"

Button class="btn green-haze"

Button class="c-btn-border-1x c-btn-green-haze"

Button class="btn btn-circle green-haze"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat green-haze"

#26C281

green-jungle

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-green-jungle"

Box with custom border color

class="border-green-jungle"

Box with custom background color

class="bg-green-jungle bg-font-green-jungle"

Button class="btn green-jungle"

Button class="c-btn-border-1x c-btn-green-jungle"

Button class="btn btn-circle green-jungle"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat green-jungle"

#3faba4

green-soft

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-green-soft"

Box with custom border color

class="border-green-soft"

Box with custom background color

class="bg-green-soft bg-font-green-soft"

Button class="btn green-soft"

Button class="c-btn-border-1x c-btn-green-soft"

Button class="btn btn-circle green-soft"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat green-soft"

#4DB3A2

green-dark

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-green-dark"

Box with custom border color

class="border-green-dark"

Box with custom background color

class="bg-green-dark bg-font-green-dark"

Button class="btn green-dark"

Button class="c-btn-border-1x c-btn-green-dark"

Button class="btn btn-circle green-dark"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat green-dark"

#2ab4c0

green-sharp

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-green-sharp"

Box with custom border color

class="border-green-sharp"

Box with custom background color

class="bg-green-sharp bg-font-green-sharp"

Button class="btn green-sharp"

Button class="c-btn-border-1x c-btn-green-sharp"

Button class="btn btn-circle green-sharp"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat green-sharp"

#E5E5E5

grey

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-grey"

Box with custom border color

class="border-grey"

Box with custom background color

class="bg-grey bg-font-grey"

Button class="btn grey"

Button class="c-btn-border-1x c-btn-grey"

Button class="btn btn-circle grey"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat grey"

#e9edef

grey-steel

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-grey-steel"

Box with custom border color

class="border-grey-steel"

Box with custom background color

class="bg-grey-steel bg-font-grey-steel"

Button class="btn grey-steel"

Button class="c-btn-border-1x c-btn-grey-steel"

Button class="btn btn-circle grey-steel"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat grey-steel"

#fafafa

grey-cararra

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-grey-cararra"

Box with custom border color

class="border-grey-cararra"

Box with custom background color

class="bg-grey-cararra bg-font-grey-cararra"

Button class="btn grey-cararra"

Button class="c-btn-border-1x c-btn-grey-cararra"

Button class="btn btn-circle grey-cararra"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat grey-cararra"

#555555

grey-gallery

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-grey-gallery"

Box with custom border color

class="border-grey-gallery"

Box with custom background color

class="bg-grey-gallery bg-font-grey-gallery"

Button class="btn grey-gallery"

Button class="c-btn-border-1x c-btn-grey-gallery"

Button class="btn btn-circle grey-gallery"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat grey-gallery"

#95A5A6

grey-cascade

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-grey-cascade"

Box with custom border color

class="border-grey-cascade"

Box with custom background color

class="bg-grey-cascade bg-font-grey-cascade"

Button class="btn grey-cascade"

Button class="c-btn-border-1x c-btn-grey-cascade"

Button class="btn btn-circle grey-cascade"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat grey-cascade"

#BFBFBF

grey-silver

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-grey-silver"

Box with custom border color

class="border-grey-silver"

Box with custom background color

class="bg-grey-silver bg-font-grey-silver"

Button class="btn grey-silver"

Button class="c-btn-border-1x c-btn-grey-silver"

Button class="btn btn-circle grey-silver"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat grey-silver"

#ACB5C3

grey-salsa

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-grey-salsa"

Box with custom border color

class="border-grey-salsa"

Box with custom background color

class="bg-grey-salsa bg-font-grey-salsa"

Button class="btn grey-salsa"

Button class="c-btn-border-1x c-btn-grey-salsa"

Button class="btn btn-circle grey-salsa"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat grey-salsa"

#bfcad1

grey-salt

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-grey-salt"

Box with custom border color

class="border-grey-salt"

Box with custom background color

class="bg-grey-salt bg-font-grey-salt"

Button class="btn grey-salt"

Button class="c-btn-border-1x c-btn-grey-salt"

Button class="btn btn-circle grey-salt"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat grey-salt"

#525e64

grey-mint

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-grey-mint"

Box with custom border color

class="border-grey-mint"

Box with custom background color

class="bg-grey-mint bg-font-grey-mint"

Button class="btn grey-mint"

Button class="c-btn-border-1x c-btn-grey-mint"

Button class="btn btn-circle grey-mint"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat grey-mint"

#e7505a

red

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-red"

Box with custom border color

class="border-red"

Box with custom background color

class="bg-red bg-font-red"

Button class="btn red"

Button class="c-btn-border-1x c-btn-red"

Button class="btn btn-circle red"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat red"

#E08283

red-pink

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-red-pink"

Box with custom border color

class="border-red-pink"

Box with custom background color

class="bg-red-pink bg-font-red-pink"

Button class="btn red-pink"

Button class="c-btn-border-1x c-btn-red-pink"

Button class="btn btn-circle red-pink"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat red-pink"

#E26A6A

red-sunglo

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-red-sunglo"

Box with custom border color

class="border-red-sunglo"

Box with custom background color

class="bg-red-sunglo bg-font-red-sunglo"

Button class="btn red-sunglo"

Button class="c-btn-border-1x c-btn-red-sunglo"

Button class="btn btn-circle red-sunglo"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat red-sunglo"

#e35b5a

red-intense

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-red-intense"

Box with custom border color

class="border-red-intense"

Box with custom background color

class="bg-red-intense bg-font-red-intense"

Button class="btn red-intense"

Button class="c-btn-border-1x c-btn-red-intense"

Button class="btn btn-circle red-intense"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat red-intense"

#D91E18

red-thunderbird

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-red-thunderbird"

Box with custom border color

class="border-red-thunderbird"

Box with custom background color

class="bg-red-thunderbird bg-font-red-thunderbird"

Button class="btn red-thunderbird"

Button class="c-btn-border-1x c-btn-red-thunderbird"

Button class="btn btn-circle red-thunderbird"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat red-thunderbird"

#EF4836

red-flamingo

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-red-flamingo"

Box with custom border color

class="border-red-flamingo"

Box with custom background color

class="bg-red-flamingo bg-font-red-flamingo"

Button class="btn red-flamingo"

Button class="c-btn-border-1x c-btn-red-flamingo"

Button class="btn btn-circle red-flamingo"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat red-flamingo"

#d05454

red-soft

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-red-soft"

Box with custom border color

class="border-red-soft"

Box with custom background color

class="bg-red-soft bg-font-red-soft"

Button class="btn red-soft"

Button class="c-btn-border-1x c-btn-red-soft"

Button class="btn btn-circle red-soft"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat red-soft"

#f36a5a

red-haze

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-red-haze"

Box with custom border color

class="border-red-haze"

Box with custom background color

class="bg-red-haze bg-font-red-haze"

Button class="btn red-haze"

Button class="c-btn-border-1x c-btn-red-haze"

Button class="btn btn-circle red-haze"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat red-haze"

#e43a45

red-mint

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-red-mint"

Box with custom border color

class="border-red-mint"

Box with custom background color

class="bg-red-mint bg-font-red-mint"

Button class="btn red-mint"

Button class="c-btn-border-1x c-btn-red-mint"

Button class="btn btn-circle red-mint"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat red-mint"

#c49f47

yellow

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-yellow"

Box with custom border color

class="border-yellow"

Box with custom background color

class="bg-yellow bg-font-yellow"

Button class="btn yellow"

Button class="c-btn-border-1x c-btn-yellow"

Button class="btn btn-circle yellow"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat yellow"

#E87E04

yellow-gold

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-yellow-gold"

Box with custom border color

class="border-yellow-gold"

Box with custom background color

class="bg-yellow-gold bg-font-yellow-gold"

Button class="btn yellow-gold"

Button class="c-btn-border-1x c-btn-yellow-gold"

Button class="btn btn-circle yellow-gold"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat yellow-gold"

#f2784b

yellow-casablanca

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-yellow-casablanca"

Box with custom border color

class="border-yellow-casablanca"

Box with custom background color

class="bg-yellow-casablanca bg-font-yellow-casablanca"

Button class="btn yellow-casablanca"

Button class="c-btn-border-1x c-btn-yellow-casablanca"

Button class="btn btn-circle yellow-casablanca"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat yellow-casablanca"

#f3c200

yellow-crusta

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-yellow-crusta"

Box with custom border color

class="border-yellow-crusta"

Box with custom background color

class="bg-yellow-crusta bg-font-yellow-crusta"

Button class="btn yellow-crusta"

Button class="c-btn-border-1x c-btn-yellow-crusta"

Button class="btn btn-circle yellow-crusta"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat yellow-crusta"

#F7CA18

yellow-lemon

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-yellow-lemon"

Box with custom border color

class="border-yellow-lemon"

Box with custom background color

class="bg-yellow-lemon bg-font-yellow-lemon"

Button class="btn yellow-lemon"

Button class="c-btn-border-1x c-btn-yellow-lemon"

Button class="btn btn-circle yellow-lemon"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat yellow-lemon"

#F4D03F

yellow-saffron

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-yellow-saffron"

Box with custom border color

class="border-yellow-saffron"

Box with custom background color

class="bg-yellow-saffron bg-font-yellow-saffron"

Button class="btn yellow-saffron"

Button class="c-btn-border-1x c-btn-yellow-saffron"

Button class="btn btn-circle yellow-saffron"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat yellow-saffron"

#c8d046

yellow-soft

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-yellow-soft"

Box with custom border color

class="border-yellow-soft"

Box with custom background color

class="bg-yellow-soft bg-font-yellow-soft"

Button class="btn yellow-soft"

Button class="c-btn-border-1x c-btn-yellow-soft"

Button class="btn btn-circle yellow-soft"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat yellow-soft"

#c5bf66

yellow-haze

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-yellow-haze"

Box with custom border color

class="border-yellow-haze"

Box with custom background color

class="bg-yellow-haze bg-font-yellow-haze"

Button class="btn yellow-haze"

Button class="c-btn-border-1x c-btn-yellow-haze"

Button class="btn btn-circle yellow-haze"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat yellow-haze"

#c5b96b

yellow-mint

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-yellow-mint"

Box with custom border color

class="border-yellow-mint"

Box with custom background color

class="bg-yellow-mint bg-font-yellow-mint"

Button class="btn yellow-mint"

Button class="c-btn-border-1x c-btn-yellow-mint"

Button class="btn btn-circle yellow-mint"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat yellow-mint"

#8E44AD

purple

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-purple"

Box with custom border color

class="border-purple"

Box with custom background color

class="bg-purple bg-font-purple"

Button class="btn purple"

Button class="c-btn-border-1x c-btn-purple"

Button class="btn btn-circle purple"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat purple"

#8775a7

purple-plum

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-purple-plum"

Box with custom border color

class="border-purple-plum"

Box with custom background color

class="bg-purple-plum bg-font-purple-plum"

Button class="btn purple-plum"

Button class="c-btn-border-1x c-btn-purple-plum"

Button class="btn btn-circle purple-plum"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat purple-plum"

#BF55EC

purple-medium

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-purple-medium"

Box with custom border color

class="border-purple-medium"

Box with custom background color

class="bg-purple-medium bg-font-purple-medium"

Button class="btn purple-medium"

Button class="c-btn-border-1x c-btn-purple-medium"

Button class="btn btn-circle purple-medium"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat purple-medium"

#8E44AD

purple-studio

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-purple-studio"

Box with custom border color

class="border-purple-studio"

Box with custom background color

class="bg-purple-studio bg-font-purple-studio"

Button class="btn purple-studio"

Button class="c-btn-border-1x c-btn-purple-studio"

Button class="btn btn-circle purple-studio"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat purple-studio"

#9B59B6

purple-wisteria

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-purple-wisteria"

Box with custom border color

class="border-purple-wisteria"

Box with custom background color

class="bg-purple-wisteria bg-font-purple-wisteria"

Button class="btn purple-wisteria"

Button class="c-btn-border-1x c-btn-purple-wisteria"

Button class="btn btn-circle purple-wisteria"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat purple-wisteria"

#9A12B3

purple-seance

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-purple-seance"

Box with custom border color

class="border-purple-seance"

Box with custom background color

class="bg-purple-seance bg-font-purple-seance"

Button class="btn purple-seance"

Button class="c-btn-border-1x c-btn-purple-seance"

Button class="btn btn-circle purple-seance"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat purple-seance"

#8775a7

purple-intense

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-purple-intense"

Box with custom border color

class="border-purple-intense"

Box with custom background color

class="bg-purple-intense bg-font-purple-intense"

Button class="btn purple-intense"

Button class="c-btn-border-1x c-btn-purple-intense"

Button class="btn btn-circle purple-intense"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat purple-intense"

#796799

purple-sharp

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-purple-sharp"

Box with custom border color

class="border-purple-sharp"

Box with custom background color

class="bg-purple-sharp bg-font-purple-sharp"

Button class="btn purple-sharp"

Button class="c-btn-border-1x c-btn-purple-sharp"

Button class="btn btn-circle purple-sharp"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat purple-sharp"

#8877a9

purple-soft

Text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Background matching text font

Some sample text goes here...
Some sample text goes here...
Some sample text goes here...

Icon font

Background matching icon font

Class usage

class="font-purple-soft"

Box with custom border color

class="border-purple-soft"

Box with custom background color

class="bg-purple-soft bg-font-purple-soft"

Button class="btn purple-soft"

Button class="c-btn-border-1x c-btn-purple-soft"

Button class="btn btn-circle purple-soft"

Statistic Widgets

12,5M$

Total Profit

class="dashboard-stat purple-soft"

Components 1

Components 2

Components 3

Components 4

Color Library color variants for ui components

UI Collor Collection

Staff

Bob Nilson

Nick Larson

Deon Hubert

Ella Wong

Customers

Lara Kunis

Ernie Kyllonen

Lisa Stone

Deon Portalatin

Irina Savikova

Maria Gomez

General

System

General Settings

System Settings

About

Subscribe Email

Follow Us On

Contacts

You have 12 pending tasks

You have 12 pending tasks

You have 7 New Messages

Components 1

Components 2

Components 3

Components 4

Color Library color variants for ui components

THEME COLORS

LAYOUT

UI Collor Collection

white

Text font

Background matching text font

Icon font

Background matching icon font

Class usage

Statistic Widgets

default

Text font

Background matching text font

Icon font

Background matching icon font

Class usage

Statistic Widgets

dark

Text font

Background matching text font

Icon font

Background matching icon font

Class usage

Statistic Widgets

blue

Text font

Background matching text font

Icon font

Background matching icon font

Class usage

Statistic Widgets

blue-madison

Text font

Background matching text font

Icon font

Background matching icon font

Class usage

Statistic Widgets

blue-chambray

Text font

Background matching text font

Icon font

Background matching icon font

Class usage

Statistic Widgets

blue-ebonyclay

Text font

Background matching text font

Icon font

Background matching icon font

Class usage

Statistic Widgets

blue-hoki

Text font

Background matching text font

Icon font

Background matching icon font

Class usage

Statistic Widgets

blue-steel

Text font

Background matching text font

Icon font

Background matching icon font

Class usage

Statistic Widgets

blue-soft

Text font

Background matching text font

Icon font

Background matching icon font

Class usage