FlowBite Logo Flowbite
Pricing

Tailwind CSS Colors - Flowbite

Customize the default colors of FlowBite using the Tailwind CSS configuration file

Default color palette #

The team behind FlowBite carefully selected and extended the default Tailwind CSS color palette while keeping the same classes.

Gray
colors.coolGray
50
#F9FAFB
100
#F3F4F6
200
#E5E7EB
300
#D1D5DB
400
#9CA3AF
500
#6B7280
600
#4B5563
700
#374151
800
#1F2937
900
#111827
Red
colors.red
50
#FDF2F2
100
#FDE8E8
200
#FBD5D5
300
#F8B4B4
400
#F98080
500
#F05252
600
#E02424
700
#C81E1E
800
#9B1C1C
900
#771D1D
Yellow
colors.amber
50
#FDFDEA
100
#FDF6B2
200
#FCE96A
300
#FACA15
400
#E3A008
500
#C27803
600
#9F580A
700
#8E4B10
800
#723B13
900
#633112
Green
colors.emerald
50
#F3FAF7
100
#DEF7EC
200
#BCF0DA
300
#84E1BC
400
#31C48D
500
#0E9F6E
600
#057A55
700
#046C4E
800
#03543F
900
#014737
Blue
colors.blue
50
#EBF5FF
100
#E1EFFE
200
#C3DDFD
300
#A4CAFE
400
#76A9FA
500
#3F83F8
600
#1C64F2
700
#1A56DB
800
#1E429F
900
#233876
Indigo
colors.indigo
50
#F0F5FF
100
#E5EDFF
200
#CDDBFE
300
#B4C6FC
400
#8DA2FB
500
#6875F5
600
#5850EC
700
#5145CD
800
#42389D
900
#362F78
Purple
colors.violet
50
#F6F5FF
100
#EDEBFE
200
#DCD7FE
300
#CABFFD
400
#AC94FA
500
#9061F9
600
#7E3AF2
700
#6C2BD9
800
#5521B5
900
#4A1D96
Pink
colors.pink
50
#FDF2F8
100
#FCE8F3
200
#FAD1E8
300
#F8B4D9
400
#F17EB8
500
#E74694
600
#D61F69
700
#BF125D
800
#99154B
900
#751A3D

Customize colors #

If you’d like to customize and use your own colors instead of the default ones you can do so by changing the color object from the tailwind.config.js file.

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      // Configure your color palette here
    }
  }
}

You can read more about customizing colors on Tailwind CSS.