Utilities › Color
Ui Colors
Change the color with contrasting text and/or background color.
| Color | HEX Code | Preview |
|---|---|---|
| primary | #03A9F4 | |
| secondary | #03A9F4 | |
| info | #03A9F4 | |
| success | #03A9F4 | |
| danger | #03A9F4 | |
| warning | #03A9F4 | |
| red | #03A9F4 | |
| green | #03A9F4 | |
| blue | #03A9F4 | |
| dark | #03A9F4 | |
| light | #03A9F4 | |
| black | #03A9F4 | |
| white | #03A9F4 | |
| pink | #03A9F4 | |
| purple | #03A9F4 | |
| indigo | #03A9F4 | |
| cyan | #03A9F4 | |
| teal | #03A9F4 | |
| lime | #03A9F4 | |
| yellow | #03A9F4 | |
| amber | #03A9F4 | |
| orange | #03A9F4 | |
| lightblue | #03A9F4 | |
| lightgreen | #03A9F4 | |
| deeppurple | #03A9F4 | |
| deeporange | #03A9F4 | |
| brown | #03A9F4 | |
| grey | #03A9F4 |
# Text color
Use the power of our .text-* utilities on your elements class.
Primary color [class="text-primary"]
Secondary color [class="text-secondary"]
Success color [class="text-success"]
Danger color [class="text-danger"]
Warning color [class="text-warning"]
Info color [class="text-info"]
Light color [class="text-light"]
Dark color [class="text-dark"]
# Background color
Use the power of our .bg-* utilities on your elements class.
Primary color [class="text-primary"]
Secondary color [class="text-secondary"]
Success color [class="text-success"]
Danger color [class="text-danger"]
Warning color [class="text-warning"]
Info color [class="text-info"]
Light color [class="text-light"]
Dark color [class="text-dark"]
# Other colors
Instead of color and background helpers combine the power of our .text-* utilities and .bg-* utilities class, we have utilities like : .border-*, .outline-*, and many more with shade colors level from {utility}-{color}-100 to {utility}-{color}-900.