> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Text Colors

> Text utilities for structural grays plus six semantic tokens—primary, secondary, neutral, success, warning, error—with optional l-5…d-5 ramps.

export const TextColorsDemo = () => {
  const swatches = [{
    cls: "text-black",
    hex: "#000000"
  }, {
    cls: "text-white",
    hex: "#ffffff",
    needsBg: true
  }, {
    cls: "text-gray",
    hex: "#6b7280"
  }, {
    cls: "text-primary",
    hex: "#0740f9"
  }, {
    cls: "text-secondary",
    hex: "#aaebfd",
    needsBg: true
  }, {
    cls: "text-neutral",
    hex: "#6b7280"
  }, {
    cls: "text-success",
    hex: "#3DC13C"
  }, {
    cls: "text-warning",
    hex: "#F4BB1B",
    needsBg: true
  }, {
    cls: "text-error",
    hex: "#F13737"
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="space-y-3">
          {swatches.map(s => <div key={s.cls} className="flex items-center gap-4 rounded-lg p-3" style={{
    background: s.needsBg ? "rgba(15, 23, 42, 0.88)" : "var(--demo-panel)"
  }}>
              <div style={{
    width: "2rem",
    height: "2rem",
    borderRadius: "0.375rem",
    backgroundColor: s.hex,
    border: s.needsBg ? "1px solid rgba(255,255,255,0.18)" : "none",
    flexShrink: 0
  }} />
              <p style={{
    color: s.hex,
    fontSize: "1rem",
    fontWeight: 600,
    flex: 1
  }}>The quick brown fox</p>
              <code style={{
    fontSize: "0.75rem",
    color: s.needsBg ? "rgba(255,255,255,0.72)" : "var(--demo-fg-subtle)",
    fontFamily: "monospace"
  }}>.{s.cls}</code>
              <span style={{
    fontSize: "0.7rem",
    color: s.needsBg ? "rgba(255,255,255,0.52)" : "var(--demo-fg-faint)",
    fontFamily: "monospace"
  }}>{s.hex}</span>
            </div>)}
        </div>
      </div>
    </div>;
};

## Overview

Use text color utilities for hierarchy, links, and status without leaving the shared palette.

| Class              | Hex       |
| ------------------ | --------- |
| `.text-white`      | `#ffffff` |
| `.text-black`      | `#000000` |
| `.text-gray-dark`  | `#374151` |
| `.text-gray`       | `#6b7280` |
| `.text-gray-light` | `#9ca3af` |
| `.text-primary`    | `#0740f9` |
| `.text-secondary`  | `#aaebfd` |
| `.text-neutral`    | `#6b7280` |
| `.text-success`    | `#3DC13C` |
| `.text-warning`    | `#F4BB1B` |
| `.text-error`      | `#F13737` |

Semantic tokens also support `.text-{token}-l-5` through `.text-{token}-d-5`; use the same shade steps shown in the [Color Palette](/concepts/colors#color-palette).

## Examples

<TextColorsDemo />

```html theme={null}
<h1 class="text-3xl font-bold text-black">Heading</h1>
<h2 class="text-2xl font-semibold text-gray-dark">Section</h2>
<p class="text-base text-gray">Body copy</p>
<p class="text-base text-neutral">Neutral line</p>
<a class="text-primary underline" href="#">Link</a>
<div class="elementor-element text-success">Success</div>
<div class="elementor-element text-error">Error</div>
<div class="elementor-element text-warning">Warning</div>
```

## Usage Notes

Classes set `color`. **Structural** utilities are fixed grays for hierarchy; **semantic** utilities use the six tokens from [Colors](/concepts/colors) (`primary`, `secondary`, `neutral`, `success`, `warning`, `error`). For shades off the base, append `-l-5`…`-l-1` or `-d-1`…`-d-5` (see the [palette](/concepts/colors#color-palette)). `text-gray*` is for typography tiers; `text-neutral` follows the neutral ramp like `border-neutral` / `background-neutral`.

## Best practices

* Use **primary** for links and brand emphasis; use **success** / **error** / **warning** for status.
* Check contrast on colored backgrounds; see [Colors — Accessibility](/concepts/colors#accessibility).

## Related utilities

<CardGroup cols={2}>
  <Card title="Typography" icon="text-size" href="/concepts/typography">
    Font size, weight, and layout
  </Card>

  <Card title="Background Colors" icon="image" href="/colors/background-colors">
    Background colors
  </Card>
</CardGroup>