Color system
Bootstap color system
  • lighter #64B5F6
  • light #42A5F5
  • normal #2196F3
  • dark #1E88E5
  • darker #1976D2
  • darkest #1565C0
Primary palette
bg-primary-*
  • lighter #E57373
  • light #EF5350
  • normal #F44336
  • dark #E53935
  • darker #D32F2F
  • darkest #C62828
Danger palette
bg-danger-*
  • lighter #81C784
  • light #66BB6A
  • normal #4CAF50
  • dark #43A047
  • darker #388E3C
  • darkest #2E7D32
Success palette
bg-success-*
  • lighter #FF8A65
  • light #FF7043
  • normal #FF5722
  • dark #F4511E
  • darker #E64A19
  • darkest #D84315
Warning palette
bg-warning-*
  • lighter #4DD0E1
  • light #26C6DA
  • normal #00BCD4
  • dark #00ACC1
  • darker #0097A7
  • darkest #00838F
Info palette
bg-info-*
Google color system
  • lighter #F06292
  • light #EC407A
  • normal #E91E63
  • dark #D81B60
  • darker #C2185B
  • darkest #AD1457
Pink palette
bg-pink-*
  • lighter #BA68C8
  • light #AB47BC
  • normal #9C27B0
  • dark #8E24AA
  • darker #7B1FA2
  • darkest #6A1B9A
Purple palette
bg-purple-*
  • lighter #7986CB
  • light #5C6BC0
  • normal #3F51B5
  • dark #3949AB
  • darker #303F9F
  • darkest #283593
Indigo palette
bg-indigo-*
  • lighter #4FC3F7
  • light #29B6F6
  • normal #03A9F4
  • dark #039BE5
  • darker #0288D1
  • darkest #0277BD
Blue palette
bg-blue-*
  • lighter #4DB6AC
  • light #26A69A
  • normal #009688
  • dark #00897B
  • darker #00796B
  • darkest #00695C
Teal palette
bg-teal-*
  • lighter #DCE775
  • light #D4E157
  • normal #CDDC39
  • dark #C0CA33
  • darker #AFB42B
  • darkest #9E9D24
Lime palette
bg-lime-*
  • lighter #FFD54F
  • light #FFCA28
  • normal #FFC107
  • dark #FFB300
  • darker #FFA000
  • darkest #FF8F00
Amber palette
bg-amber-*
  • lighter #A1887F
  • light #8D6E63
  • normal #795548
  • dark #6D4C41
  • darker #5D4037
  • darkest #4E342E
Brown palette
bg-brown-*
  • lighter #999999
  • light #888888
  • normal #777777
  • dark #666666
  • darker #555555
  • darkest #444444
Grey palette
bg-grey-*
  • lighter #90A4AE
  • light #78909C
  • normal #607D8B
  • dark #546E7A
  • darker #455A64
  • darkest #37474F
Slate palette
bg-slate-*
  • lighter #EEEEEE
  • light #DDDDDD
  • normal #CCCCCC
  • dark #BBBBBB
  • darker #AAAAAA
  • darkest #999999
light palette
bg-light-*
Color system usage
Class Prefixes Description
Background
.bg-* *-lighter, *-light, *-dark, *-darker, *-darkest Background color. Can be added to dropdown menus, sidebar, navbar, alerts, inputs, panel panel-colors, selects etc.
Borders
.border-* *-lighter, *-light, *-dark, *-darker, *-darkest 4 sides border color. Any element that contains border
.border-top-* Top border only. Any element that contains all sides border or top border only
.border-bottom-* Bottom border only. Any element that contains all sides border or bottom border only
.border-left-* Left border only. Any element that contains all sides border or left border only
.border-right-* Right border only. Any element that contains all sides border or right border only
Text
.text-* *-lighter, *-light, *-dark, *-darker, *-darkest Text color. Can be used in text, icons and links
Alpha
.alpha-* none Light background or text color. Useful when you need to use lighter color variations, in alerts for example