Color Pallet Comes with 60 unique color pallets, that uses one prime to generate all pallets
Impressionistic colors
Color psychology Strong pigments from beneath the Earth
Color, rather than shape, is more closely related to emotion. Each color has a strong blend and was selectively hand picked to make your design shine. Each component from SmartAdmin can have any of these colors applied. Try on different combinations to make your project come alive!
SmartAdmin focuses on conveying the attention of your users to the important parts of the page and the actions. While keeping a light feel, the colors give the page an extra push.
| State | Postfix | Example usage | |
|---|---|---|---|
| Success | *-success |
btn-success color-success |
|
| Warning | *-warning |
btn-warning color-warning |
|
| Danger | *-danger |
btn-danger color-danger |
|
| Info | *-info |
btn-info color-info |
|
| Primary | *-primary |
btn-primary color-primary bg-primary |
|
| Secondary | *-secondary |
btn-secondary color-secondary bg-secondary |
|
Success pallet
Success color pallet will be used for positive feedback and user assurance. We have selected teal with a hint of green to stand out and cast the shadow of quality, healing, freshness and peace
| Text Color | Background | Postfix | Example usage |
|---|---|---|---|
| color-success-50 | *-success-50 |
bg-success-50 color-success-50 |
|
| color-success-100 | *-success-100 |
bg-success-100 color-success-100 |
|
| color-success-200 | *-success-200 |
bg-success-200 color-success-200 |
|
| color-success-300 | *-success-300 |
bg-success-300 color-success-300 |
|
| color-success-400 | *-success-400 |
bg-success-400 color-success-400 |
|
| color-success-500 | *-success-500 |
bg-success-500 color-success-500 |
|
| color-success-600 | *-success-600 |
bg-success-600 color-success-600 |
|
| color-success-700 | *-success-700 |
bg-success-700 color-success-700 |
|
| color-success-800 | *-success-800 |
bg-success-800 color-success-800 |
|
| color-success-900 | *-success-900 |
bg-success-900color-success-900 |
Warning pallet
Warning color pallet lets users know to be catious and careful. It can envoke the feeling of curiosity, confidence, sociability, and bravery
| Text Color | Background | Postfix | Example usage |
|---|---|---|---|
| color-warning-50 | *-warning-50 |
bg-warning-50 color-warning-50 |
|
| color-warning-100 | *-warning-100 |
bg-warning-100 color-warning-100 |
|
| color-warning-200 | *-warning-200 |
bg-warning-200 color-warning-200 |
|
| color-warning-300 | *-warning-300 |
bg-warning-300 color-warning-300 |
|
| color-warning-400 | *-warning-400 |
bg-warning-400 color-warning-400 |
|
| color-warning-500 | *-warning-500 |
bg-warning-500 color-warning-500 |
|
| color-warning-600 | *-warning-600 |
bg-warning-600 color-warning-600 |
|
| color-warning-700 | *-warning-700 |
bg-warning-700 color-warning-700 |
|
| color-warning-800 | *-warning-800 |
bg-warning-800 color-warning-800 |
|
| color-warning-900 | *-warning-900 |
bg-warning-900color-warning-900 |
Danger pallet
This color as an attention getter. Use this color as less as possible to have maximum impact. This color is connected to ecitement, love, strength, and energy
| Text Color | Background | Postfix | Example usage |
|---|---|---|---|
| color-danger-50 | *-danger-50 |
bg-danger-50 color-danger-50 |
|
| color-danger-100 | *-danger-100 |
bg-danger-100 color-danger-100 |
|
| color-danger-200 | *-danger-200 |
bg-danger-200 color-danger-200 |
|
| color-danger-300 | *-danger-300 |
bg-danger-300 color-danger-300 |
|
| color-danger-400 | *-danger-400 |
bg-danger-400 color-danger-400 |
|
| color-danger-500 | *-danger-500 |
bg-danger-500 color-danger-500 |
|
| color-danger-600 | *-danger-600 |
bg-danger-600 color-danger-600 |
|
| color-danger-700 | *-danger-700 |
bg-danger-700 color-danger-700 |
|
| color-danger-800 | *-danger-800 |
bg-danger-800 color-danger-800 |
|
| color-danger-900 | *-danger-900 |
bg-danger-900color-danger-900 |
Info pallet
This particular pallet helps you build trust, it has the ability to project competence, peace, loyalty and strength to your users
| Text Color | Background | Postfix | Example usage |
|---|---|---|---|
| color-info-50 | *-info-50 |
bg-info-50 color-info-50 |
|
| color-info-100 | *-info-100 |
bg-info-100 color-info-100 |
|
| color-info-200 | *-info-200 |
bg-info-200 color-info-200 |
|
| color-info-300 | *-info-300 |
bg-info-300 color-info-300 |
|
| color-info-400 | *-info-400 |
bg-info-400 color-info-400 |
|
| color-info-500 | *-info-500 |
bg-info-500 color-info-500 |
|
| color-info-600 | *-info-600 |
bg-info-600 color-info-600 |
|
| color-info-700 | *-info-700 |
bg-info-700 color-info-700 |
|
| color-info-800 | *-info-800 |
bg-info-800 color-info-800 |
|
| color-info-900 | *-info-900 |
bg-info-900color-info-900 |
Primary pallet
This is the primary color of the app, and is widely used in almost all of the elements. The color shows ambition, sprituality, royalty and luxury
| Text Color | Background | Postfix | Example usage |
|---|---|---|---|
| color-primary-50 | *-primary-50 |
bg-primary-50 color-primary-50 |
|
| color-primary-100 | *-primary-100 |
bg-primary-100 color-primary-100 |
|
| color-primary-200 | *-primary-200 |
bg-primary-200 color-primary-200 |
|
| color-primary-300 | *-primary-300 |
bg-primary-300 color-primary-300 |
|
| color-primary-400 | *-primary-400 |
bg-primary-400 color-primary-400 |
|
| color-primary-500 | *-primary-500 |
bg-primary-500 color-primary-500 |
|
| color-primary-600 | *-primary-600 |
bg-primary-600 color-primary-600 |
|
| color-primary-700 | *-primary-700 |
bg-primary-700 color-primary-700 |
|
| color-primary-800 | *-primary-800 |
bg-primary-800 color-primary-800 |
|
| color-primary-900 | *-primary-900 |
bg-primary-900color-primary-900 |
Fusion pallet
Fusion is a alternation of primary pallet. It is dramatic and bold. It has class and a sense of formality combined with security.
| Text Color | Background | Postfix | Example usage |
|---|---|---|---|
| color-fusion-50 | *-fusion-50 |
bg-fusion-50 color-fusion-50 |
|
| color-fusion-100 | *-fusion-100 |
bg-fusion-100 color-fusion-100 |
|
| color-fusion-200 | *-fusion-200 |
bg-fusion-200 color-fusion-200 |
|
| color-fusion-300 | *-fusion-300 |
bg-fusion-300 color-fusion-300 |
|
| color-fusion-400 | *-fusion-400 |
bg-fusion-400 color-fusion-400 |
|
| color-fusion-500 | *-fusion-500 |
bg-fusion-500 color-fusion-500 |
|
| color-fusion-600 | *-fusion-600 |
bg-fusion-600 color-fusion-600 |
|
| color-fusion-700 | *-fusion-700 |
bg-fusion-700 color-fusion-700 |
|
| color-fusion-800 | *-fusion-800 |
bg-fusion-800 color-fusion-800 |
|
| color-fusion-900 | *-fusion-900 |
bg-fusion-900color-fusion-900 |