# Color utilities

#### Background colors

##### Solid colors

`.bg-*` can apply to any element, where `*` is a color name.

.bg-primary .bg-secondary .bg-success .bg-info .bg-warning .bg-danger .bg-purple .bg-pink .bg-cyan .bg-yellow .bg-brown .bg-dark .bg-aqua .bg-light-blue .bg-blue .bg-green

##### Pale colors

`.bg-pale-*` can apply to any element, where `*` is a color name.

.bg-pale-primary .bg-pale-secondary .bg-pale-success .bg-pale-info .bg-pale-warning .bg-pale-danger .bg-pale-purple .bg-pale-pink .bg-pale-cyan .bg-pale-yellow .bg-pale-brown .bg-pale-dark

##### Other colors

Some other fade colors are available for background-color.

.bg-white .bg-transparent .bg-light .bg-lighter .bg-lightest

#### Border colors

`.border-*` can apply to any element, where `*` is a color name.

Default color .border-primary .border-secondary .border-success .border-info .border-warning .border-danger .border-purple .border-pink .border-cyan .border-yellow .border-brown .border-dark .border-white .border-light .border-transparent

#### Text colors

`.text-*` can apply to any element, where `*` is a color name. Please note that you can safely add these classes to an `<a>` element.

.text-primary .text-secondary .text-success .text-info .text-warning .text-danger .text-purple .text-pink .text-cyan .text-yellow .text-brown .text-dark .text-mute .text-light .text-lighter .text-fade .text-white

##### Hover colors

`.hover-*` can apply to any element, where `*` is a color name. Please note that you can safely add these classes to an `<a>` element.

.text-primary .text-secondary .text-success .text-info .text-warning .text-danger .text-purple .text-pink .text-cyan .text-yellow .text-brown .text-dark .text-mute .text-light .text-lighter .text-fade .text-white