情報アイコン
情報 / Info
当サイトは、Typst GmbHの許諾を得て、日本語コミュニティ「Typst Japan Community」がTypst v0.13.1の公式ドキュメントを翻訳したものです。誤訳や古い情報が含まれている可能性があるため、公式ドキュメントとの併用を推奨します。翻訳の改善やサイトの機能向上について、GitHubでのIssueやPull Requestを歓迎します。コミュニティにご興味のある方はDiscordサーバー「くみはんクラブ」にぜひご参加ください。
This site provides a Japanese translation of the Typst v0.13.1 documentation maintained by the "Typst Japan Community" with permission from Typst GmbH. We recommend using this alongside the official documentation. We welcome contributions through Issues and Pull Requests on our GitHub repository for both translation improvements and website enhancements. Feel free to join our Discord server "Kumihan Club".
言語アイコン
未翻訳

このページはまだ翻訳されていません。原文の内容が表示されています。

color

A color in a specific color space.

Typst supports:

Example

#rect(fill: aqua)
Preview

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

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!

定義
ヘルプアイコン

luma

Create a grayscale color.

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

These components are also available using the components method.

color.luma()->
右矢印アイコン
例を表示
#for x in range(250, step: 50) {
  box(square(fill: luma(x)))
}
Preview

lightness
Required
ヘルプアイコン
Positional
ヘルプアイコン

The lightness component.

alpha
Required
ヘルプアイコン
Positional
ヘルプアイコン

The alpha component.

color
Required
ヘルプアイコン
Positional
ヘルプアイコン

Alternatively: The color to convert to grayscale.

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

oklab

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.

右矢印アイコン
例を表示
#square(
  fill: oklab(27%, 20%, -3%, 50%)
)
Preview

lightness
Required
ヘルプアイコン
Positional
ヘルプアイコン

The lightness component.

a
Required
ヘルプアイコン
Positional
ヘルプアイコン

The a ("green/red") component.

b
Required
ヘルプアイコン
Positional
ヘルプアイコン

The b ("blue/yellow") component.

alpha
Required
ヘルプアイコン
Positional
ヘルプアイコン

The alpha component.

color
Required
ヘルプアイコン
Positional
ヘルプアイコン

Alternatively: The color to convert to Oklab.

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

oklch

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.

右矢印アイコン
例を表示
#square(
  fill: oklch(40%, 0.2, 160deg, 50%)
)
Preview

lightness
Required
ヘルプアイコン
Positional
ヘルプアイコン

The lightness component.

chroma
Required
ヘルプアイコン
Positional
ヘルプアイコン

The chroma component.

hue
Required
ヘルプアイコン
Positional
ヘルプアイコン

The hue component.

alpha
Required
ヘルプアイコン
Positional
ヘルプアイコン

The alpha component.

color
Required
ヘルプアイコン
Positional
ヘルプアイコン

Alternatively: The color to convert to Oklch.

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

linear-rgb

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.

右矢印アイコン
例を表示
#square(fill: color.linear-rgb(
  30%, 50%, 10%,
))
Preview

red
Required
ヘルプアイコン
Positional
ヘルプアイコン

The red component.

green
Required
ヘルプアイコン
Positional
ヘルプアイコン

The green component.

blue
Required
ヘルプアイコン
Positional
ヘルプアイコン

The blue component.

alpha
Required
ヘルプアイコン
Positional
ヘルプアイコン

The alpha component.

color
Required
ヘルプアイコン
Positional
ヘルプアイコン

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

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

rgb

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.

右矢印アイコン
例を表示
#square(fill: rgb("#b1f2eb"))
#square(fill: rgb(87, 127, 230))
#square(fill: rgb(25%, 13%, 65%))
Preview

red
Required
ヘルプアイコン
Positional
ヘルプアイコン

The red component.

green
Required
ヘルプアイコン
Positional
ヘルプアイコン

The green component.

blue
Required
ヘルプアイコン
Positional
ヘルプアイコン

The blue component.

alpha
Required
ヘルプアイコン
Positional
ヘルプアイコン

The alpha component.

hex
Required
ヘルプアイコン
Positional
ヘルプアイコン

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.

右矢印アイコン
例を表示
#text(16pt, rgb("#239dad"))[
  *Typst*
]
Preview

color
Required
ヘルプアイコン
Positional
ヘルプアイコン

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

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

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.

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.

右矢印アイコン
例を表示
#square(
  fill: cmyk(27%, 0%, 3%, 5%)
)
Preview

cyan
Required
ヘルプアイコン
Positional
ヘルプアイコン

The cyan component.

magenta
Required
ヘルプアイコン
Positional
ヘルプアイコン

The magenta component.

yellow
Required
ヘルプアイコン
Positional
ヘルプアイコン

The yellow component.

key
Required
ヘルプアイコン
Positional
ヘルプアイコン

The key component.

color
Required
ヘルプアイコン
Positional
ヘルプアイコン

Alternatively: The color to convert to CMYK.

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

hsl

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.

右矢印アイコン
例を表示
#square(
  fill: color.hsl(30deg, 50%, 60%)
)
Preview

hue
Required
ヘルプアイコン
Positional
ヘルプアイコン

The hue angle.

saturation
Required
ヘルプアイコン
Positional
ヘルプアイコン

The saturation component.

lightness
Required
ヘルプアイコン
Positional
ヘルプアイコン

The lightness component.

alpha
Required
ヘルプアイコン
Positional
ヘルプアイコン

The alpha component.

color
Required
ヘルプアイコン
Positional
ヘルプアイコン

Alternatively: The color to convert to HSL.

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

hsv

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.

右矢印アイコン
例を表示
#square(
  fill: color.hsv(30deg, 50%, 60%)
)
Preview

hue
Required
ヘルプアイコン
Positional
ヘルプアイコン

The hue angle.

saturation
Required
ヘルプアイコン
Positional
ヘルプアイコン

The saturation component.

value
Required
ヘルプアイコン
Positional
ヘルプアイコン

The value component.

alpha
Required
ヘルプアイコン
Positional
ヘルプアイコン

The alpha component.

color
Required
ヘルプアイコン
Positional
ヘルプアイコン

Alternatively: The color to convert to HSL.

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

components

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

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.

self.components()->
右矢印アイコン
例を表示
// note that the alpha component is included by default
#rgb(40%, 60%, 80%).components()
Preview

alpha

Whether to include the alpha component.

デフォルト値:

true

space

Returns the constructor function for this color's space:

self.space(
)->
any
右矢印アイコン
例を表示
#let color = cmyk(1%, 2%, 3%, 4%)
#(color.space() == 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(
)->

lighten

Lightens a color by a given factor.

self.lighten()->

factor
Required
ヘルプアイコン
Positional
ヘルプアイコン

The factor to lighten the color by.

darken

Darkens a color by a given factor.

self.darken()->

factor
Required
ヘルプアイコン
Positional
ヘルプアイコン

The factor to darken the color by.

saturate

Increases the saturation of a color by a given factor.

self.saturate()->

factor
Required
ヘルプアイコン
Positional
ヘルプアイコン

The factor to saturate the color by.

desaturate

Decreases the saturation of a color by a given factor.

self.desaturate()->

factor
Required
ヘルプアイコン
Positional
ヘルプアイコン

The factor to desaturate the color by.

negate

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

self.negate()->
右矢印アイコン
例を表示
#square(fill: yellow)
#square(fill: yellow.negate())
#square(fill: yellow.negate(space: rgb))
Preview

space
any

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

デフォルト値:

oklab

rotate

Rotates the hue of the color by a given angle.

self.rotate()->

angle
Required
ヘルプアイコン
Positional
ヘルプアイコン

The angle to rotate the hue by.

space
any

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

デフォルト値:

oklch

mix

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!

color.mix()->
右矢印アイコン
例を表示
#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%)))
Preview

colors
Required
ヘルプアイコン
Positional
ヘルプアイコン
Variadic
ヘルプアイコン

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
any

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

デフォルト値:

oklab

transparentize

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

self.transparentize()->
右矢印アイコン
例を表示
#block(fill: red)[opaque]
#block(fill: red.transparentize(50%))[half red]
#block(fill: red.transparentize(75%))[quarter red]
Preview

scale
Required
ヘルプアイコン
Positional
ヘルプアイコン

The factor to change the alpha value by.

opacify

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

self.opacify()->
右矢印アイコン
例を表示
#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]
Preview

scale
Required
ヘルプアイコン
Positional
ヘルプアイコン

The scale to change the alpha value by.

検索