## Color

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Color on Bootstrap

#### Colors

    <p class="text-primary">text-primary</p>
    <p class="text-secondary">text-secondary</p>
    <p class="text-success">text-success</p>
    <p class="text-info">text-info</p>
    <p class="text-warning">text-warning</p>
    <p class="text-danger">text-danger</p>
    <p class="text-body">text-body</p>
    <p class="text-body-highlight">text-body-highlight</p>
    <p class="text-body-secondary">text-body-secondary</p>
    <p class="text-body-tertiary">text-body-tertiary</p>
    <p class="text-body-quaternary">text-body-quaternary</p>
    <p class="text-body-emphasis">text-body-emphasis</p><span class="pe-3 text-primary-subtle  bg-dark dark__bg-gray-400 ">text-primary-subtle</span><br /><span class="pe-3 text-primary-light  ">text-primary-light</span><br /><span class="pe-3 text-primary-lighter  ">text-primary-lighter</span><br /><span class="pe-3 text-primary-dark  ">text-primary-dark</span><br /><span class="pe-3 text-primary-darker  ">text-primary-darker</span><br /><span class="pe-3 text-primary-emphasis  ">text-primary-emphasis</span><br /><span class="pe-3 text-secondary-subtle  bg-dark dark__bg-gray-400 ">text-secondary-subtle</span><br /><span class="pe-3 text-secondary-light  ">text-secondary-light</span><br /><span class="pe-3 text-secondary-lighter  ">text-secondary-lighter</span><br /><span class="pe-3 text-secondary-dark   bg-white">text-secondary-dark</span><br /><span class="pe-3 text-secondary-darker  ">text-secondary-darker</span><br /><span class="pe-3 text-secondary-emphasis  ">text-secondary-emphasis</span><br /><span class="pe-3 text-success-subtle  bg-dark dark__bg-gray-400 ">text-success-subtle</span><br /><span class="pe-3 text-success-light  ">text-success-light</span><br /><span class="pe-3 text-success-lighter  ">text-success-lighter</span><br /><span class="pe-3 text-success-dark  ">text-success-dark</span><br /><span class="pe-3 text-success-darker  ">text-success-darker</span><br /><span class="pe-3 text-success-emphasis  ">text-success-emphasis</span><br /><span class="pe-3 text-info-subtle  bg-dark dark__bg-gray-400 ">text-info-subtle</span><br /><span class="pe-3 text-info-light  ">text-info-light</span><br /><span class="pe-3 text-info-lighter  ">text-info-lighter</span><br /><span class="pe-3 text-info-dark  ">text-info-dark</span><br /><span class="pe-3 text-info-darker  ">text-info-darker</span><br /><span class="pe-3 text-info-emphasis  ">text-info-emphasis</span><br /><span class="pe-3 text-warning-subtle  bg-dark dark__bg-gray-400 ">text-warning-subtle</span><br /><span class="pe-3 text-warning-light  ">text-warning-light</span><br /><span class="pe-3 text-warning-lighter  ">text-warning-lighter</span><br /><span class="pe-3 text-warning-dark  ">text-warning-dark</span><br /><span class="pe-3 text-warning-darker  ">text-warning-darker</span><br /><span class="pe-3 text-warning-emphasis  ">text-warning-emphasis</span><br /><span class="pe-3 text-danger-subtle  bg-dark dark__bg-gray-400 ">text-danger-subtle</span><br /><span class="pe-3 text-danger-light  ">text-danger-light</span><br /><span class="pe-3 text-danger-lighter  ">text-danger-lighter</span><br /><span class="pe-3 text-danger-dark  ">text-danger-dark</span><br /><span class="pe-3 text-danger-darker  ">text-danger-darker</span><br /><span class="pe-3 text-danger-emphasis  ">text-danger-emphasis</span><br />

text-primary

text-secondary

text-success

text-info

text-warning

text-danger

text-body

text-body-highlight

text-body-secondary

text-body-tertiary

text-body-quaternary

text-body-emphasis

text-primary-subtle
text-primary-light
text-primary-lighter
text-primary-dark
text-primary-darker
text-primary-emphasis
text-secondary-subtle
text-secondary-light
text-secondary-lighter
text-secondary-dark
text-secondary-darker
text-secondary-emphasis
text-success-subtle
text-success-light
text-success-lighter
text-success-dark
text-success-darker
text-success-emphasis
text-info-subtle
text-info-light
text-info-lighter
text-info-dark
text-info-darker
text-info-emphasis
text-warning-subtle
text-warning-light
text-warning-lighter
text-warning-dark
text-warning-darker
text-warning-emphasis
text-danger-subtle
text-danger-light
text-danger-lighter
text-danger-dark
text-danger-darker
text-danger-emphasis

### Opacity

Color opacity allows for real-time color changes without compilation and dynamic alpha transparency changes.

### How it works

Consider our default `.text-primary` utility.

    .text-primary {
    --phoenix-text-opacity: 1;
    color: rgba(var(--phoenix-primary-rgb), var(--phoenix-text-opacity)) !important;
    }

#### Example

     <div class="text-primary mb-1">This is default primary text</div>
     <div class="text-primary mb-1" style="--bs-text-opacity: .5;">This is 50% opacity primary text using inline css</div>
     <div class="text-primary text-opacity-75 mb-1">This is 75% opacity primary text using utility class</div>
     <div class="text-primary text-opacity-50 mb-1">This is 50% opacity primary text using utility class</div>
     <div class="text-primary text-opacity-25 mb-1">This is 25% opacity primary text using utility class</div>

This is default primary text
This is 50% opacity primary text using inline css
This is 75% opacity primary text using utility class
This is 50% opacity primary text using utility class
This is 25% opacity primary text using utility class

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize