Colors

consistent-color-palette

Cap the number of unique color families used in a single file.

Counts the unique non-grayscale color families used inside a file and warns when the count exceeds the configured ceiling. AI agents reach outside the design system the moment they need to differentiate a status badge — within a few PRs you have eight palettes coexisting on one screen.

Behavior

• Fixable: No.
• Suggestions: No.

Options

["warn", {
  "maxUniqueColors": 8,
  "ignoreGrayscale": true
}]

Examples

Bad:

<div className="bg-red-500 text-blue-600 border-green-400" />
<div className="bg-purple-300 text-orange-500 border-pink-200" />
<div className="bg-teal-100 text-amber-700 border-cyan-500" />

Good:

<div className="bg-blue-500 text-blue-900 border-blue-200" />
<div className="bg-gray-100 text-gray-700 border-gray-300" />

Related rules

• no-arbitrary-colorsDisallow arbitrary color values like bg-[#FF0000] in Tailwind classes.
• dark-mode-coverageRequire a dark: variant for every background color class.
• a11y-color-contrastFlag text/background color combinations below WCAG AA contrast.

Use it

Enable consistent-color-palette in your eslint.config.js:

import deslint from '@deslint/eslint-plugin';

export default [
  {
    plugins: { deslint },
    rules: {
      'deslint/consistent-color-palette': 'error',
    },
  },
];

Found a false positive? Report it on GitHub →

← Back to all rules