Color utilities

Utility classes which can be used to set the color of elements.

Color #

You can set the color using .text-{color}. If you want to colorize links, you can use the colored links which have :hover and :focus states. You can see the full list of color utility classes in the table below:

`.text-primary`	Aa	`.text-primary-emphasis`	Aa
`.text-secondary`	Aa	`.text-secondary-emphasis`	Aa
`.text-success`	Aa	`.text-success-emphasis`	Aa
`.text-danger`	Aa	`.text-danger-emphasis`	Aa
`.text-warning`	Aa	`.text-warning-emphasis`	Aa
`.text-info`	Aa	`.text-info-emphasis`	Aa
`.text-light`	Aa	`.text-light-emphasis`	Aa
`.text-dark`	Aa	`.text-dark-emphasis`	Aa
`.text-body`	Aa	`.text-body-emphasis`	Aa
`.text-body-secondary`	Aa	`.text-body-tertiary`	Aa
`.text-black`	Aa	`.text-white`	Aa

Accessibility

Heads up! By default, Halfmoon uses grayscale antialiasing. Therefore, you may want to use .subpixel-antialiased (from font smoothing utilities) when using the above classes for maximized readability.

Opacity #

Consider the default CSS for the .text-primary utility:

CSS

.text-primary {
  --bs-text-opacity: 1;
  color: hsla(var(--bs-primary-hsl), var(--bs-text-opacity)) !important;
}

We use an HSL version of our --bs-primary CSS variable and attached a second CSS variable, --bs-text-opacity, for the alpha transparency (with a default value of 1 thanks to a local CSS variable). That means anytime you use .text-primary now, your computed color value is hsla(var(--bs-primary-hsl), 1). The local CSS variable inside each .text-* class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.

Opacity Example #

You can modify the text opacity using the .text-opacity-{value} utilities, where the {value} can be a percentage of 75, 50, or 25.

Aa Aa Aa Aa

HTML

<!-- Modifying text opacities with utilities -->
<span class="text-primary subpixel-antialiased">Aa</span>
<span class="text-primary text-opacity-75 subpixel-antialiased">Aa</span>
<span class="text-primary text-opacity-50 subpixel-antialiased">Aa</span>
<span class="text-primary text-opacity-25 subpixel-antialiased">Aa</span>

You can also override --bs-text-opacity via custom styles or inline styles.

Aa Aa Aa

HTML

<!-- Modifying text opacities with CSS variables -->
<span class="text-primary subpixel-antialiased">Aa</span>
<span class="text-primary subpixel-antialiased" style="--bs-text-opacity: 60%;">Aa</span>
<span class="text-primary subpixel-antialiased" style="--bs-text-opacity: 30%;">Aa</span>

Up next

Display utilities

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.