Theme

Below are examples of theme colors (most used and recommended). Additional uses of colors exist beyond bg-{primary|success} and border-{primary|success} which you can experiment with by using the color name.

primary
secondary
success
danger
warning
info
light
dark
primary
secondary
success
danger
warning
info
light
dark

Associative

The following colors, although available for use, are less used colors.

blue
indigo
purple
pink
red
orange
yellow
green
teal
cyan
blue
indigo
purple
pink
red
orange
yellow
green
teal
cyan

Social Media

These colors are official colors used by their respective brands. Use only when social media policies require it.

twitter
facebook
googleplus
linkedin
instagram
youtube
twitter
facebook
googleplus
linkedin
instagram
youtube

Grays

For accessibility purposes, it is best to give a contrast between these numbers by 5 steps. For example, text-gray-500 is the ideal lowest scale of black to be used over white when reading is important.

white
100
200
300
400
500
600
700
800
900
black
white
100
200
300
400
500
600
700
800
900
black