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 |