---
id: slds.guidance.utilities.color
title: Color Utilities
description: SLDS color utility classes for text, background, border, and fill properties
summary: "Utilities for applying neutral gray colors. Includes text, background, border, and fill classes across a 12-step neutral palette."

artifact_type: reference
domain: utilities
topic: color

content_format: structured
complexity: intermediate
audience: [implementer]

tasks: [implement]

refs:
  - slds.guidance.utilities
  - slds.guidance.overview.utilities
  - slds.guidance.hooks.color

tags: [utilities, color, neutral-palette, accessibility]
keywords: [slds-color, text-gray, background-gray, border-gray, fill-gray]
---

# Color - Neutral Palette

Utilities for applying neutral gray colors to text, backgrounds, borders, and SVG fills.

## Core Classes

### Text Colors

| Class | Purpose | Token Value |
|-------|---------|-------------|
| `slds-color__text_gray-1` | Apply lightest gray text color | `--slds-g-color-neutral-base-100` |
| `slds-color__text_gray-2` | Apply gray-2 text color | `--slds-g-color-neutral-base-95` |
| `slds-color__text_gray-3` | Apply gray-3 text color | `--slds-g-color-neutral-base-95` |
| `slds-color__text_gray-4` | Apply gray-4 text color | `--slds-g-color-neutral-base-90` |
| `slds-color__text_gray-5` | Apply gray-5 text color | `--slds-g-color-neutral-base-90` |
| `slds-color__text_gray-6` | Apply gray-6 text color | `--slds-g-color-neutral-base-80` |
| `slds-color__text_gray-7` | Apply gray-7 text color | `--slds-g-color-neutral-base-70` |
| `slds-color__text_gray-8` | Apply gray-8 text color | `--slds-g-color-neutral-base-60` |
| `slds-color__text_gray-9` | Apply gray-9 text color | `--slds-g-color-neutral-base-50` |
| `slds-color__text_gray-10` | Apply gray-10 text color | `--slds-g-color-neutral-base-30` |
| `slds-color__text_gray-11` | Apply gray-11 text color | `--slds-g-color-neutral-base-30` |
| `slds-color__text_gray-12` | Apply darkest gray text color | `--slds-g-color-neutral-base-20` |

### Background Colors

| Class | Purpose | Token Value |
|-------|---------|-------------|
| `slds-color__background_gray-1` | Apply lightest gray background | `--slds-g-color-neutral-base-100` |
| `slds-color__background_gray-2` | Apply gray-2 background | `--slds-g-color-neutral-base-95` |
| `slds-color__background_gray-3` | Apply gray-3 background | `--slds-g-color-neutral-base-95` |
| `slds-color__background_gray-4` | Apply gray-4 background | `--slds-g-color-neutral-base-90` |
| `slds-color__background_gray-5` | Apply gray-5 background | `--slds-g-color-neutral-base-90` |
| `slds-color__background_gray-6` | Apply gray-6 background | `--slds-g-color-neutral-base-80` |
| `slds-color__background_gray-7` | Apply gray-7 background | `--slds-g-color-neutral-base-70` |
| `slds-color__background_gray-8` | Apply gray-8 background | `--slds-g-color-neutral-base-60` |
| `slds-color__background_gray-9` | Apply gray-9 background | `--slds-g-color-neutral-base-50` |
| `slds-color__background_gray-10` | Apply gray-10 background | `--slds-g-color-neutral-base-30` |
| `slds-color__background_gray-11` | Apply gray-11 background | `--slds-g-color-neutral-base-30` |
| `slds-color__background_gray-12` | Apply darkest gray background | `--slds-g-color-neutral-base-20` |

### Border Colors

| Class | Purpose | Token Value |
|-------|---------|-------------|
| `slds-color__border_gray-1` | Apply lightest gray border | `--slds-g-color-neutral-base-100` |
| `slds-color__border_gray-2` | Apply gray-2 border | `--slds-g-color-neutral-base-95` |
| `slds-color__border_gray-3` | Apply gray-3 border | `--slds-g-color-neutral-base-95` |
| `slds-color__border_gray-4` | Apply gray-4 border | `--slds-g-color-neutral-base-90` |
| `slds-color__border_gray-5` | Apply gray-5 border | `--slds-g-color-neutral-base-90` |
| `slds-color__border_gray-6` | Apply gray-6 border | `--slds-g-color-neutral-base-80` |
| `slds-color__border_gray-7` | Apply gray-7 border | `--slds-g-color-neutral-base-70` |
| `slds-color__border_gray-8` | Apply gray-8 border | `--slds-g-color-neutral-base-60` |
| `slds-color__border_gray-9` | Apply gray-9 border | `--slds-g-color-neutral-base-50` |
| `slds-color__border_gray-10` | Apply gray-10 border | `--slds-g-color-neutral-base-30` |
| `slds-color__border_gray-11` | Apply gray-11 border | `--slds-g-color-neutral-base-30` |
| `slds-color__border_gray-12` | Apply darkest gray border | `--slds-g-color-neutral-base-20` |

### SVG Fill Colors

| Class | Purpose | Token Value |
|-------|---------|-------------|
| `slds-color__fill_gray-1` | Apply lightest gray SVG fill | `--slds-g-color-neutral-base-100` |
| `slds-color__fill_gray-2` | Apply gray-2 SVG fill | `--slds-g-color-neutral-base-95` |
| `slds-color__fill_gray-3` | Apply gray-3 SVG fill | `--slds-g-color-neutral-base-95` |
| `slds-color__fill_gray-4` | Apply gray-4 SVG fill | `--slds-g-color-neutral-base-90` |
| `slds-color__fill_gray-5` | Apply gray-5 SVG fill | `--slds-g-color-neutral-base-90` |
| `slds-color__fill_gray-6` | Apply gray-6 SVG fill | `--slds-g-color-neutral-base-80` |
| `slds-color__fill_gray-7` | Apply gray-7 SVG fill | `--slds-g-color-neutral-base-70` |
| `slds-color__fill_gray-8` | Apply gray-8 SVG fill | `--slds-g-color-neutral-base-60` |
| `slds-color__fill_gray-9` | Apply gray-9 SVG fill | `--slds-g-color-neutral-base-50` |
| `slds-color__fill_gray-10` | Apply gray-10 SVG fill | `--slds-g-color-neutral-base-30` |
| `slds-color__fill_gray-11` | Apply gray-11 SVG fill | `--slds-g-color-neutral-base-30` |
| `slds-color__fill_gray-12` | Apply darkest gray SVG fill | `--slds-g-color-neutral-base-20` |

## Common Patterns

### Card with Neutral Background
```html
<!-- Card with gray-2 background and darker text -->
<div class="slds-card slds-color__background_gray-2 slds-p-around_medium">
  <h2 class="slds-text-heading_medium slds-color__text_gray-12">Card Title</h2>
  <p class="slds-color__text_gray-10">Card content with readable contrast</p>
</div>
```

### Status Indicator with Border
```html
<!-- Status box with colored border -->
<div class="slds-box slds-color__border_gray-7 slds-border_top slds-border_bottom">
  <span class="slds-color__text_gray-9">Pending Review</span>
</div>
```

### Icon with Custom Fill Color
```html
<!-- SVG icon with gray fill -->
<svg class="slds-icon slds-icon_small slds-color__fill_gray-8">
  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
</svg>
```

### Alternating Row Colors
```html
<!-- Table rows with alternating backgrounds -->
<table class="slds-table">
  <tbody>
    <tr class="slds-color__background_gray-1">
      <td>Row 1 with gray-1 background</td>
    </tr>
    <tr class="slds-color__background_gray-2">
      <td>Row 2 with gray-2 background</td>
    </tr>
  </tbody>
</table>
```

### Text Hierarchy with Gray Scale
```html
<!-- Content with visual hierarchy using grays -->
<article class="slds-card__body">
  <h3 class="slds-color__text_gray-12">Primary Heading</h3>
  <h4 class="slds-color__text_gray-10">Secondary Heading</h4>
  <p class="slds-color__text_gray-8">Body text content</p>
  <small class="slds-color__text_gray-6">Supporting metadata</small>
</article>
```

## Best Practices

✅ Maintain WCAG AA contrast ratio of 4.5:1 for normal text
✅ Maintain WCAG AA contrast ratio of 3:1 for large text (18pt or 14pt bold)
✅ Use `slds-color__text_gray-12` on light backgrounds for maximum readability
✅ Use `slds-color__text_gray-1` on dark backgrounds for maximum readability
✅ Test color combinations with accessibility tools before deployment
✅ Use consistent gray levels across similar UI elements

❌ Never use gray-1 through gray-5 text on white backgrounds (insufficient contrast)
❌ Avoid using similar gray values for foreground and background
❌ Never rely solely on color to convey information
❌ Avoid using `slds-color__text_gray-6` or lighter for body text