# Colors

> The Tabler color palette with base colors, light variants, the gray scale and social brand colors, each with background and text utilities.

The Tabler color palette, with base and light shades, the gray scale and social brand colors.

Source: https://docs.tabler.io/ui/base/colors

---

## Base colors

These are the base colors. Each one has `bg-*` and `text-*` utilities, and the components use the same names for their color variants.

| Color | CSS variable | Hex |
| --- | --- | --- |
| Blue | `--tblr-blue` | `#066fd1` |
| Azure | `--tblr-azure` | `#4299e1` |
| Indigo | `--tblr-indigo` | `#4263eb` |
| Purple | `--tblr-purple` | `#ae3ec9` |
| Pink | `--tblr-pink` | `#d6336c` |
| Red | `--tblr-red` | `#d63939` |
| Orange | `--tblr-orange` | `#f76707` |
| Yellow | `--tblr-yellow` | `#f59f00` |
| Lime | `--tblr-lime` | `#74b816` |
| Green | `--tblr-green` | `#2fb344` |
| Teal | `--tblr-teal` | `#0ca678` |
| Cyan | `--tblr-cyan` | `#17a2b8` |

## Light colors

Every base color also has a light shade with the `-lt` suffix. It works as a background for text or an icon in the base color.

| Color | CSS variable | Hex |
| --- | --- | --- |
| Blue Light | `--tblr-blue-lt` | `#066fd1` |
| Azure Light | `--tblr-azure-lt` | `#4299e1` |
| Indigo Light | `--tblr-indigo-lt` | `#4263eb` |
| Purple Light | `--tblr-purple-lt` | `#ae3ec9` |
| Pink Light | `--tblr-pink-lt` | `#d6336c` |
| Red Light | `--tblr-red-lt` | `#d63939` |
| Orange Light | `--tblr-orange-lt` | `#f76707` |
| Yellow Light | `--tblr-yellow-lt` | `#f59f00` |
| Lime Light | `--tblr-lime-lt` | `#74b816` |
| Green Light | `--tblr-green-lt` | `#2fb344` |
| Teal Light | `--tblr-teal-lt` | `#0ca678` |
| Cyan Light | `--tblr-cyan-lt` | `#17a2b8` |

## Gray palette

The gray scale is used for backgrounds, borders and muted text. Tabler ships several gray palettes and switches between them with `data-bs-theme-base`; see [theme base colors](/ui/plugins/theme-base-colors).

| Color | CSS variable |
| --- | --- |
| Gray 50 | `--tblr-gray-50` |
| Gray 100 | `--tblr-gray-100` |
| Gray 200 | `--tblr-gray-200` |
| Gray 300 | `--tblr-gray-300` |
| Gray 400 | `--tblr-gray-400` |
| Gray 500 | `--tblr-gray-500` |
| Gray 600 | `--tblr-gray-600` |
| Gray 700 | `--tblr-gray-700` |
| Gray 800 | `--tblr-gray-800` |
| Gray 900 | `--tblr-gray-900` |
| Gray 950 | `--tblr-gray-950` |

### Gray utilities

Every shade of the gray palette has a background and a text utility, from `50` to `950`. Use `bg-gray-*` for surfaces and `text-gray-*` for muted text, and pick a pair with enough contrast between them.

```html
<div class="bg-gray-100 text-gray-700 p-3 rounded mb-2">Light surface with dark text</div>
<div class="bg-gray-800 text-gray-100 p-3 rounded mb-2">Dark surface with light text</div>
<p class="text-gray-500 mb-0">Muted paragraph with text-gray-500</p>
```

## Social colors

The brand colors of popular services are available too, for social buttons and icons.

| Color | CSS variable |
| --- | --- |
| Facebook | `--tblr-facebook` |
| Twitter | `--tblr-twitter` |
| X | `--tblr-x` |
| Linkedin | `--tblr-linkedin` |
| Google | `--tblr-google` |
| Youtube | `--tblr-youtube` |
| Vimeo | `--tblr-vimeo` |
| Dribbble | `--tblr-dribbble` |
| Github | `--tblr-github` |
| Instagram | `--tblr-instagram` |
| Pinterest | `--tblr-pinterest` |
| VK | `--tblr-vk` |
| RSS | `--tblr-rss` |
| Flickr | `--tblr-flickr` |
| Bitbucket | `--tblr-bitbucket` |
| Tabler | `--tblr-tabler` |

## Accessibility

- A color name is not a meaning. `text-red` looks like an error to most users, but a screen reader announces nothing, so keep the meaning in the text.
- Body text needs a contrast ratio of at least 4.5:1, and large text at least 3:1. The lighter `-lt` variants are backgrounds for dark text, not text colors.
- Check both color modes. A pair that passes in light can fail in dark, and Tabler switches many tokens with `light-dark()`.
- The social colors are brand colors. They are picked to be recognizable, not readable - do not use them for text on a white background without checking.
- Never separate two states by hue alone. Add a label, an icon, or a shape.