{"route":"/en-US-v0.13.1/reference/visualize/color/","title":"Color","description":"Documentation for the Color type.","part":null,"outline":[{"id":"summary","name":"Summary","children":[]},{"id":"example","name":"Example","children":[]},{"id":"predefined-colors","name":"Predefined colors","children":[]},{"id":"predefined-color-maps","name":"Predefined color maps","children":[]},{"id":"definitions","name":"Definitions","children":[{"id":"definitions-luma","name":"Luma","children":[{"id":"definitions-luma-lightness","name":"lightness","children":[]},{"id":"definitions-luma-alpha","name":"alpha","children":[]},{"id":"definitions-luma-color","name":"color","children":[]}]},{"id":"definitions-oklab","name":"Oklab","children":[{"id":"definitions-oklab-lightness","name":"lightness","children":[]},{"id":"definitions-oklab-a","name":"a","children":[]},{"id":"definitions-oklab-b","name":"b","children":[]},{"id":"definitions-oklab-alpha","name":"alpha","children":[]},{"id":"definitions-oklab-color","name":"color","children":[]}]},{"id":"definitions-oklch","name":"Oklch","children":[{"id":"definitions-oklch-lightness","name":"lightness","children":[]},{"id":"definitions-oklch-chroma","name":"chroma","children":[]},{"id":"definitions-oklch-hue","name":"hue","children":[]},{"id":"definitions-oklch-alpha","name":"alpha","children":[]},{"id":"definitions-oklch-color","name":"color","children":[]}]},{"id":"definitions-linear-rgb","name":"Linear RGB","children":[{"id":"definitions-linear-rgb-red","name":"red","children":[]},{"id":"definitions-linear-rgb-green","name":"green","children":[]},{"id":"definitions-linear-rgb-blue","name":"blue","children":[]},{"id":"definitions-linear-rgb-alpha","name":"alpha","children":[]},{"id":"definitions-linear-rgb-color","name":"color","children":[]}]},{"id":"definitions-rgb","name":"RGB","children":[{"id":"definitions-rgb-red","name":"red","children":[]},{"id":"definitions-rgb-green","name":"green","children":[]},{"id":"definitions-rgb-blue","name":"blue","children":[]},{"id":"definitions-rgb-alpha","name":"alpha","children":[]},{"id":"definitions-rgb-hex","name":"hex","children":[]},{"id":"definitions-rgb-color","name":"color","children":[]}]},{"id":"definitions-cmyk","name":"CMYK","children":[{"id":"definitions-cmyk-cyan","name":"cyan","children":[]},{"id":"definitions-cmyk-magenta","name":"magenta","children":[]},{"id":"definitions-cmyk-yellow","name":"yellow","children":[]},{"id":"definitions-cmyk-key","name":"key","children":[]},{"id":"definitions-cmyk-color","name":"color","children":[]}]},{"id":"definitions-hsl","name":"HSL","children":[{"id":"definitions-hsl-hue","name":"hue","children":[]},{"id":"definitions-hsl-saturation","name":"saturation","children":[]},{"id":"definitions-hsl-lightness","name":"lightness","children":[]},{"id":"definitions-hsl-alpha","name":"alpha","children":[]},{"id":"definitions-hsl-color","name":"color","children":[]}]},{"id":"definitions-hsv","name":"HSV","children":[{"id":"definitions-hsv-hue","name":"hue","children":[]},{"id":"definitions-hsv-saturation","name":"saturation","children":[]},{"id":"definitions-hsv-value","name":"value","children":[]},{"id":"definitions-hsv-alpha","name":"alpha","children":[]},{"id":"definitions-hsv-color","name":"color","children":[]}]},{"id":"definitions-components","name":"Components","children":[{"id":"definitions-components-alpha","name":"alpha","children":[]}]},{"id":"definitions-space","name":"Space","children":[]},{"id":"definitions-to-hex","name":"To Hex","children":[]},{"id":"definitions-lighten","name":"Lighten","children":[{"id":"definitions-lighten-factor","name":"factor","children":[]}]},{"id":"definitions-darken","name":"Darken","children":[{"id":"definitions-darken-factor","name":"factor","children":[]}]},{"id":"definitions-saturate","name":"Saturate","children":[{"id":"definitions-saturate-factor","name":"factor","children":[]}]},{"id":"definitions-desaturate","name":"Desaturate","children":[{"id":"definitions-desaturate-factor","name":"factor","children":[]}]},{"id":"definitions-negate","name":"Negate","children":[{"id":"definitions-negate-space","name":"space","children":[]}]},{"id":"definitions-rotate","name":"Rotate","children":[{"id":"definitions-rotate-angle","name":"angle","children":[]},{"id":"definitions-rotate-space","name":"space","children":[]}]},{"id":"definitions-mix","name":"Mix","children":[{"id":"definitions-mix-colors","name":"colors","children":[]},{"id":"definitions-mix-space","name":"space","children":[]}]},{"id":"definitions-transparentize","name":"Transparentize","children":[{"id":"definitions-transparentize-scale","name":"scale","children":[]}]},{"id":"definitions-opacify","name":"Opacify","children":[{"id":"definitions-opacify-scale","name":"scale","children":[]}]}]}],"body":{"kind":"type","content":{"name":"color","title":"Color","keywords":[],"oneliner":"A color in a specific color space.","details":"

A color in a specific color space.

\n

Typst supports:

\n\n

Example

\n
#rect(fill: aqua)\n
\"Preview\"
\n

Predefined colors

\n

Typst defines the following built-in colors:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ColorDefinition
blackluma(0)
grayluma(170)
silverluma(221)
whiteluma(255)
navyrgb("#001f3f")
bluergb("#0074d9")
aquargb("#7fdbff")
tealrgb("#39cccc")
easternrgb("#239dad")
purplergb("#b10dc9")
fuchsiargb("#f012be")
maroonrgb("#85144b")
redrgb("#ff4136")
orangergb("#ff851b")
yellowrgb("#ffdc00")
olivergb("#3d9970")
greenrgb("#2ecc40")
limergb("#01ff70")
\n

The predefined colors and the most important color constructors are\navailable globally and also in the color type's scope, so you can write\neither color.red or just red.

\n
\"Preview\"
\n

Predefined color maps

\n

Typst also includes a number of preset color maps that can be used for\ngradients. These are simply arrays of colors defined in\nthe module color.map.

\n
#circle(fill: gradient.linear(..color.map.crest))\n
\"Preview\"
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MapDetails
turboA perceptually uniform rainbow-like color map. Read this blog post for more details.
cividisA blue to gray to yellow color map. See this blog post for more details.
rainbowCycles through the full color spectrum. This color map is best used by setting the interpolation color space to HSL. The rainbow gradient is not suitable for data visualization because it is not perceptually uniform, so the differences between values become unclear to your readers. It should only be used for decorative purposes.
spectralRed to yellow to blue color map.
viridisA purple to teal to yellow color map.
infernoA black to red to yellow color map.
magmaA black to purple to yellow color map.
plasmaA purple to pink to yellow color map.
rocketA black to red to white color map.
makoA black to teal to yellow color map.
vlagA light blue to white to red color map.
icefireA light teal to black to yellow color map.
flareA orange to purple color map that is perceptually uniform.
crestA blue to white to red color map.
\n

Some popular presets are not included because they are not available under a\nfree licence. Others, like\nJet,\nare not included because they are not color blind friendly. Feel free to use\nor create a package with other presets that are useful to you!

\n
\"Preview\"
","constructor":null,"scope":[{"path":["color"],"name":"luma","title":"Luma","keywords":[],"oneliner":"Create a grayscale color.","element":false,"contextual":false,"deprecation":null,"details":"

Create a grayscale color.

\n

A grayscale color is represented internally by a single lightness\ncomponent.

\n

These components are also available using the\ncomponents method.

","example":"
#for x in range(250, step: 50) {\n  box(square(fill: luma(x)))\n}\n
\"Preview\"
","self":false,"params":[{"name":"lightness","details":"

The lightness component.

","example":null,"types":["int","ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"alpha","details":"

The alpha component.

","example":null,"types":["ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"color","details":"

Alternatively: The color to convert to grayscale.

\n

If this is given, the lightness should not be given.

","example":null,"types":["color"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false}],"returns":["color"],"scope":[]},{"path":["color"],"name":"oklab","title":"Oklab","keywords":[],"oneliner":"Create an [Oklab](https://bottosson.github.io/posts/oklab/) color.","element":false,"contextual":false,"deprecation":null,"details":"

Create an Oklab color.

\n

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

\n\n

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

\n\n

These components are also available using the\ncomponents method.

","example":"
#square(\n  fill: oklab(27%, 20%, -3%, 50%)\n)\n
\"Preview\"
","self":false,"params":[{"name":"lightness","details":"

The lightness component.

","example":null,"types":["ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"a","details":"

The a ("green/red") component.

","example":null,"types":["float","ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"b","details":"

The b ("blue/yellow") component.

","example":null,"types":["float","ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"alpha","details":"

The alpha component.

","example":null,"types":["ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"color","details":"

Alternatively: The color to convert to Oklab.

\n

If this is given, the individual components should not be given.

","example":null,"types":["color"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false}],"returns":["color"],"scope":[]},{"path":["color"],"name":"oklch","title":"Oklch","keywords":[],"oneliner":"Create an [Oklch](https://bottosson.github.io/posts/oklab/) color.","element":false,"contextual":false,"deprecation":null,"details":"

Create an Oklch color.

\n

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

\n\n

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

\n\n

These components are also available using the\ncomponents method.

","example":"
#square(\n  fill: oklch(40%, 0.2, 160deg, 50%)\n)\n
\"Preview\"
","self":false,"params":[{"name":"lightness","details":"

The lightness component.

","example":null,"types":["ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"chroma","details":"

The chroma component.

","example":null,"types":["float","ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"hue","details":"

The hue component.

","example":null,"types":["angle"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"alpha","details":"

The alpha component.

","example":null,"types":["ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"color","details":"

Alternatively: The color to convert to Oklch.

\n

If this is given, the individual components should not be given.

","example":null,"types":["color"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false}],"returns":["color"],"scope":[]},{"path":["color"],"name":"linear-rgb","title":"Linear RGB","keywords":[],"oneliner":"Create an RGB(A) color with linear luma.","element":false,"contextual":false,"deprecation":null,"details":"

Create an RGB(A) color with linear luma.

\n

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

\n

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

\n\n

These components are also available using the\ncomponents method.

","example":"
#square(fill: color.linear-rgb(\n  30%, 50%, 10%,\n))\n
\"Preview\"
","self":false,"params":[{"name":"red","details":"

The red component.

","example":null,"types":["int","ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"green","details":"

The green component.

","example":null,"types":["int","ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"blue","details":"

The blue component.

","example":null,"types":["int","ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"alpha","details":"

The alpha component.

","example":null,"types":["int","ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"color","details":"

Alternatively: The color to convert to linear RGB(A).

\n

If this is given, the individual components should not be given.

","example":null,"types":["color"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false}],"returns":["color"],"scope":[]},{"path":["color"],"name":"rgb","title":"RGB","keywords":[],"oneliner":"Create an RGB(A) color.","element":false,"contextual":false,"deprecation":null,"details":"

Create an RGB(A) color.

\n

The color is specified in the sRGB color space.

\n

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

\n\n

These components are also available using the components\nmethod.

","example":"
#square(fill: rgb("#b1f2eb"))\n#square(fill: rgb(87, 127, 230))\n#square(fill: rgb(25%, 13%, 65%))\n
\"Preview\"
","self":false,"params":[{"name":"red","details":"

The red component.

","example":null,"types":["int","ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"green","details":"

The green component.

","example":null,"types":["int","ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"blue","details":"

The blue component.

","example":null,"types":["int","ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"alpha","details":"

The alpha component.

","example":null,"types":["int","ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"hex","details":"

Alternatively: The color in hexadecimal notation.

\n

Accepts three, four, six or eight hexadecimal digits and optionally\na leading hash.

\n

If this is given, the individual components should not be given.

","example":"
#text(16pt, rgb("#239dad"))[\n  *Typst*\n]\n
\"Preview\"
","types":["str"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"color","details":"

Alternatively: The color to convert to RGB(a).

\n

If this is given, the individual components should not be given.

","example":null,"types":["color"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false}],"returns":["color"],"scope":[]},{"path":["color"],"name":"cmyk","title":"CMYK","keywords":[],"oneliner":"Create a CMYK color.","element":false,"contextual":false,"deprecation":null,"details":"

Create a CMYK color.

\n

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

\n

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

\n\n

These components are also available using the\ncomponents method.

\n

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

","example":"
#square(\n  fill: cmyk(27%, 0%, 3%, 5%)\n)\n
\"Preview\"
","self":false,"params":[{"name":"cyan","details":"

The cyan component.

","example":null,"types":["ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"magenta","details":"

The magenta component.

","example":null,"types":["ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"yellow","details":"

The yellow component.

","example":null,"types":["ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"key","details":"

The key component.

","example":null,"types":["ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"color","details":"

Alternatively: The color to convert to CMYK.

\n

If this is given, the individual components should not be given.

","example":null,"types":["color"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false}],"returns":["color"],"scope":[]},{"path":["color"],"name":"hsl","title":"HSL","keywords":[],"oneliner":"Create an HSL color.","element":false,"contextual":false,"deprecation":null,"details":"

Create an HSL color.

\n

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

\n

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

\n\n

These components are also available using the\ncomponents method.

","example":"
#square(\n  fill: color.hsl(30deg, 50%, 60%)\n)\n
\"Preview\"
","self":false,"params":[{"name":"hue","details":"

The hue angle.

","example":null,"types":["angle"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"saturation","details":"

The saturation component.

","example":null,"types":["int","ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"lightness","details":"

The lightness component.

","example":null,"types":["int","ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"alpha","details":"

The alpha component.

","example":null,"types":["int","ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"color","details":"

Alternatively: The color to convert to HSL.

\n

If this is given, the individual components should not be given.

","example":null,"types":["color"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false}],"returns":["color"],"scope":[]},{"path":["color"],"name":"hsv","title":"HSV","keywords":[],"oneliner":"Create an HSV color.","element":false,"contextual":false,"deprecation":null,"details":"

Create an HSV color.

\n

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

\n

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

\n\n

These components are also available using the\ncomponents method.

","example":"
#square(\n  fill: color.hsv(30deg, 50%, 60%)\n)\n
\"Preview\"
","self":false,"params":[{"name":"hue","details":"

The hue angle.

","example":null,"types":["angle"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"saturation","details":"

The saturation component.

","example":null,"types":["int","ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"value","details":"

The value component.

","example":null,"types":["int","ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"alpha","details":"

The alpha component.

","example":null,"types":["int","ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"color","details":"

Alternatively: The color to convert to HSL.

\n

If this is given, the individual components should not be given.

","example":null,"types":["color"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false}],"returns":["color"],"scope":[]},{"path":["color"],"name":"components","title":"Components","keywords":[],"oneliner":"Extracts the components of this color.","element":false,"contextual":false,"deprecation":null,"details":"

Extracts the components of this color.

\n

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

\n\n\n\n\n\n\n\n\n\n
Color spaceC1C2C3C4
lumaLightness
oklabLightnessabAlpha
oklchLightnessChromaHueAlpha
linear-rgbRedGreenBlueAlpha
rgbRedGreenBlueAlpha
cmykCyanMagentaYellowKey
hslHueSaturationLightnessAlpha
hsvHueSaturationValueAlpha
\n

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

","example":"
// note that the alpha component is included by default\n#rgb(40%, 60%, 80%).components()\n
\"Preview\"
","self":true,"params":[{"name":"alpha","details":"

Whether to include the alpha component.

","example":null,"types":["bool"],"strings":[],"default":"true","positional":false,"named":true,"required":false,"variadic":false,"settable":false}],"returns":["array"],"scope":[]},{"path":["color"],"name":"space","title":"Space","keywords":[],"oneliner":"Returns the constructor function for this color's space:","element":false,"contextual":false,"deprecation":null,"details":"

Returns the constructor function for this color's space:

\n","example":"
#let color = cmyk(1%, 2%, 3%, 4%)\n#(color.space() == cmyk)\n
\"Preview\"
","self":true,"params":[],"returns":["any"],"scope":[]},{"path":["color"],"name":"to-hex","title":"To Hex","keywords":[],"oneliner":"Returns the color's RGB(A) hex representation (such as `#ffaa32` or","element":false,"contextual":false,"deprecation":null,"details":"

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

","example":null,"self":true,"params":[],"returns":["str"],"scope":[]},{"path":["color"],"name":"lighten","title":"Lighten","keywords":[],"oneliner":"Lightens a color by a given factor.","element":false,"contextual":false,"deprecation":null,"details":"

Lightens a color by a given factor.

","example":null,"self":true,"params":[{"name":"factor","details":"

The factor to lighten the color by.

","example":null,"types":["ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false}],"returns":["color"],"scope":[]},{"path":["color"],"name":"darken","title":"Darken","keywords":[],"oneliner":"Darkens a color by a given factor.","element":false,"contextual":false,"deprecation":null,"details":"

Darkens a color by a given factor.

","example":null,"self":true,"params":[{"name":"factor","details":"

The factor to darken the color by.

","example":null,"types":["ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false}],"returns":["color"],"scope":[]},{"path":["color"],"name":"saturate","title":"Saturate","keywords":[],"oneliner":"Increases the saturation of a color by a given factor.","element":false,"contextual":false,"deprecation":null,"details":"

Increases the saturation of a color by a given factor.

","example":null,"self":true,"params":[{"name":"factor","details":"

The factor to saturate the color by.

","example":null,"types":["ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false}],"returns":["color"],"scope":[]},{"path":["color"],"name":"desaturate","title":"Desaturate","keywords":[],"oneliner":"Decreases the saturation of a color by a given factor.","element":false,"contextual":false,"deprecation":null,"details":"

Decreases the saturation of a color by a given factor.

","example":null,"self":true,"params":[{"name":"factor","details":"

The factor to desaturate the color by.

","example":null,"types":["ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false}],"returns":["color"],"scope":[]},{"path":["color"],"name":"negate","title":"Negate","keywords":[],"oneliner":"Produces the complementary color using a provided color space.","element":false,"contextual":false,"deprecation":null,"details":"

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

","example":"
#square(fill: yellow)\n#square(fill: yellow.negate())\n#square(fill: yellow.negate(space: rgb))\n
\"Preview\"
","self":true,"params":[{"name":"space","details":"

The color space used for the transformation. By default, a perceptual color space is used.

","example":null,"types":["any"],"strings":[],"default":"oklab","positional":false,"named":true,"required":false,"variadic":false,"settable":false}],"returns":["color"],"scope":[]},{"path":["color"],"name":"rotate","title":"Rotate","keywords":[],"oneliner":"Rotates the hue of the color by a given angle.","element":false,"contextual":false,"deprecation":null,"details":"

Rotates the hue of the color by a given angle.

","example":null,"self":true,"params":[{"name":"angle","details":"

The angle to rotate the hue by.

","example":null,"types":["angle"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"space","details":"

The color space used to rotate. By default, this happens in a perceptual\ncolor space (oklch).

","example":null,"types":["any"],"strings":[],"default":"oklch","positional":false,"named":true,"required":false,"variadic":false,"settable":false}],"returns":["color"],"scope":[]},{"path":["color"],"name":"mix","title":"Mix","keywords":[],"oneliner":"Create a color by mixing two or more colors.","element":false,"contextual":false,"deprecation":null,"details":"

Create a color by mixing two or more colors.

\n

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

","example":"
#set block(height: 20pt, width: 100%)\n#block(fill: red.mix(blue))\n#block(fill: red.mix(blue, space: rgb))\n#block(fill: color.mix(red, blue, white))\n#block(fill: color.mix((red, 70%), (blue, 30%)))\n
\"Preview\"
","self":false,"params":[{"name":"colors","details":"

The colors, optionally with weights, specified as a pair (array of\nlength two) of color and weight (float or ratio).

\n

The weights do not need to add to 100%, they are relative to the\nsum of all weights.

","example":null,"types":["color","array"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":true,"settable":false},{"name":"space","details":"

The color space to mix in. By default, this happens in a perceptual\ncolor space (oklab).

","example":null,"types":["any"],"strings":[],"default":"oklab","positional":false,"named":true,"required":false,"variadic":false,"settable":false}],"returns":["color"],"scope":[]},{"path":["color"],"name":"transparentize","title":"Transparentize","keywords":[],"oneliner":"Makes a color more transparent by a given factor.","element":false,"contextual":false,"deprecation":null,"details":"

Makes a color more transparent by a given factor.

\n

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

","example":"
#block(fill: red)[opaque]\n#block(fill: red.transparentize(50%))[half red]\n#block(fill: red.transparentize(75%))[quarter red]\n
\"Preview\"
","self":true,"params":[{"name":"scale","details":"

The factor to change the alpha value by.

","example":null,"types":["ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false}],"returns":["color"],"scope":[]},{"path":["color"],"name":"opacify","title":"Opacify","keywords":[],"oneliner":"Makes a color more opaque by a given scale.","element":false,"contextual":false,"deprecation":null,"details":"

Makes a color more opaque by a given scale.

\n

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

","example":"
#let half-red = red.transparentize(50%)\n#block(fill: half-red.opacify(100%))[opaque]\n#block(fill: half-red.opacify(50%))[three quarters red]\n#block(fill: half-red.opacify(-50%))[one quarter red]\n
\"Preview\"
","self":true,"params":[{"name":"scale","details":"

The scale to change the alpha value by.

","example":null,"types":["ratio"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false}],"returns":["color"],"scope":[]}]}}}