Colors
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Primary Colors
Our primary palette is comprised of neutrals, white, and blue. These colors are present across most touch points from marketing to product.
Name
Primary
Hex
#cb0c9f
Name
Secondary
Hex
#8392ab
Name
Info
Hex
#17c1e8
Name
Success
Hex
#82d616
Name
Warning
Hex
#fbcf33
Name
Error
Hex
#ea0606
Name
Light
Hex
#e9ecef
Name
Dark
Hex
#344767
Gradient Colors
Our gradient palette is a mixed of two colors for creating beautiful gradient colors.
Name
Primary
Hex
#7928ca | #ff0080
Name
Secondary
Hex
#627594 | #a8b8d8
Name
Info
Hex
#2152ff | #21d4fd
Name
Success
Hex
#17ad37 | #98ec2d
Name
Warning
Hex
#f53939 | #fbcf33
Name
Error
Hex
#ea0606 | #ff667c
Name
Light
Hex
#ced4da | #ebeff4
Name
Dark
Hex
#141727 | #3a416f
Light Neutrals
Light neutrals are helpful for offsetting content in a primarily white layout without losing warmth and cleanliness, and are therefore often used as a background color for web components.
| 100 | Hex #f8f9fa |
| 200 | Hex #e9ecef |
| 300 | Hex #dee2e6 |
| 400 | Hex #ced4da |
| 500 | Hex #adb5bd |
| 600 | Hex #6c757d |
| 700 | Hex #495057 |
| 800 | Hex #343a40 |
| 900 | Hex #212529 |
Soft UI Dashboard React contains different sets of colors and you can customize them using the following file: src/asssets/theme/base/colors.js