---
layout: docs
title: Colors
description: Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
group: utilities
toc: true
---
{{< callout info >}}
##### Dealing with specificity
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `
` with the class.
{{< /callout >}}
{{< callout info >}}
{{< partial "callout-warning-color-assistive-technologies.md" >}}
{{< /callout >}}
## Color
Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states.
{{< example >}}
{{< colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
.text-{{ .name }}
{{- end -}}
{{< /colors.inline >}}
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
{{< /example >}}
## Background color
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities.
{{< example >}}
{{< colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
.bg-{{ .name }}
{{- end -}}
{{< /colors.inline >}}
.bg-white
.bg-transparent
{{< /example >}}
## Background gradient
By adding a `.bg-gradient` class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.
Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-gradient);`.
{{< markdown >}}
{{< colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
.bg-{{ .name }}.bg-gradient
{{- end -}}
{{< /colors.inline >}}
{{< /markdown >}}