Scroll to Top

Colors

Now control the colors of your element by adding simple color classes as guideline of google's material design. There are many functions of these colors.

SITEMAP Documentation / Css / Colors

We have implemented classes for colors which are very simple. These colors are inherited from Material Design Colors. Background, colors are simply represented by the color name and the value of the color as classes in color-names are given in this section.

Demo

Red

red6

#F44336

red1

#FFEBEE

red2

#FFCDD2

red3

#EF9A9A

red4

#E57373

red5

#EF5350

red6

#F44336

red7

#E53935

red8

#D32F2F

red9

#C62828

red10

#B71C1C

red11

#FF8A80

red12

#FF5252

red13

#FF1744

red14

#D50000

Pink

pink6

#E91E63

pink1

#FCE4EC

pink2

#F8BBD0

pink3

#F48FB1

pink4

#F06292

pink5

#EC407A

pink6

#E91E63

pink7

#D81B60

pink8

#C2185B

pink9

#AD1457

pink10

#880E4F

pink11

#FF80AB

pink12

#FF4081

pink13

#F50057

pink14

#C51162

Purple

purple6

#9C27B0

purple1

#F3E5F5

purple2

#E1BEE7

purple3

#CE93D8

purple4

#BA68C8

purple5

#AB47BC

purple6

#8E24AA

purple7

#8E24AA

purple8

#7B1FA2

purple9

#6A1B9A

purple10

#4A148C

purple11

#EA80FC

purple12

#E040FB

purple13

#D500F9

purple14

#AA00FF

Deep Purple

deeppurple6

#673AB7

deeppurple1

#EDE7F6

deeppurple2

#D1C4E9

deeppurple3

#B39DDB

deeppurple4

#9575CD

deeppurple5

#7E57C2

deeppurple6

#673AB7

deeppurple7

#5E35B1

deeppurple8

#512DA8

deeppurple9

#4527A0

deeppurple10

#311B92

deeppurple11

#B388FF

deeppurple12

#7C4DFF

deeppurple13

#651FFF

deeppurple14

#6200EA

Indigo

indigo6

#3F51B5

indigo1

#E8EAF6

indigo2

#C5CAE9

indigo3

#9FA8DA

indigo4

#7986CB

indigo5

#5C6BC0

indigo6

#3F51B5

indigo7

#3949AB

indigo8

#303F9F

indigo9

#283593

indigo10

#1A237E

indigo11

#8C9EFF

indigo12

#536DFE

indigo13

#3D5AFE

indigo14

#304FFE

Blue

blue6

#2196F3

blue1

#E3F2FD

blue2

#BBDEFB

blue3

#90CAF9

blue4

#64B5F6

blue5

#42A5F5

blue6

#2196F3

blue7

#1E88E5

blue8

#1976D2

blue9

#1565C0

blue10

#0D47A1

blue11

#82B1FF

blue12

#448AFF

blue13

#2979FF

blue14

#2962FF

Light Blue

lightblue6

#03A9F4

lightblue1

#E1F5FE

lightblue2

#B3E5FC

lightblue3

#81D4FA

lightblue4

#4FC3F7

lightblue5

#29B6F6

lightblue6

#03A9F4

lightblue7

#039BE5

lightblue8

#0288D1

lightblue9

#0277BD

lightblue10

#01579B

lightblue11

#80D8FF

lightblue12

#40C4FF

lightblue13

#00B0FF

lightblue14

#0091EA

Cyan

cyan6

#00BCD4

cyan1

#E0F7FA

cyan2

#B2EBF2

cyan3

#80DEEA

cyan4

#4DD0E1

cyan5

#26C6DA

cyan6

#00BCD4

cyan7

#00ACC1

cyan8

#0097A7

cyan9

#00838F

cyan10

#006064

cyan11

#84FFFF

cyan12

#18FFFF

cyan13

#00E5FF

cyan14

#00B8D4

teal

teal6

#009688

teal1

#E0F2F1

teal2

#B2DFDB

teal3

#80CBC4

teal4

#4DB6AC

teal5

#26A69A

teal6

#009688

teal7

#00897B

teal8

#00796B

teal9

#00695C

teal10

#004D40

teal11

#A7FFEB

teal12

#64FFDA

teal13

#1DE9B6

teal14

#00BFA5

green

green6

#4CAF50

green1

#E8F5E9

green2

#C8E6C9

green3

#A5D6A7

green4

#81C784

green5

#66BB6A

green6

#4CAF50

green7

#43A047

green8

#388E3C

green9

#2E7D32

green10

#1B5E20

green11

#B9F6CA

green12

#69F0AE

green13

#00E676

green14

#00C853

lightgreen

lightgreen6

#8BC34A

lightgreen1

#F1F8E9

lightgreen2

#DCEDC8

lightgreen3

#C5E1A5

lightgreen4

#AED581

lightgreen5

#9CCC65

lightgreen6

#8BC34A

lightgreen7

#7CB342

lightgreen8

#689F38

lightgreen9

#558B2F

lightgreen10

#33691E

lightgreen11

#CCFF90

lightgreen12

#B2FF59

lightgreen13

#76FF03

lightgreen14

#64DD17

lime

lime6

#CDDC39

lime1

#F9FBE7

lime2

#F0F4C3

lime3

#E6EE9C

lime4

#DCE775

lime5

#D4E157

lime6

#CDDC39

lime7

#C0CA33

lime8

#AFB42B

lime9

#9E9D24

lime10

#827717

lime11

#F4FF81

lime12

#EEFF41

lime13

#C6FF00

lime14

#AEEA00

yellow

yellow6

#FFEB3B

yellow1

#FFFDE7

yellow2

#FFF9C4

yellow3

#FFF59D

yellow4

#FFF176

yellow5

#FFEE58

yellow6

#FFEB3B

yellow7

#FDD835

yellow8

#FBC02D

yellow9

#F9A825

yellow10

#F57F17

yellow11

#FFFF8D

yellow12

#FFFF00

yellow13

#FFEA00

yellow14

#FFD600

amber

amber6

#FFC107

amber1

#FFF8E1

amber2

#FFECB3

amber3

#FFE082

amber4

#FFD54F

amber5

#FFCA28

amber6

#FFC107

amber7

#FFB300

amber8

#FFA000

amber9

#FF8F00

amber10

#FF6F00

amber11

#FFE57F

amber12

#FFD740

amber13

#FFC400

amber14

#FFAB00

orange

orange6

#FF9800

orange1

#FFF3E0

orange2

#FFE0B2

orange3

#FFCC80

orange4

#FFB74D

orange5

#FFA726

orange6

#FF9800

orange7

#FB8C00

orange8

#F57C00

orange9

#EF6C00

orange10

#E65100

orange11

#FFD180

orange12

#FFAB40

orange13

#FF9100

orange14

#FF6D00

deeporange

deeporange6

#FF5722

deeporange1

#FBE9E7

deeporange2

#FFCCBC

deeporange3

#FFAB91

deeporange4

#FF8A65

deeporange5

#FF7043

deeporange6

#FF5722

deeporange7

#F4511E

deeporange8

#E64A19

deeporange9

#D84315

deeporange10

#BF360C

deeporange11

#FF9E80

deeporange12

#FF6E40

deeporange13

#FF3D00

deeporange14

#DD2C00

brown

brown6

#795548

brown1

#EFEBE9

brown2

#D7CCC8

brown3

#BCAAA4

brown4

#A1887F

brown5

#8D6E63

brown6

#795548

brown7

#6D4C41

brown8

#5D4037

brown9

#4E342E

brown10

#3E2723

grey

grey6

#9E9E9E

grey1

#FAFAFA

grey2

#F5F5F5

grey3

#EEEEEE

grey4

#E0E0E0

grey5

#BDBDBD

grey6

#9E9E9E

grey7

#757575

grey8

#616161

grey9

#424242

grey10

#212121

bluegrey

bluegrey6

#607D8B

bluegrey1

#ECEFF1

bluegrey2

#CFD8DC

bluegrey3

#B0BEC5

bluegrey4

#90A4AE

bluegrey5

#78909C

bluegrey6

#607D8B

bluegrey7

#546E7A

bluegrey8

#455A64

bluegrey9

#37474F

bluegrey10

#263238

Black

#000000

White

#FFFFFF

Code copy

<div class="grey10">This div have background of grey10</div>

Color for text can also be implemented through simple classes and adding text-[color-name] to any element.

Demo

text-grey2

Code copy

<p class="text-grey2">text-grey2</p>

These classes will activate the color specified when user hover on any element.

Demo

hover-grey2

Code copy

<p class="hover-grey2">hover-grey2</p>

Change color of text on hover.

Demo

text-hover-grey2

Code copy

<p class="text-hover-grey2">text-hover-grey2</p>

Feedback