color

Create a grayscale color.

A grayscale color is represented internally by a single lightness component.

These components are also available using the components method.

Create an Oklab color.

This color space is well suited for the following use cases:

• Color manipulation such as saturating while keeping perceived hue
• Creating grayscale images with uniform perceived lightness
• Creating smooth and uniform color transition and gradients

A linear Oklab color is represented internally by an array of four components:

• lightness (ratio)
• a (float or ratio. Ratios are relative to 0.4; meaning 50% is equal to 0.2)
• b (float or ratio. Ratios are relative to 0.4; meaning 50% is equal to 0.2)
• alpha (ratio)

These components are also available using the components method.

Create an Oklch color.

This color space is well suited for the following use cases:

• Color manipulation involving lightness, chroma, and hue
• Creating grayscale images with uniform perceived lightness
• Creating smooth and uniform color transition and gradients

A linear Oklch color is represented internally by an array of four components:

• lightness (ratio)
• chroma (float or ratio. Ratios are relative to 0.4; meaning 50% is equal to 0.2)
• hue (angle)
• alpha (ratio)

These components are also available using the components method.

Create an RGB(A) color with linear luma.

This color space is similar to sRGB, but with the distinction that the color component are not gamma corrected. This makes it easier to perform color operations such as blending and interpolation. Although, you should prefer to use the oklab function for these.

A linear RGB(A) color is represented internally by an array of four components:

• red (ratio)
• green (ratio)
• blue (ratio)
• alpha (ratio)

These components are also available using the components method.

Create an RGB(A) color.

The color is specified in the sRGB color space.

An RGB(A) color is represented internally by an array of four components:

• red (ratio)
• green (ratio)
• blue (ratio)
• alpha (ratio)

These components are also available using the components method.

Create a CMYK color.

This is useful if you want to target a specific printer. The conversion to RGB for display preview might differ from how your printer reproduces the color.

A CMYK color is represented internally by an array of four components:

• cyan (ratio)
• magenta (ratio)
• yellow (ratio)
• key (ratio)

These components are also available using the components method.

Note that CMYK colors are not currently supported when PDF/A output is enabled.

Create an HSL color.

This color space is useful for specifying colors by hue, saturation and lightness. It is also useful for color manipulation, such as saturating while keeping perceived hue.

An HSL color is represented internally by an array of four components:

• hue (angle)
• saturation (ratio)
• lightness (ratio)
• alpha (ratio)

These components are also available using the components method.

Create an HSV color.

This color space is useful for specifying colors by hue, saturation and value. It is also useful for color manipulation, such as saturating while keeping perceived hue.

An HSV color is represented internally by an array of four components:

• hue (angle)
• saturation (ratio)
• value (ratio)
• alpha (ratio)

These components are also available using the components method.

Extracts the components of this color.

The size and values of this array depends on the color space. You can obtain the color space using space. Below is a table of the color spaces and their components:

For the meaning and type of each individual value, see the documentation of the corresponding color space. The alpha component is optional and only included if the alpha argument is true. The length of the returned array depends on the number of components and whether the alpha component is included.

Returns the constructor function for this color's space:

• luma
• oklab
• oklch
• linear-rgb
• rgb
• cmyk
• hsl
• hsv

Returns the color's RGB(A) hex representation (such as #ffaa32 or #020304fe). The alpha component (last two digits in #020304fe) is omitted if it is equal to ff (255 / 100%).

Lightens a color by a given factor.

Darkens a color by a given factor.

Increases the saturation of a color by a given factor.

Decreases the saturation of a color by a given factor.

Produces the complementary color using a provided color space. You can think of it as the opposite side on a color wheel.

Rotates the hue of the color by a given angle.

Create a color by mixing two or more colors.

In color spaces with a hue component (hsl, hsv, oklch), only two colors can be mixed at once. Mixing more than two colors in such a space will result in an error!

Makes a color more transparent by a given factor.

This method is relative to the existing alpha value. If the scale is positive, calculates alpha - alpha * scale. Negative scales behave like color.opacify(-scale).

Makes a color more opaque by a given scale.

This method is relative to the existing alpha value. If the scale is positive, calculates alpha + scale - alpha * scale. Negative scales behave like color.transparentize(-scale).