CSS hue-rotate Invert Equivalent

Apply CSS-style invert then gamma-domain hue-rotate matrix in stated order, clipping/reporting output channels; HSL hue rotation is not generally equivalent. No claim about other filter order or browser color-management pipelines.

Description

CSS invert and hue-rotate are ordered channel filters.

CSS invert and hue-rotate are ordered channel filters. The hue-rotate matrix is not generally equivalent to changing HSL hue.^{[1, 2]}

Enter normalized RGB, invert fraction 0–1 and hue angle bounded±10^9 degrees. Apply invert first, normalize angle, then apply the encoded-domain CSS hue-rotate matrix. Return clipped RGB and excursion indexes.

When to use CSS hue-rotate Invert Equivalent

Use CSS hue-rotate Invert Equivalent when you need to evaluate the supplied records under the calculation and evidence rules below. No alternate filter order or full browser color-management equivalence is claimed.

Prepare colors in the stated color space and scale. Use encoded RGB fractions, linear RGB, Lab, xy, byte values or ink percentages exactly as requested; supply caller tolerances and reference conditions.

How to use CSS hue-rotate Invert Equivalent and understand its results

Prepare colors in the stated color space and scale. Use encoded RGB fractions, linear RGB, Lab, xy, byte values or ink percentages exactly as requested; supply caller tolerances and reference conditions.
Enter baseRgb, invertFraction, hueRotateDegrees using the field table and calculation rules, then run the tool.
Read filteredRgb, clippedChannelIndices. The explanation below defines the units, signs, ordering and any flags or placeholder values.
If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.

Input field	Meaning	Value type; see rules below	Requirement
baseRgb	Base rgb	list of number	Required
invertFraction	Invert fraction	number	Required
hueRotateDegrees	Hue rotate degrees	number	Required

inverted=base(1−invert)+(1−base)invert; output=hueRotateMatrix×inverted

Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.

Output field	Meaning	Value type
filteredRgb	Filtered rgb	list of number
clippedChannelIndices	Clipped channel indices	list of number

json

{
  "input": {
    "baseRgb": [
      1,
      0,
      0
    ],
    "invertFraction": 1,
    "hueRotateDegrees": 180
  },
  "output": {
    "filteredRgb": [
      1,
      0.574,
      0.5739999999999998
    ],
    "clippedChannelIndices": [
      0
    ]
  }
}

Limitations and assumptions

No alternate filter order or full browser color-management equivalence is claimed.

Numeric inputs, where present, must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Numeric lists are limited to 10,000 entries; string lists to 128 strings of at most 128 characters each. The rules above may impose smaller limits. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.

Alternative or Complementary methods

Use Sepia Matrix CSS Filter Values: CSS-style sepia uses a fixed channel matrix interpolated with identity. It may produce channel excursions that require clipping. For a complementary task, use Hue Shift Degrees Tool: HSL hue rotation preserves saturation and lightness. An achromatic source has no observed hue to preserve.

Further background: Filter Effects Module Level 1: filter functions.

References

CSS hue-rotate Invert Equivalent — tool.io
Filter Effects Module Level 1: filter functions — World Wide Web Consortium

Similar or alternative tools

Sepia Matrix CSS Filter Values
CSS-style sepia uses a fixed channel matrix interpolated with identity. It may produce channel excursions that require clipping.
Hue Shift Degrees Tool
HSL hue rotation preserves saturation and lightness. An achromatic source has no observed hue to preserve.