1. SmartAdmin
  2. Utilities
  3. Color Pallet

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