Invert-Sepia-Saturate-Hue — Orange Pill Wiki
CONCEPT

Invert-Sepia-Saturate-Hue

The canonical four-primitive recipe for transforming a black-ink stipple illustration on transparent background into a warm, parchment-compatible rendering without touching the source asset.

The invert-sepia-saturate-hue recipe applies, in order: inversion (black becomes white, whites become transparent-adjacent), sepia conversion (the now-white ink is tinted toward brown), saturation adjustment (the brown is pulled toward a specific warmth), and hue rotation (the warmth is shifted along the color wheel to match the page's ambient palette). The result, applied to a monochrome stipple, yields an ink-on-parchment appearance suitable for sepia-themed reading modes. The recipe is a workhorse because each primitive is well-behaved within its normal range, and the composition degrades gracefully when one parameter is pushed slightly. It fails when any parameter is pushed hard, or when the source image has tonal complexity beyond pure black on transparent.

In the AI Story

Hedcut illustration for Invert-Sepia-Saturate-Hue
Invert-Sepia-Saturate-Hue

The recipe emerged from experimentation rather than theory. Early versions of the wiki's illustration system used simple CSS invert for dark mode and left light mode untouched. When sepia mode was added, naive approaches — a sepia overlay, a background-color swap — produced illustrations that looked grafted onto the page rather than belonging to it. The four-primitive chain was the shortest reliable path from the source asset to the desired rendering.

The parameters settled through iteration. sat20 is gentle enough not to clip; hue-50 rotates the sepia brown toward a warmer tone that matches the reading mode's background. Moving either parameter by ten units in either direction produces visibly different results; moving by thirty produces results that look wrong. The narrowness of the acceptable range is a property of the recipe, not a defect — it reflects the specific luminance structure of stipple art, which leaves little room for tonal manipulation before the ink becomes either muddy or garish.

Related recipes exist for other rendering contexts. inv+sep+sat50+hue-40+b.8 — with higher saturation and added brightness clamp — handles illustrations that would otherwise appear too pale on parchment. br0+sat100+inv14+sep+sat+hue explores a different branch of the space entirely: a brightness reset followed by saturation amplification before inversion, producing effects that the simpler recipe cannot reach. Each variant trades simplicity for a specific capability, and the choice between them is a matter of illustration judgment.

The recipe does not transfer to every illustration. Stipples with dense ink coverage behave differently than sparse ones; illustrations that use gray tones (rather than pure black) pick up color shifts the recipe was not designed to accommodate. When the recipe fails, the correct response is not to push the parameters harder but to recognize that the source asset is outside the recipe's operating range and to choose a different approach.

Origin

The recipe was derived empirically during the construction of the Orange Pill Wiki's illustration pipeline. Its specific parameter values — the twenty, the minus fifty — are artifacts of the aesthetic calibration process rather than derivations from any color theory, and they would need to be re-tuned for any illustration system with a different source aesthetic or target palette.

Key Ideas

Four primitives, ordered. invert, sepia, saturate, hue-rotate — the sequence produces an ink-on-parchment rendering from a pure black stipple.

Parameters are narrow. The acceptable range for each primitive is tight; small deviations produce visible differences, large deviations produce failures.

Source-specific. The recipe is calibrated for pure black on transparent; other sources require other recipes or direct source modification.

Composable variants exist. Adding brightness, contrast, or a second saturate produces branches of the recipe for specific edge cases.

Appears in the Orange Pill Cycle

Further reading

  1. W3C, Filter Effects Module Level 1, §§ 7–11 (primitive definitions).
  2. Chris Coyier, "The CSS Filter Property," CSS-Tricks, updated 2024.
  3. Sara Soueidan, "CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS," Smashing Magazine, 2021.
  4. MDN Web Docs, hue-rotate() — CSS function, accessed 2026.
Part of The Orange Pill Wiki · A reference companion to the Orange Pill Cycle.
0%
CONCEPT