Type Alias ColorTransform

Type Declaration

• { type: "tint"; value: number }

  • type: "tint"

    Produces a lighter version of the input colour. A 10% tint is 10% of the input colour combined with 90% white.

  • value: number

    Percentage (clamped to 0-100).

• { type: "shade"; value: number }

  • type: "shade"

    Produces a darker version of the input colour. A 10% shade is 10% of the input colour combined with 90% black.

  • value: number

    Percentage (clamped to 0-100).

• { type: "alpha"; value: number }

  • type: "alpha"

    Alters the input colour to have the specified opacity, but with its colour unchanged.

  • value: number

    Percentage (clamped to 0-100).

• { type: "alphaMod"; value: number }

  • type: "alphaMod"

    Produces a more or less opaque version of the input colour. An alpha modulate never increases the alpha beyond 100%. A 200% alpha modulate makes an input colour twice as opaque as before. A 50% alpha modulate makes an input colour half as opaque as before.

  • value: number

    Positive percentage.

• { type: "alphaOff"; value: number }

  • type: "alphaOff"

    Produces a more or less opaque version of the input colour.

    Increases or decreases the input alpha percentage by the specified percentage offset. A 10% alpha offset increases a 50% opacity to 60%. A -10% alpha offset decreases a 50% opacity to 40%. The transformed alpha values are limited to a range of 0 to 100%. A 10% alpha offset increase to a 100% opaque object still results in 100% opacity.

  • value: number

    Percentage (clamped to -100 to 100).

• { type: "hue"; value: number }

  • type: "hue"

    Alters the input colour so it has the specified hue, but with its saturation and luminance unchanged.

  • value: number

    Degrees (clamped to 0-360).

• { type: "hueMod"; value: number }

  • type: "hueMod"

    Modulates the input colour's hue by the given percentage. A 50% hue modulate decreases the angular hue value by half. A 200% hue modulate doubles the angular hue value.

  • value: number

    Positive percentage.

• { type: "hueOff"; value: number }

  • type: "hueOff"

    Produces the input colour with its hue shifted, but with its saturation and luminance unchanged.

  • value: number

    Degrees.

• { type: "sat"; value: number }

  • type: "sat"

    Alters the input colour so it has the specified saturation, but with its hue and luminance unchanged.

  • value: number

    Unbounded percentage.

• { type: "satMod"; value: number }

  • type: "satMod"

    Modulates the input colour's saturation by the given percentage.

    A 50% saturation modulate reduces the saturation by half. A 200% saturation modulate doubles the saturation.

  • value: number

    Unbounded percentage.

• { type: "satOff"; value: number }

  • type: "satOff"

    Produces the input colour with its saturation shifted, but with its hue and luminance unchanged. A 10% offset to 20% saturation yields 30% saturation.

  • value: number

    Unbounded percentage.

• { type: "lum"; value: number }

  • type: "lum"

    Alters the input colour so it has the specified luminance, but with its hue and saturation unchanged.

  • value: number

    Unbounded percentage.

• { type: "lumMod"; value: number }

  • type: "lumMod"

    Alters the input colour's luminance modulated by the given percentage.

    A 50% luminance modulate reduces the luminance by half. A 200% luminance modulate doubles the luminance.

  • value: number

    Unbounded percentage.

• { type: "lumOff"; value: number }

  • type: "lumOff"

    Produces the input colour with its luminance shifted, but with its hue and saturation unchanged.

  • value: number

    Unbounded percentage.

• { type: "red"; value: number }

  • type: "red"

    Produces the input colour with the specified red component. The green and blue colour components unchanged.

  • value: number

    Unbounded percentage.

• { type: "redMod"; value: number }

  • type: "redMod"

    Alters the input colour so its red component is modulated by the given percentage. A 50% red modulate reduces the red component by half. A 200% red modulate doubles the red component.

  • value: number

    Unbounded percentage.

• { type: "redOff"; value: number }

  • type: "redOff"

    Alters the input colour so its red component is shifted. Its green and blue colour components unchanged.

  • value: number

    Unbounded percentage.

• { type: "green"; value: number }

  • type: "green"

    Provides the input colour with the specified green component. Its red and blue colour components unchanged.

  • value: number

    Unbounded percentage.

• { type: "greenMod"; value: number }

  • type: "greenMod"

    Modulates the input colour's green component by the given percentage.

    A 50% green modulate reduces the green component by half. A 200% green modulate doubles the green component.

  • value: number

    Unbounded percentage.

• { type: "greenOff"; value: number }

  • type: "greenOff"

    Alters the input colour so its green component is shifted. Its red and blue colour components unchanged.

  • value: number

    Unbounded percentage.

• { type: "blue"; value: number }

  • type: "blue"

    Provides the input colour with the specified blue component. Its red and green colour components unchanged.

  • value: number

    Unbounded percentage.

• { type: "blueMod"; value: number }

  • type: "blueMod"

    Modulates the input colour's blue component by the given percentage.

    A 50% blue modulate reduces the blue component by half. A 200% blue modulate doubles the blue component.

  • value: number

    Unbounded percentage.

• { type: "blueOff"; value: number }

  • type: "blueOff"

    Alters the input colour so its blue component is shifted, but with its red and green colour components unchanged.

  • value: number

    Unbounded percentage.

• { type: "comp" }

  • type: "comp"

    Specifies that the colour rendered should be the complement of the input colour with the complement being defined as such.

• { type: "inv" }

  • type: "inv"

    Specifies the inverse of the input colour. For example, the inverse of red (1, 0, 0) is cyan (0, 1, 1 ).

• { type: "gray" }

  • type: "gray"

    Specifies a grey scale of the input colour, taking into relative intensities of the red, green, and blue primaries.

• { type: "gamma" }

  • type: "gamma"

    Specifies that the output colour rendered by the generating application should be the sRGB gamma shift of the input colour.

• { type: "invGamma" }

  • type: "invGamma"

    Specifies that the output colour rendered by the generating application should be the inverse sRGB gamma shift of the input colour.