Skip to content
Spreadsheet Editor

ColorTransform

type ColorTransform =
  | {
  type: "tint";
  value: number;
}
  | {
  type: "shade";
  value: number;
}
  | {
  type: "alpha";
  value: number;
}
  | {
  type: "alphaMod";
  value: number;
}
  | {
  type: "alphaOff";
  value: number;
}
  | {
  type: "hue";
  value: number;
}
  | {
  type: "hueMod";
  value: number;
}
  | {
  type: "hueOff";
  value: number;
}
  | {
  type: "sat";
  value: number;
}
  | {
  type: "satMod";
  value: number;
}
  | {
  type: "satOff";
  value: number;
}
  | {
  type: "lum";
  value: number;
}
  | {
  type: "lumMod";
  value: number;
}
  | {
  type: "lumOff";
  value: number;
}
  | {
  type: "red";
  value: number;
}
  | {
  type: "redMod";
  value: number;
}
  | {
  type: "redOff";
  value: number;
}
  | {
  type: "green";
  value: number;
}
  | {
  type: "greenMod";
  value: number;
}
  | {
  type: "greenOff";
  value: number;
}
  | {
  type: "blue";
  value: number;
}
  | {
  type: "blueMod";
  value: number;
}
  | {
  type: "blueOff";
  value: number;
}
  | {
  type: "comp";
}
  | {
  type: "inv";
}
  | {
  type: "gray";
}
  | {
  type: "gamma";
}
  | {
  type: "invGamma";
};

Union Members

Section titled “Union Members”

Type Literal

Section titled “Type Literal”
{
  type: "tint";
  value: number;
}

type

Section titled “type”
type: "tint";

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

value

Section titled “value”
value: number;

Percentage (clamped to 0-100).

Min
Section titled “Min”

0

Max
Section titled “Max”

100

Type Literal

Section titled “Type Literal”
{
  type: "shade";
  value: number;
}

type

Section titled “type”
type: "shade";

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

value

Section titled “value”
value: number;

Percentage (clamped to 0-100).

Min
Section titled “Min”

0

Max
Section titled “Max”

100

Type Literal

Section titled “Type Literal”
{
  type: "alpha";
  value: number;
}

type

Section titled “type”
type: "alpha";

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

value

Section titled “value”
value: number;

Percentage (clamped to 0-100).

Min
Section titled “Min”

0

Max
Section titled “Max”

100

Type Literal

Section titled “Type Literal”
{
  type: "alphaMod";
  value: number;
}

type

Section titled “type”
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

Section titled “value”
value: number;

Positive percentage.

Min
Section titled “Min”

0

Type Literal

Section titled “Type Literal”
{
  type: "alphaOff";
  value: number;
}

type

Section titled “type”
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

Section titled “value”
value: number;

Percentage (clamped to -100 to 100).

Min
Section titled “Min”

-100

Max
Section titled “Max”

100

Type Literal

Section titled “Type Literal”
{
  type: "hue";
  value: number;
}

type

Section titled “type”
type: "hue";

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

value

Section titled “value”
value: number;

Degrees (clamped to 0-360).

Min
Section titled “Min”

0

Max
Section titled “Max”

360

Type Literal

Section titled “Type Literal”
{
  type: "hueMod";
  value: number;
}

type

Section titled “type”
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

Section titled “value”
value: number;

Positive percentage.

Min
Section titled “Min”

0

Type Literal

Section titled “Type Literal”
{
  type: "hueOff";
  value: number;
}

type

Section titled “type”
type: "hueOff";

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

value

Section titled “value”
value: number;

Type Literal

Section titled “Type Literal”
{
  type: "sat";
  value: number;
}

type

Section titled “type”
type: "sat";

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

value

Section titled “value”
value: number;

Type Literal

Section titled “Type Literal”
{
  type: "satMod";
  value: number;
}

type

Section titled “type”
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

Section titled “value”
value: number;

Type Literal

Section titled “Type Literal”
{
  type: "satOff";
  value: number;
}

type

Section titled “type”
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

Section titled “value”
value: number;

Type Literal

Section titled “Type Literal”
{
  type: "lum";
  value: number;
}

type

Section titled “type”
type: "lum";

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

value

Section titled “value”
value: number;

Type Literal

Section titled “Type Literal”
{
  type: "lumMod";
  value: number;
}

type

Section titled “type”
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

Section titled “value”
value: number;

Type Literal

Section titled “Type Literal”
{
  type: "lumOff";
  value: number;
}

type

Section titled “type”
type: "lumOff";

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

value

Section titled “value”
value: number;

Type Literal

Section titled “Type Literal”
{
  type: "red";
  value: number;
}

type

Section titled “type”
type: "red";

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

value

Section titled “value”
value: number;

Type Literal

Section titled “Type Literal”
{
  type: "redMod";
  value: number;
}

type

Section titled “type”
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

Section titled “value”
value: number;

Type Literal

Section titled “Type Literal”
{
  type: "redOff";
  value: number;
}

type

Section titled “type”
type: "redOff";

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

value

Section titled “value”
value: number;

Type Literal

Section titled “Type Literal”
{
  type: "green";
  value: number;
}

type

Section titled “type”
type: "green";

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

value

Section titled “value”
value: number;

Type Literal

Section titled “Type Literal”
{
  type: "greenMod";
  value: number;
}

type

Section titled “type”
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

Section titled “value”
value: number;

Type Literal

Section titled “Type Literal”
{
  type: "greenOff";
  value: number;
}

type

Section titled “type”
type: "greenOff";

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

value

Section titled “value”
value: number;

Type Literal

Section titled “Type Literal”
{
  type: "blue";
  value: number;
}

type

Section titled “type”
type: "blue";

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

value

Section titled “value”
value: number;

Type Literal

Section titled “Type Literal”
{
  type: "blueMod";
  value: number;
}

type

Section titled “type”
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

Section titled “value”
value: number;

Type Literal

Section titled “Type Literal”
{
  type: "blueOff";
  value: number;
}

type

Section titled “type”
type: "blueOff";

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

value

Section titled “value”
value: number;

Type Literal

Section titled “Type Literal”
{
  type: "comp";
}

type

Section titled “type”
type: "comp";

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

Type Literal

Section titled “Type Literal”
{
  type: "inv";
}

type

Section titled “type”
type: "inv";

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

Type Literal

Section titled “Type Literal”
{
  type: "gray";
}

type

Section titled “type”
type: "gray";

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

Type Literal

Section titled “Type Literal”
{
  type: "gamma";
}

type

Section titled “type”
type: "gamma";

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

Type Literal

Section titled “Type Literal”
{
  type: "invGamma";
}

type

Section titled “type”
type: "invGamma";

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