Colors

  1. UI Kit
  2. Colors

Contextual Colors Styles-1

.bg-primary

#00a5a2

.bg-secondary

#db555d

.bg-warning

#f7b725

.bg-info

#17b1df

.bg-success

#44b86c

.bg-danger

#e82646

.bg-light

#f3f6f8

.bg-dark

#232323

Contextual Colors Styles-2

Primary

#00a5a2

Class :

{ .bg-primary }

Info

#17b1df

Class :

{ .bg-info }

Secondary

#db555d

Class :

{ .bg-secondary }

Warning

#dbb255

Class :

{ .bg-warning }

Danger

#e82646

Class :

{ .bg-danger }

Success

#69b747

Class :

{ .bg-success }

Transparent Colors

Primary

#c cedec

Class :

{ .bg-primary-transparent }

Info

#d1eff9

Class :

{ .bg-info-transparent }

Secondary

#f8dddf

Class :

{ .bg-secondary-transparent }

Warning

#f8f0dd

Class :

{ .bg-warning-transparent }

Danger

#fad4da

Class :

{ .bg-danger-transparent }

Success

#e1f1da

Class :

{ .bg-success-transparent }

Gradient Colors

.bg-primary-gradient

.bg-secondary-gradient

.bg-warning-gradient

.bg-info-gradient

.bg-success-gradient

.bg-danger-gradient

Class Reference Values
class="bg-primary-gradient" linear-gradient(to bottom right, #6c5ffc 0%, #8e77fa 100%)
class="bg-secondary-gradient" linear-gradient(to bottom right, #82cff2 0%, #28b7f9 100%)
class="bg-success-gradient" linear-gradient(to bottom right, #1ea38f 0%, #5cf9e2 100%)
class="bg-warning-gradient" linear-gradient(to bottom right, #f66b4e 0%, #fbc434 100%)
class="bg-danger-gradient" linear-gradient(to bottom right, #b51b35 0%, #fd4a68 100%)
class="bg-info-gradient" linear-gradient(to bottom right, #1e63c3 0%, #00f2fe 100%)

Other Colors

Blue

#3223f1

Class :

{ .bg-blue }

Teal

#1caf9f

Class :

{ .bg-teal }

Azure

#45aaf2

Class :

{ .bg-azure }

Orange

#fc7303

Class :

{ .bg-orange }

Cyan

#007ea7

Class :

{ .bg-cyan }

Yellow

#FBB034

Class :

{ .bg-yellow }

Gray

#5a6970

Class :

{ .bg-gray }

Purple

#8927ec

Class :

{ .bg-purple }

Lime

#7bd235

Class :

{ .bg-lime }

Gray-dark

#343a40

Class :

{ .bg-gray-dark }

Green

#4ecc48

Class :

{ .bg-green }

Pink

#fc5296

Class :

{ .bg-pink }

Secondary

#05c3fb

Class :

{ .bg-secondary }

Red

#e73827

Class :

{ .bg-red }

Indigo

#6574cd

Class :

{ .bg-indigo }