Sepia Matrix CSS Filter Values

Apply CSS sepia matrix interpolated with identity in gamma-sRGB, exposing output clipping; artistic filter not historical film emulsion or a perceptual color correction.

Description

CSS-style sepia uses a fixed channel matrix interpolated with identity.

CSS-style sepia uses a fixed channel matrix interpolated with identity. It may produce channel excursions that require clipping.^{[1, 2]}

Enter normalized RGB and sepia fraction 0–1. Use the fixed 3×3 sepia matrix on encoded channels; return clamped RGB and strict-excursion indexes.

When to use Sepia Matrix CSS Filter Values

Use Sepia Matrix CSS Filter Values when you need to evaluate the supplied records under the calculation and evidence rules below. No historical emulsion model or perceptual color correction is provided.

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 Sepia Matrix CSS Filter Values 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, sepiaFraction using the field table and calculation rules, then run the tool.
Read sepiaRgb, 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
sepiaFraction	Sepia fraction	number	Required

Enter normalized RGB and sepia fraction 0–1. Use the fixed 3×3 sepia matrix on encoded channels; return clamped RGB and strict-excursion indexes.

raw=base+fraction×(sepiaMatrix×base−base)

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

Output field	Meaning	Value type
sepiaRgb	Sepia rgb	list of number
clippedChannelIndices	Clipped channel indices	list of number

json

{
  "input": {
    "baseRgb": [
      1,
      0,
      0
    ],
    "sepiaFraction": 1
  },
  "output": {
    "sepiaRgb": [
      0.393,
      0.349,
      0.272
    ],
    "clippedChannelIndices": []
  }
}

Limitations and assumptions

No historical emulsion model or perceptual color correction is provided.

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 CSS hue-rotate Invert Equivalent: CSS invert and hue-rotate are ordered channel filters. The hue-rotate matrix is not generally equivalent to changing HSL hue. 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

Sepia Matrix CSS Filter Values — tool.io
Filter Effects Module Level 1: filter functions — World Wide Web Consortium

Similar or alternative tools

CSS hue-rotate Invert Equivalent
CSS invert and hue-rotate are ordered channel filters. The hue-rotate matrix is not generally equivalent to changing HSL hue.
Hue Shift Degrees Tool
HSL hue rotation preserves saturation and lightness. An achromatic source has no observed hue to preserve.