color

What it does

color is a color function: it runs per pixel after the earlier part of the chain has produced a color $x$ (one of red, green, blue or alpha), with argument $c$ for that channel:

$$x' = \begin{cases} c \cdot x & c \ge 0 \\ |c| \cdot (1 - x) & c < 0 \end{cases}$$

So positive values are a plain gain (tint/dim/brighten) and negative values are a scaled inversion. color(-1, -1, -1) is the same as invert(). Each channel is independent, so color(1, -1, 1) inverts green only.

All four arguments default to 1, so any you leave out are untouched: color(0.5) halves red only, which tints the image cyan.

The result is not clamped inside the chain, but every output buffer stores 0–1 per channel, so gains above 1 saturate when written out.

color source in glsl-functions.js (hydra-synth 1.4.0) ↗

Examples

Tint: keep red, dim green and blue

osc(20, 0.1, 0).color(1, 0.4, 0.2).out()

▶ Load into previewOpen in hydra ↗

Invert one channel

osc(20, 0.1, 1.5).color(1, -1, 1).out()

▶ Load into previewOpen in hydra ↗

Pulsing brightness with a function

osc(10, 0.1, 1).color(() => 1 + Math.sin(time), () => 1 + Math.sin(time), () => 1 + Math.sin(time)).out()

▶ Load into previewOpen in hydra ↗

Parameters

Multiplies each channel by its argument; a negative argument multiplies the inverted channel by its absolute value.

Parameter	Default	Useful range	Units	No-op at
r	1	-2 … 2	multiplier (unitless)	1
g	1	-2 … 2	multiplier (unitless)	1
b	1	-2 … 2	multiplier (unitless)	1
a	1	-1 … 1	multiplier (unitless)	1

r= 1

Red multiplier. Negative values use the inverted red channel, $1 - \text{red}$.

Useful range

-2 … 2

Units

multiplier (unitless)

No-op at

1

Negative values

$|r| \cdot (1 - \text{red})$: -1 is a pure inversion of red, -0.5 an inverted and dimmed red

Accepts

number · array · function

Values above 1 brighten, but anything past 1.0 is clipped when the result is written to an output, so a channel that is already bright saturates to full. 0 and -0 give the same result (black in that channel) — both formulas multiply by $|r| = 0$.

1

0.5

0

-0.5

-1

2

Sweep of r (still at time = 0): s0.initImage("https://hydra-ref.audiodude.xyz/cards/color-chart.png") src(s0).color({r}, 1, 1, 1).out() · outlined tile = default

g= 1

Green multiplier; same rules as r.

Useful range

-2 … 2

Units

multiplier (unitless)

No-op at

1

Negative values

$|g| \cdot (1 - \text{green})$

Accepts

number · array · function

1

0.5

0

-0.5

-1

2

Sweep of g (still at time = 0): s0.initImage("https://hydra-ref.audiodude.xyz/cards/color-chart.png") src(s0).color(1, {g}, 1, 1).out() · outlined tile = default

b= 1

Blue multiplier; same rules as r.

Useful range

-2 … 2

Units

multiplier (unitless)

No-op at

1

Negative values

$|b| \cdot (1 - \text{blue})$

Accepts

number · array · function

1

0.5

0

-0.5

-1

2

Sweep of b (still at time = 0): s0.initImage("https://hydra-ref.audiodude.xyz/cards/color-chart.png") src(s0).color(1, 1, {b}, 1).out() · outlined tile = default

a= 1

Alpha multiplier; same rules applied to the alpha channel.

Useful range

-1 … 1

Units

multiplier (unitless)

No-op at

1

Negative values

$|a| \cdot (1 - \text{alpha})$; on an opaque image any negative a gives alpha 0

Accepts

number · array · function

Alpha matters when this result is combined with another texture (e.g. layer, blend, mask). Displayed directly, the browser composites the canvas over whatever page is behind it, so what a lowered a looks like on its own depends on that page.

1

0.5

0

Sweep of a (still at time = 0): s0.initImage("https://hydra-ref.audiodude.xyz/cards/color-chart.png") src(s0).color(1, 1, 1, {a}).out() · outlined tile = default

Gotchas

Quirk: color(0.5) is a cyan tint, not a dimmer

Missing arguments default to 1, so only red is scaled. Pass all three for a uniform dim: color(0.5, 0.5, 0.5). Verified headlessly: white through color(0.5) renders (128, 255, 255).

Quirk: negative means inverted, not darker

A negative value does not subtract. color(-0.5) on a red of 0.4 gives $0.5 \cdot (1 - 0.4) = 0.3$, so dark areas become bright. Probe: solid(0.2, 0.4, 0.6).color(0.5, -0.5, 2) renders (25, 76, 255) — ×0.5, inverted×0.5, and ×2 clipped at 255.

• Gains above 1 clip at the output, so color(2, 2, 2) blows highlights out to white rather than stretching contrast. Use contrast/brightness for that.
• 0 and -0 behave identically (both zero the channel).

Related

• Arguments & time: animating the channels with arrays and functions.
• modulate: uses red/green of another texture as displacement, so color on the modulator changes the direction of the warp.