Skip to main content

color-no-hex

Disallow hex colors.

a { color: #333 }
/**        ↑
 * This hex color */

This rule supports 1 message argument: the disallowed hex color.

Options​

true​

{
  "color-no-hex": true
}

The following patterns are considered problems:

a { color: #000; }
a { color: #fff1aa; }
a { color: #123456aa; }

Hex values that are not valid also cause problems:

a { color: #foobar; }
a { color: #0000000000000000; }

The following patterns are not considered problems:

a { color: black; }
a { color: rgb(0, 0, 0); }
a { color: rgba(0, 0, 0, 1); }

Optional secondary options​

ignoreFunctions​

{ "ignoreFunctions": ["array", "of", "functions", "/regex/"] }

Ignore hex colors within the specified functions.

Given:

{
  "color-no-hex": [true, { "ignoreFunctions": ["var", "/^--/"] }]
}

The following patterns are not considered problems:

a { color: var(--foo, #fff); }
a { color: --foo(#fff); }