noHexColors

Ta treść nie jest jeszcze dostępna w Twoim języku.

Summary

Rule available since: v2.3.14
Diagnostic Category: lint/nursery/noHexColors
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
      "nursery": {
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/nursery/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.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
a { color: #fff1aa; }

code-block.css:1:12 lint/nursery/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.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
a { color: #123456aa; }

code-block.css:1:12 lint/nursery/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.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
a { color: black; }

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

References

MDN Web Docs on CSS color values