Skip to main content

color-named

Require (where possible) or disallow named colors.

a { color: black }
/** โ†‘
* This named color */

This rule ignores $sass and @less variable syntaxes.

Options#

string: "always-where-possible"|"never"

"always-where-possible"#

Colors must always, where possible, be named.

This will complain if a hex (3, 4, 6 and 8 digit), rgb(), rgba(), hsl(), hsla(), hwb() or gray() color can be represented as a named color.

The following patterns are considered violations:

a { color: #000; }
a { color: #f000; }
a { color: #ff000000; }
a { color: rgb(0, 0, 0); }
a { color: rgb(0%, 0%, 0%); }
a { color: rgba(0, 0, 0, 0); }
a { color: hsl(0, 0%, 0%); }
a { color: hwb(0, 0%, 100%); }
a { color: gray(0); }

The following patterns are not considered violations:

a { color: black; }
a { color: rgb(10, 0, 0); }
a { color: rgb(0, 0, 0, 0.5); }

"never"#

Colors must never be named.

The following patterns are considered violations:

a { color: black; }
a { color: white; }

The following patterns are not considered violations:

a { color: #000; }
a { color: rgb(0, 0, 0); }
a { color: var(--white); }

Optional secondary options#

ignore: ["inside-function"]#

Ignore colors that are inside a function.

For example, with "never".

The following patterns are not considered violations:

a {
color: map-get($colour, blue);
}
a {
background-image: url(red);
}

ignoreProperties: ["/regex/", /regex/, "string"]#

For example with "never".

Given:

["/^my-/", "composes"]

The following patterns are not considered violations:

a {
my-property: red;
}
a {
my-other-property: red;
}
a {
composes: red from './index.css';
}