lightness-notation

Specify number or percentage notation for lightness.

    a { color: oklch(85% 0.17 88) }
/**                  ↑
 *                   This notation */

Use this rule to enforce a convention. Lightness can be a number or a percentage. In oklch() and oklab() the number runs from 0 to 1, while in lch() and lab() it runs from 0 to 100.

Choose:

• "percentage" for consistency across all four functions
• "number" to match relative color syntax, where l is a number

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

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

Options

"percentage"

Lightness must always use the percentage notation.

{
  "lightness-notation": "percentage"
}

The following patterns are considered problems:

a { color: oklch(0.85 0.17 88) }

a { color: oklab(0.86 0.2 154) }

a { color: lch(85 0.17 88) }

a { color: lab(86 0.2 154) }

The following patterns are not considered problems:

a { color: oklch(85% 0.17 88) }

a { color: oklab(86% 0.2 154) }

a { color: lch(85% 0.17 88) }

a { color: lab(86% 0.2 154) }

"number"

Lightness must always use the number notation.

{
  "lightness-notation": "number"
}

The following patterns are considered problems:

a { color: oklch(85% 0.17 88) }

a { color: oklab(86% 0.2 154) }

a { color: lch(85% 0.17 88) }

a { color: lab(86% 0.2 154) }

The following patterns are not considered problems:

a { color: oklch(0.85 0.17 88) }

a { color: oklab(0.86 0.2 154) }

a { color: lch(85 0.17 88) }

a { color: lab(86 0.2 154) }