Skip to main content

color-function-alias-notation

Specify alias notation for color-functions.

    a { color: rgb(0 0 0 / 0.2) }
/**            ↑
 *             This notation */

Use this rule to enforce a convention. rgba() and hsla() are aliases of rgb() and hsl(), which accept an alpha value themselves.

Choose:

  • "without-alpha" to follow the specification, which keeps the aliases only for compatibility
  • "with-alpha" for older browsers, which accept an alpha value only in rgba() and hsla()

The fix option can automatically fix all of the problems reported by this rule.

This rule supports 2 message arguments: the color value and its expected notation.

Options​

"without-alpha"​

Applicable color-functions must always use the without alpha notation.

{
  "color-function-alias-notation": "without-alpha"
}

The following patterns are considered problems:

a { color: rgba(0 0 0) }
a { color: hsla(270 60% 50% / 15%) }

The following patterns are not considered problems:

a { color: rgb(0 0 0) }
a { color: hsl(270 60% 50% / 15%) }

"with-alpha"​

Applicable color-functions must always use with alpha notation.

{
  "color-function-alias-notation": "with-alpha"
}

The following patterns are considered problems:

a { color: rgb(0 0 0) }
a { color: hsl(270 60% 50% / 15%) }

The following patterns are not considered problems:

a { color: rgba(0 0 0) }
a { color: hsla(270 60% 50% / 15%) }