Color System
Bootstap color system
- 300 #64B5F6
- 400 #42A5F5
- 500 #2196F3
- 600 #1E88E5
- 700 #1976D2
- 800 #1565C0
Primary palette
bg-primary-*
- 300 #E57373
- 400 #EF5350
- 500 #F44336
- 600 #E53935
- 700 #D32F2F
- 800 #C62828
Danger palette
bg-danger-*
- 300 #81C784
- 400 #66BB6A
- 500 #4CAF50
- 600 #43A047
- 700 #388E3C
- 800 #2E7D32
Success palette
bg-success-*
- 300 #FF8A65
- 400 #FF7043
- 500 #FF5722
- 600 #F4511E
- 700 #E64A19
- 800 #D84315
Warning palette
bg-warning-*
- 300 #4DD0E1
- 400 #26C6DA
- 500 #00BCD4
- 600 #00ACC1
- 700 #0097A7
- 800 #00838F
Info palette
bg-info-*
Google color system
- 300 #F06292
- 400 #EC407A
- 500 #E91E63
- 600 #D81B60
- 700 #C2185B
- 800 #AD1457
Pink palette
bg-pink-*
- 300 #BA68C8
- 400 #AB47BC
- 500 #9C27B0
- 600 #8E24AA
- 700 #7B1FA2
- 800 #6A1B9A
Purple palette
bg-purple-*
- 300 #7986CB
- 400 #5C6BC0
- 500 #3F51B5
- 600 #3949AB
- 700 #303F9F
- 800 #283593
Indigo palette
bg-indigo-*
- 300 #4FC3F7
- 400 #29B6F6
- 500 #03A9F4
- 600 #039BE5
- 700 #0288D1
- 800 #0277BD
Blue palette
bg-blue-*
- 300 #4DB6AC
- 400 #26A69A
- 500 #009688
- 600 #00897B
- 700 #00796B
- 800 #00695C
Teal palette
bg-teal-*
- 300 #DCE775
- 400 #D4E157
- 500 #CDDC39
- 600 #C0CA33
- 700 #AFB42B
- 800 #9E9D24
Lime palette
bg-lime-*
- 300 #FFD54F
- 400 #FFCA28
- 500 #FFC107
- 600 #FFB300
- 700 #FFA000
- 800 #FF8F00
Amber palette
bg-amber-*
- 300 #A1887F
- 400 #8D6E63
- 500 #795548
- 600 #6D4C41
- 700 #5D4037
- 800 #4E342E
Brown palette
bg-brown-*
- 300 #999999
- 400 #888888
- 500 #777777
- 600 #666666
- 700 #555555
- 800 #444444
Grey palette
bg-grey-*
- 300 #90A4AE
- 400 #78909C
- 500 #607D8B
- 600 #546E7A
- 700 #455A64
- 800 #37474F
Slate palette
bg-slate-*
Color system usage
| Class | Prefixes | Description |
|---|---|---|
| Background | ||
.bg-* |
*-300, *-400, *-600, *-700, *-800 | Background color. Can be added to dropdown menus, sidebar, navbar, alerts, inputs, panel panel-colors, selects etc. |
| Borders | ||
.border-* |
*-300, *-400, *-600, *-700, *-800 | 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-* |
*-300, *-400, *-600, *-700, *-800 | 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 |