Development build 586e1bd4
Typst文档简体中文版v0.15.1 + dev 586e1bd4

color自始可用Go to source

A color in a specific color space.

Typst supports:

All color spaces except for CMYK and spot colorants have alpha channels.

Throughout the documentation, we use the term process color for colors that can be blended with each other (currently all colors other than spot colors). In this term, process signifies that the shade is being created throughout the printing process instead of ahead of time.

Example

#rect(fill: aqua)

Predefined colors

Typst defines the following built-in colors:

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")

The predefined colors and the most important color constructors are available globally and also in the color type’s scope, so you can write either color.red or just red.

Predefined color maps

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

#circle(fill: gradient.linear(..color.map.crest))
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 white color map.
coolwarmA blue to white to red color map with smooth transitions.
vlagA light blue to white to red color map.
icefireA light teal to black to orange color map.
flareA orange to purple color map that is perceptually uniform.
crestA light green to blue color map.

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

定义
Question mark

luma自始可用Go to source

Create a grayscale color.

A grayscale color is represented by lightness (ratio) and alpha (ratio) components.

These components are also available using the components method.

Expand展开示例
#for x in range(250, step: 50) { box(square(fill: luma(x))) }
color.luma() → color

lightness
int or ratio
必需参数
Question mark
位置参数
Question mark

The lightness component.

alpha
int or ratio
必需参数
Question mark
位置参数
Question mark

The alpha component.

color
color
必需参数
Question mark
位置参数
Question mark

Alternatively: The color to convert to grayscale.

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

oklab0.9.0起可用Go to source

Create an Oklab color.

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

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

These components are also available using the components method.

Expand展开示例
#square( fill: oklab(27%, 20%, -3%, 50%) )

lightness
ratio
必需参数
Question mark
位置参数
Question mark

The lightness component.

a
float or ratio
必需参数
Question mark
位置参数
Question mark

The a (“green/red”) component.

b
float or ratio
必需参数
Question mark
位置参数
Question mark

The b (“blue/yellow”) component.

alpha
ratio
必需参数
Question mark
位置参数
Question mark

The alpha component.

color
color
必需参数
Question mark
位置参数
Question mark

Alternatively: The color to convert to Oklab.

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

oklch0.10.0起可用Go to source

Create an Oklch color.

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

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

These components are also available using the components method.

Expand展开示例
#square( fill: oklch(40%, 0.2, 160deg, 50%) )

lightness
ratio
必需参数
Question mark
位置参数
Question mark

The lightness component.

chroma
float or ratio
必需参数
Question mark
位置参数
Question mark

The chroma component.

hue
angle
必需参数
Question mark
位置参数
Question mark

The hue component.

alpha
ratio
必需参数
Question mark
位置参数
Question mark

The alpha component.

color
color
必需参数
Question mark
位置参数
Question mark

Alternatively: The color to convert to Oklch.

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

linear-rgb0.9.0起可用Go to source

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:

These components are also available using the components method.

Expand展开示例
#square(fill: color.linear-rgb( 30%, 50%, 10%, ))
color.linear-rgb() → color

red
int or ratio
必需参数
Question mark
位置参数
Question mark

The red component.

green
int or ratio
必需参数
Question mark
位置参数
Question mark

The green component.

blue
int or ratio
必需参数
Question mark
位置参数
Question mark

The blue component.

alpha
int or ratio
必需参数
Question mark
位置参数
Question mark

The alpha component.

color
color
必需参数
Question mark
位置参数
Question mark

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

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

rgb自始可用Go to source

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:

These components are also available using the components method.

Expand展开示例
#square(fill: rgb("#b1f2eb")) #square(fill: rgb(87, 127, 230)) #square(fill: rgb(25%, 13%, 65%))

red
int or ratio
必需参数
Question mark
位置参数
Question mark

The red component.

green
int or ratio
必需参数
Question mark
位置参数
Question mark

The green component.

blue
int or ratio
必需参数
Question mark
位置参数
Question mark

The blue component.

alpha
int or ratio
必需参数
Question mark
位置参数
Question mark

The alpha component.

hex
str
必需参数
Question mark
位置参数
Question mark

Alternatively: The color in hexadecimal notation.

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

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

Expand展开示例
#text(16pt, rgb("#239dad"))[ *Typst* ]

color
color
必需参数
Question mark
位置参数
Question mark

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

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

cmyk自始可用Go to source

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:

These components are also available using the components method.

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

Expand展开示例
#square( fill: cmyk(27%, 0%, 3%, 5%) )
color.cmyk() → color

cyan
ratio
必需参数
Question mark
位置参数
Question mark

The cyan component.

magenta
ratio
必需参数
Question mark
位置参数
Question mark

The magenta component.

yellow
ratio
必需参数
Question mark
位置参数
Question mark

The yellow component.

key
ratio
必需参数
Question mark
位置参数
Question mark

The key component.

color
color
必需参数
Question mark
位置参数
Question mark

Alternatively: The color to convert to CMYK.

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

hsl0.9.0起可用Go to source

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:

These components are also available using the components method.

Expand展开示例
#square( fill: color.hsl(30deg, 50%, 60%) )

hue
angle
必需参数
Question mark
位置参数
Question mark

The hue angle.

saturation
int or ratio
必需参数
Question mark
位置参数
Question mark

The saturation component.

lightness
int or ratio
必需参数
Question mark
位置参数
Question mark

The lightness component.

alpha
int or ratio
必需参数
Question mark
位置参数
Question mark

The alpha component.

color
color
必需参数
Question mark
位置参数
Question mark

Alternatively: The color to convert to HSL.

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

hsv0.9.0起可用Go to source

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:

These components are also available using the components method.

Expand展开示例
#square( fill: color.hsv(30deg, 50%, 60%) )

hue
angle
必需参数
Question mark
位置参数
Question mark

The hue angle.

saturation
int or ratio
必需参数
Question mark
位置参数
Question mark

The saturation component.

value
int or ratio
必需参数
Question mark
位置参数
Question mark

The value component.

alpha
int or ratio
必需参数
Question mark
位置参数
Question mark

The alpha component.

color
color
必需参数
Question mark
位置参数
Question mark

Alternatively: The color to convert to HSL.

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

components0.9.0起可用Go to source

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:

Color spaceC1C2C3C4
lumaLightness
oklabLightnessabAlpha
oklchLightnessChromaHueAlpha
linear-rgbRedGreenBlueAlpha
rgbRedGreenBlueAlpha
cmykCyanMagentaYellowKey
hslHueSaturationLightnessAlpha
hsvHueSaturationValueAlpha
spotTint

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.

Expand展开示例
// note that the alpha component is included by default #rgb(40%, 60%, 80%).components()
self.components(alpha: bool) → array

alpha默认值:true

Whether to include the alpha component.

space0.9.0起可用Go to source

Returns the constructor function for this color’s space.

Returns one of:

Expand展开示例
#let color = cmyk(1%, 2%, 3%, 4%) #(color.space() == cmyk)
self.space() → spotany

to-hex0.9.0起可用Go to source

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%).

self.to-hex() → str

lighten自始可用Go to source

Lightens a color by a given factor.

self.lighten(ratio) → color

factor
ratio
必需参数
Question mark
位置参数
Question mark

The factor to lighten the color by.

darken自始可用Go to source

Darkens a color by a given factor.

self.darken(ratio) → color

factor
ratio
必需参数
Question mark
位置参数
Question mark

The factor to darken the color by.

saturate0.9.0起可用Go to source

Increases the saturation of a color by a given factor.

Only process colors can be saturated. If you want to saturate a spot color, convert it into a process color first.

self.saturate(ratio) → color

factor
ratio
必需参数
Question mark
位置参数
Question mark

The factor to saturate the color by.

desaturate0.9.0起可用Go to source

Decreases the saturation of a color by a given factor.

Only process colors can be desaturated. If you want to desaturate a spot color, convert it into a process color first.

self.desaturate(ratio) → color

factor
ratio
必需参数
Question mark
位置参数
Question mark

The factor to desaturate the color by.

negate自始可用Go to source

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

Expand展开示例
#square(fill: yellow) #square(fill: yellow.negate()) #square(fill: yellow.negate(space: rgb))
self.negate(space: autospotany) → color

space
auto or spot or any
默认值:auto

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

rotate0.9.0起可用Go to source

Rotates the hue of the color by a given angle.

This function only works on color models with a well-defined hue component, i.e. Oklch, HSL, and HSV.

self.rotate(
angle,space: any,
) → color

angle
angle
必需参数
Question mark
位置参数
Question mark

The angle to rotate the hue by.

space
any
默认值:oklch

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

mix0.7.0起可用Go to source

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!

Expand展开示例
#set block(height: 20pt, width: 100%) #block(fill: red.mix(blue)) #block(fill: red.mix(blue, space: rgb)) #block(fill: color.mix(red, blue, white)) #block(fill: color.mix((red, 70%), (blue, 30%)))
color.mix() → color

colors
color or array
必需参数
Question mark
位置参数
Question mark
变长参数
Question mark

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

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

space
auto or spot or any
默认值:auto

The color space to mix in. By default, this happens in a perceptual color space (oklab) or, if all colors use the same spot colorant, using that colorant.

All colors will be converted into this color space.

transparentize0.11.0起可用Go to source

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).

Expand展开示例
#block(fill: red)[opaque] #block(fill: red.transparentize(50%))[half red] #block(fill: red.transparentize(75%))[quarter red]
self.transparentize(ratio) → color

scale
ratio
必需参数
Question mark
位置参数
Question mark

The factor to change the alpha value by.

opacify0.11.0起可用Go to source

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).

Expand展开示例
#let half-red = red.transparentize(50%) #block(fill: half-red.opacify(100%))[opaque] #block(fill: half-red.opacify(50%))[three quarters red] #block(fill: half-red.opacify(-50%))[one quarter red]
self.opacify(ratio) → color

scale
ratio
必需参数
Question mark
位置参数
Question mark

The scale to change the alpha value by.

spot0.15.0起可用Go to source

A spot colorant from which spot colors can be created.

Use spot colors to request a precise pigment in a professional print environment. Once you have created a spot colorant, you can create colors using its tint method.

构造函数
Question mark
0.15.0起可用Go to source

Create a new spot colorant.

color.spot() → spot
name
none or str
必需参数
Question mark
位置参数
Question mark

Name of the spot colorant to use.

In production, this name will be manually checked and matched to a colorant, so this value needs to be unambiguous. It’s best to reference a color from a registry like PANTONE, HKS, RAL, Toyo & DIC, etc.

Values in here may be treated case-sensitively during production: "PANTONE 2221 C" and "PANTONE 2221 c" may be treated as separate colors. Ensure that you are using a consistent naming convention, either referencing a registry or through coordination with your production printing experts.

If this value is "all" and your print will involve multiple color plates, use of this colorant will result in the specified tint being applied equally to all plates. If you choose none, no colorant will be applied when using this color. This special value is often used to indicate cuts or varnishes. Be sure to discuss this with your production printer!

We do not recommend using the names "Cyan", "Magenta", "Yellow", "Key", "Black", or their translations to your local language. Depending on your printer, they may or may not be interpreted as CMYK process colors.

VariantDetails
"all"Use all available color plates instead of only a specific colorant.
fallback
color
必需参数
Question mark
位置参数
Question mark

How to render this color if the specified colorant is not available.

Many mediums, like on-screen preview and household printers, will not have this specific spot colorant available. To display an approximation of the intended print, another, available color is used instead.

spot上的定义
Question mark

tint0.15.0起可用Go to source

Create a spot color at a specific tint of this colorant.

The tint represents what percentage of the colorant is applied. A tint of 100% means the colorant is applied at full strength, while 0% means no colorant is applied.

Expand展开示例
#let pantone = color.spot( "PANTONE 2221 C", rgb("#239dad") ) #square(fill: pantone.tint(100%)) #square(fill: pantone.tint(70%)) #square(fill: pantone.tint(40%))
self.tint(ratio) → color
value
ratio
必需参数
Question mark
位置参数
Question mark

The tint percentage, between 0% and 100%.