tint

Wash the child toward one color.

tint(slots: {color: PropRef; amount: ArgSpec; preserveLuminosity: PropRef}): PointwiseEffect

Import effects from shaders/std and use effects.color.tint.

amount is 0–1: 0 leaves the child alone, 1 replaces its color entirely. While the boolean preserveLuminosity prop is on, the result is scaled back to the child's original brightness, so the tint changes hue without darkening. Declare that prop compileTime: true with transform: (v) => (v ? 1 : 0). Alpha kept.

Parameters

Example

effect: tint({color: p('color'), amount: p('amount'), preserveLuminosity: p('preserveLuminosity')})

Tip. Reach for tintToward instead when you do not need the brightness-preserving mode.

See also

• tintToward — Mix the child's color toward one color by an amount, leaving its alpha alone.
• duotone — Repaint the child in two colors: colorA for the shadows, colorB for the highlights.
• hueRotate — Rotate the child's hue around the color wheel.

Used by

Tint