# Text Color

Use the text color utility to change the default text color of an element.

**Format**: `.ds-u-color--[COLOR NAME]-[SHADE]`

## Text on `background` background

## Text on `background-inverse` background

## Text on `gray-lightest` background

## Text on `secondary-lightest` background

## Text on `success-lightest` background

## Text on `warn-lightest` background

## Text on `error-lightest` background

## Inherit a color

Use the `.ds-u-color--inherit` utility class to inherit the color of the parent element.

<EmbeddedExample>
  <div class="ds-u-color--error">
    This is an example of 
    <a href="#" class="ds-u-color--inherit">
      a link
    </a>
    with the class `ds-u-color--error` error styling.
  </div>
</EmbeddedExample>