TypstDocumentation

color

A color in a specific color space.

Typst supports:

Typst provides the following built-in colors:

black, gray, silver, white, navy, blue, aqua, teal, eastern, purple, fuchsia, maroon, red, orange, yellow, olive, green, and lime.

Example

The predefined colors and the color constructors are available globally and also in the color type's scope, so you can write either of the following two:

#rect(fill: aqua)
#rect(fill: color.aqua)
Preview

Definitions
Question mark

luma

Create a grayscale color.

color.luma() -> color
#for x in range(250, step: 50) {
  box(square(fill: luma(x)))
}
Preview

gray
int or ratio
RequiredPositional
Question mark

The gray component.

rgb

Create an RGB(A) color.

The color is specified in the sRGB color space.

#square(fill: rgb("#b1f2eb"))
#square(fill: rgb(87, 127, 230))
#square(fill: rgb(25%, 13%, 65%))
Preview

hex
str
RequiredPositional
Question mark

The color in hexadecimal notation.

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

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

View example
#text(16pt, rgb("#239dad"))[
  *Typst*
]
Preview

red
int or ratio
RequiredPositional
Question mark

The red component.

green
int or ratio
RequiredPositional
Question mark

The green component.

blue
int or ratio
RequiredPositional
Question mark

The blue component.

alpha
int or ratio
RequiredPositional
Question mark

The alpha component.

cmyk

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.

color.cmyk() -> color
#square(
  fill: cmyk(27%, 0%, 3%, 5%)
)
Preview

cyan
ratio
RequiredPositional
Question mark

The cyan component.

magenta
ratio
RequiredPositional
Question mark

The magenta component.

yellow
ratio
RequiredPositional
Question mark

The yellow component.

key
ratio
RequiredPositional
Question mark

The key component.

kind

Returns the constructor function for this color's kind (rgb, cmyk or luma).

self.kind(
) -> function
#let color = cmyk(1%, 2%, 3%, 4%)
#(color.kind() == cmyk)
Preview

to-hex

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

to-rgba

Converts this color to sRGB and returns its components (R, G, B, A) as an array of integers.

self.to-rgba(
) -> array

to-cmyk

Converts this color to Digital CMYK and returns its components (C, M, Y, K) as an array of ratios. Note that this function will throw an error when applied to an rgb color, since its conversion to CMYK is not available.

self.to-cmyk(
) -> array

to-luma

If this color was created with luma, returns the integer value used on construction. Otherwise (for rgb and cmyk colors), throws an error.

self.to-luma(
) -> int

lighten

Lightens a color by a given factor.

self.lighten() -> color

factor
ratio
RequiredPositional
Question mark

The factor to lighten the color by.

darken

Darkens a color by a given factor.

self.darken() -> color

factor
ratio
RequiredPositional
Question mark

The factor to darken the color by.

negate

Produces the negative of the color.

self.negate(
) -> color

mix

Create a color by mixing two or more colors.

color.mix() -> color
#set block(height: 20pt, width: 100%)
#block(fill: red.mix(blue))
#block(fill: red.mix(blue, space: "srgb"))
#block(fill: color.mix(red, blue, white))
#block(fill: color.mix((red, 70%), (blue, 30%)))
Preview

colors
color or array
RequiredPositional
Question mark
Variadic
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
string

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

Default: "oklab"