hexColorValidity

Reports hex colors with invalid values.

✅ This rule is included in the css logical presets.

CSS values for hex colors must have 3, 4, 6, or 8 digits or letters in a-f after the #. Values with other characters, or the wrong number of characters, are not valid hex colors.

This rule reports on values that start with a # but are not valid hex colors.

Examples

❌ Incorrect

div {
  color: #a1;
}

div {
  color: #a1b2c;
}

div {
  color: #ggg;
}

✅ Correct

div {
  color: #a1b;
}

div {
  color: #a1b2c3;
}

div {
  color: #fff;
}

When Not To Use It

If you’re using a processor that works with seemingly invalid CSS colors, this rule might not be for you.

Further Reading

• MDN: <hex-color> CSS type>`

Equivalents in Other Linters

• ESLint: css/no-invalid-color-hex
• Stylelint: color-no-invalid-hex