# Text color

> Utilities for controlling the text color of an element.

Source: https://www.zenplates.co/documentation/utilities/text-color (Utilities › Typography)

| Class            | Properties                |
| ---------------- | ------------------------- |
| `.text-inherit`  | `color: inherit;`         |
| `.text-primary`  | `color: $color_primary;`  |
| `.text-base`     | `color: $color_text;`     |
| `.text-black`    | `color: $color-black;`    |
| `.text-white`    | `color: $color-white;`    |
| `.text-gray-100` | `color: $color-gray-100;` |
| `.text-gray-200` | `color: $color-gray-200;` |
| `.text-gray-300` | `color: $color-gray-300;` |
| `.text-gray-400` | `color: $color-gray-400;` |
| `.text-gray-500` | `color: $color-gray-500;` |
| `.text-gray-600` | `color: $color-gray-600;` |
| `.text-gray-700` | `color: $color-gray-700;` |
| `.text-gray-800` | `color: $color-gray-800;` |
| `.text-gray-900` | `color: $color-gray-900;` |

## Usage

Control the text color of an element using the `.text-{color}` utilities.

Color utilities are generated for all colors defined in the theme's Sass `$colors` variable.  By default this includes all colors except for the Heading, Text, Link and Outline theme colors.

Use `.text-inherit` to have the text color of an element inherited from its parent.

### Theme colors

Use `.text-primary` and `.text-base` to set the text color of an element to the Primary or Text colors defined in the theme settings.

```html
<p class="text-primary">The quick brown fox jumped over the lazy dog.</p>
<p class="text-base">The quick brown fox jumped over the lazy dog.</p>
```

### Color palettes

Use `.text-gray-{shade}` to set the text color to a shade of gray and `.text-white`, `.text-black` to set the text color to white and black, respectively.

```html
<p class="text-gray-100">The quick brown fox jumped over the lazy dog.</p>
<p class="text-gray-200">The quick brown fox jumped over the lazy dog.</p>
<p class="text-gray-300">The quick brown fox jumped over the lazy dog.</p>
<p class="text-gray-400">The quick brown fox jumped over the lazy dog.</p>
<p class="text-gray-500">The quick brown fox jumped over the lazy dog.</p>
<p class="text-gray-600">The quick brown fox jumped over the lazy dog.</p>
<p class="text-gray-700">The quick brown fox jumped over the lazy dog.</p>
<p class="text-gray-800">The quick brown fox jumped over the lazy dog.</p>
<p class="text-gray-900">The quick brown fox jumped over the lazy dog.</p>
<p class="text-red-500">The quick brown fox jumped over the lazy dog.</p>
<p class="text-green-500">The quick brown fox jumped over the lazy dog.</p>
```

Additional color utilities are generated for all colors defined in Sass through the `$colors` variable.

## Variants

By default, responsive and hover-state variants are generated for text color utilities.

### Responsive

To control the text color of an element at a specific breakpoint, add a `{screen}:` prefix to any existing text color utility.

For example, use `.md:text-gray-600` to apply the `text-gray-600` utility at only medium screen sizes and above.

### Hover-state

To control the text color of an element on hover, add the `hover:` prefix to any existing text color utility.

For example, use `hover:text-gray-600` to apply the `text-gray-600` utility when the mouse is hovered over the element.