noHexColors

Summary

Rule available since: v2.3.14
Diagnostic Category: lint/style/noHexColors
This rule isn’t recommended, so you need to enable it.
This rule doesn’t have a fix.
The default severity of this rule is information.
Sources:
- Same as color-no-hex

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "noHexColors": "error"
6
      }
7
    }
8
  }
9
}

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

1
a { color: #000; }

code-block.css:1:12 lint/style/noHexColors ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ 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 MDN Web Docs on CSS color values for more information.

1
a { color: #fff1aa; }

code-block.css:1:12 lint/style/noHexColors ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ 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 MDN Web Docs on CSS color values for more information.

1
a { color: #123456aa; }

code-block.css:1:12 lint/style/noHexColors ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ 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 MDN Web Docs on CSS color values for more information.

Valid

1
a { color: black; }

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

References

MDN Web Docs on CSS color values