---
title: "no-arbitrary-colors"
description: "Reports colors written as arbitrary values, such as bg-[#123456]."
image: "https://stillwind.dev/og.png"
---

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

# no-arbitrary-colors

This rule reports a color written as an arbitrary value, such as `bg-[#123456]`.
The CSS works, but the color does not come from your theme, so a theme change
does not reach it. No preset enables this rule.

## Reported

```tsx
style("bg-[#123456]");
```

> no-arbitrary-colors: arbitrary color `#123456` is forbidden for `background-color`; use a theme token or custom property
> 
> Example:1:8

## Fixed

```tsx
style("bg-brand");
```

## How to fix

Add the color to your theme with a name for its role, and use that name, as in
the example:

```css
@theme {
  --color-brand: #123456;
}
```

If the color already exists in the theme, use its name instead. To stop
components from using the default palette directly, also enable
[no-restricted-theme-tokens](/docs/lints/no-restricted-theme-tokens).

## Rule settings

| Preset | Severity |
| --- | --- |
| `recommended` | off |
| `strict` | off |
| `stylistic` | off |

[Configure lint](/docs/configuration#lint) to change the severity or options.

Source: https://stillwind.dev/docs/lints/no-arbitrary-colors/index.mdx