noHexColors

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="CSS" icon="seti:css"> :::caution This rule is part of the [nursery](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time. ::: ## Summary - Rule available since: `v2.3.14` - Diagnostic Category: [`lint/nursery/noHexColors`](/reference/diagnostics#diagnostic-category) - This rule doesn't have a fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - Sources: - Same as [`color-no-hex`](https://github.com/stylelint/stylelint/blob/main/lib/rules/color-no-hex/README.md)

How to configure

json

{
	"linter": {
		"rules": {
			"nursery": {
				"noHexColors": "error"
			}
		}
	}
}

Description

Disallow hex colors.

While hex colors are widely supported and compact, they can be less readable and have limitations in terms of color representation compared to color models like HSL or OKLCH. This rule encourages the use of more expressive color formats.

This rule is inspired by the Stylelint rule color-no-hex.

Examples

Invalid

css

a { color: #000; }

<pre class="language-text"><code class="language-text">code-block.css:1:12 <a href="https://biomejs.dev/linter/rules/no-hex-colors">lint/nursery/noHexColors</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ℹ Unexpected hex color. > 1 │ a { color: #000; } │ ^^^^ 2 │ ℹ Hex colors are less readable and have limitations compared to other color models. ℹ Consider using a named color or a color function like rgb(), hsl() or oklch(). See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value">MDN Web Docs on CSS color values</a> for more information. ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit <a href="https://biomejs.dev/linter/#nursery">https://biomejs.dev/linter/#nursery</a> for more information. </code></pre>

css

a { color: #fff1aa; }

<pre class="language-text"><code class="language-text">code-block.css:1:12 <a href="https://biomejs.dev/linter/rules/no-hex-colors">lint/nursery/noHexColors</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ℹ Unexpected hex color. > 1 │ a { color: #fff1aa; } │ ^^^^^^^ 2 │ ℹ Hex colors are less readable and have limitations compared to other color models. ℹ Consider using a named color or a color function like rgb(), hsl() or oklch(). See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value">MDN Web Docs on CSS color values</a> for more information. ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit <a href="https://biomejs.dev/linter/#nursery">https://biomejs.dev/linter/#nursery</a> for more information. </code></pre>

css

a { color: #123456aa; }

<pre class="language-text"><code class="language-text">code-block.css:1:12 <a href="https://biomejs.dev/linter/rules/no-hex-colors">lint/nursery/noHexColors</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ℹ Unexpected hex color. > 1 │ a { color: #123456aa; } │ ^^^^^^^^^ 2 │ ℹ Hex colors are less readable and have limitations compared to other color models. ℹ Consider using a named color or a color function like rgb(), hsl() or oklch(). See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value">MDN Web Docs on CSS color values</a> for more information. ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit <a href="https://biomejs.dev/linter/#nursery">https://biomejs.dev/linter/#nursery</a> for more information. </code></pre>

Valid

css

a { color: black; }

css

a { color: rgb(0, 0, 0); }

References

MDN Web Docs on CSS color values

</TabItem> </Tabs>