colorDesde: siempre
Un color en un espacio de color específico.
Typst admite:
- sRGB mediante la función
rgb - CMYK de dispositivo mediante la función
cmyk - Gris D65 mediante la función
luma - Oklab mediante la función
oklab - Oklch mediante la función
oklch - RGB lineal mediante la función
color.linear-rgb - HSL mediante la función
color.hsl - HSV mediante la función
color.hsv - Espacios de color descritos por colorantes planos (spot) mediante el tipo
color.spot
Todos los espacios de color, excepto CMYK y los colorantes planos, tienen canales alfa.
En toda la documentación usamos el término color de proceso para los colores que se pueden mezclar entre sí (actualmente todos los colores que no son colores planos). En este término, proceso significa que el tono se crea durante el proceso de impresión y no de antemano.
Ejemplo
#rect(fill: aqua)
Colores predefinidos
Typst define los siguientes colores incorporados:
| Color | Definición |
|---|---|
black | luma(0) |
gray | luma(170) |
silver | luma(221) |
white | luma(255) |
navy | rgb("#001f3f") |
blue | rgb("#0074d9") |
aqua | rgb("#7fdbff") |
teal | rgb("#39cccc") |
eastern | rgb("#239dad") |
purple | rgb("#b10dc9") |
fuchsia | rgb("#f012be") |
maroon | rgb("#85144b") |
red | rgb("#ff4136") |
orange | rgb("#ff851b") |
yellow | rgb("#ffdc00") |
olive | rgb("#3d9970") |
green | rgb("#2ecc40") |
lime | rgb("#01ff70") |
Los colores predefinidos y los constructores de color más importantes están disponibles globalmente y también en el ámbito del tipo color, así que podés escribir color.red o simplemente red.
Constantes
mapmoduleDesde: 0.9.0
Una colección de mapas de color predefinidos que se pueden usar para los degradados. Son simplemente arrays de colores.
Ver ejemplo
#circle(fill: gradient.linear(..color.map.crest))
| Mapa | Detalles |
|---|---|
turbo | Un mapa de color tipo arcoíris perceptualmente uniforme. Leé esta entrada de blog para más detalles. |
cividis | Un mapa de color de azul a gris a amarillo. Mirá esta entrada de blog para más detalles. |
rainbow | Recorre todo el espectro de colores. Este mapa de color se usa mejor estableciendo el espacio de color de interpolación en HSL. El degradado arcoíris no es adecuado para la visualización de datos porque no es perceptualmente uniforme, por lo que las diferencias entre valores se vuelven poco claras para tus lectores. Solo debe usarse con fines decorativos. |
spectral | Mapa de color de rojo a amarillo a azul. |
viridis | Un mapa de color de violeta a verde azulado a amarillo. |
inferno | Un mapa de color de negro a rojo a amarillo. |
magma | Un mapa de color de negro a violeta a amarillo. |
plasma | Un mapa de color de violeta a rosa a amarillo. |
rocket | Un mapa de color de negro a rojo a blanco. |
mako | Un mapa de color de negro a verde azulado a blanco. |
coolwarm | Un mapa de color de azul a blanco a rojo con transiciones suaves. |
vlag | Un mapa de color de azul claro a blanco a rojo. |
icefire | Un mapa de color de verde azulado claro a negro a naranja. |
flare | Un mapa de color de naranja a violeta que es perceptualmente uniforme. |
crest | Un mapa de color de verde claro a azul. |
Algunos preajustes populares no se incluyen porque no están disponibles bajo una licencia libre. Otros, como Jet, no se incluyen porque no son amigables para personas con daltonismo. ¡Sentite libre de usar o crear un paquete con otros preajustes que te resulten útiles!
Funciones
lumaDesde: siempre
Crea un color en escala de grises.
Un color en escala de grises se representa con los componentes lightness (ratio) y alpha (ratio).
Estos componentes también están disponibles con el método components.
Ver ejemplo
#for x in range(250, step: 50) {
box(square(fill: luma(x)))
}
lightness
El componente de luminosidad.
alpha
El componente alfa.
color
Alternativamente: el color que se convierte a escala de grises.
Si se da, no se deben dar los componentes individuales.
oklabDesde: 0.9.0
Crea un color Oklab.
Este espacio de color es muy adecuado para los siguientes casos de uso:
- Manipulación de colores, como saturar manteniendo el tono percibido
- Crear imágenes en escala de grises con luminosidad percibida uniforme
- Crear transiciones de color y degradados suaves y uniformes
Un color Oklab lineal se representa internamente con un array de cuatro componentes:
- luminosidad (
ratio) - a (
floatoratio. Las proporciones son relativas a0.4; es decir,50%es igual a0.2) - b (
floatoratio. Las proporciones son relativas a0.4; es decir,50%es igual a0.2) - alfa (
ratio)
Estos componentes también están disponibles con el método components.
Ver ejemplo
#square(
fill: oklab(27%, 20%, -3%, 50%)
)
lightness
El componente de luminosidad.
a
El componente a (“verde/rojo”).
b
El componente b (“azul/amarillo”).
alpha
El componente alfa.
color
Alternativamente: el color que se convierte a Oklab.
Si se da, no se deben dar los componentes individuales.
oklchDesde: 0.10.0
Crea un color Oklch.
Este espacio de color es muy adecuado para los siguientes casos de uso:
- Manipulación de colores que involucra luminosidad, croma y tono
- Crear imágenes en escala de grises con luminosidad percibida uniforme
- Crear transiciones de color y degradados suaves y uniformes
Un color Oklch lineal se representa internamente con un array de cuatro componentes:
- luminosidad (
ratio) - croma (
floatoratio. Las proporciones son relativas a0.4; es decir,50%es igual a0.2) - tono (
angle) - alfa (
ratio)
Estos componentes también están disponibles con el método components.
Ver ejemplo
#square(
fill: oklch(40%, 0.2, 160deg, 50%)
)
lightness
El componente de luminosidad.
chroma
El componente de croma.
hue
El componente de tono.
alpha
El componente alfa.
color
Alternativamente: el color que se convierte a Oklch.
Si se da, no se deben dar los componentes individuales.
linear-rgbDesde: 0.9.0
Crea un color RGB(A) con luma lineal.
Este espacio de color es similar a sRGB, pero con la diferencia de que los componentes de color no tienen corrección gamma. Esto facilita realizar operaciones de color como la mezcla y la interpolación. Aunque, para eso deberías preferir la función oklab.
Un color RGB(A) lineal se representa internamente con un array de cuatro componentes:
Estos componentes también están disponibles con el método components.
Ver ejemplo
#square(fill: color.linear-rgb(
30%, 50%, 10%,
))
red
El componente rojo.
green
El componente verde.
blue
El componente azul.
alpha
El componente alfa.
color
Alternativamente: el color que se convierte a RGB(A) lineal.
Si se da, no se deben dar los componentes individuales.
rgbDesde: siempre
Crea un color RGB(A).
El color se especifica en el espacio de color sRGB.
Un color RGB(A) se representa internamente con un array de cuatro componentes:
Estos componentes también están disponibles con el método components.
Ver ejemplo
#square(fill: rgb("#b1f2eb"))
#square(fill: rgb(87, 127, 230))
#square(fill: rgb(25%, 13%, 65%))
red
El componente rojo.
green
El componente verde.
blue
El componente azul.
alpha
El componente alfa.
hex
Alternativamente: el color en notación hexadecimal.
Acepta tres, cuatro, seis u ocho dígitos hexadecimales y, opcionalmente, un numeral inicial.
Si se da, no se deben dar los componentes individuales.
Ver ejemplo
#text(16pt, rgb("#239dad"))[
*Typst*
]
color
Alternativamente: el color que se convierte a RGB(a).
Si se da, no se deben dar los componentes individuales.
cmykDesde: siempre
Crea un color CMYK.
Es útil si querés apuntar a una impresora específica. La conversión a RGB para la vista previa en pantalla puede diferir de cómo tu impresora reproduce el color.
Un color CMYK se representa internamente con un array de cuatro componentes:
Estos componentes también están disponibles con el método components.
Tené en cuenta que los colores CMYK actualmente no se admiten cuando la salida PDF/A está habilitada.
Ver ejemplo
#square(
fill: cmyk(27%, 0%, 3%, 5%)
)
cyan
El componente cian.
magenta
El componente magenta.
yellow
El componente amarillo.
key
El componente clave (negro).
color
Alternativamente: el color que se convierte a CMYK.
Si se da, no se deben dar los componentes individuales.
hslDesde: 0.9.0
Crea un color HSL.
Este espacio de color es útil para especificar colores por tono, saturación y luminosidad. También es útil para la manipulación de colores, como saturar manteniendo el tono percibido.
Un color HSL se representa internamente con un array de cuatro componentes:
Estos componentes también están disponibles con el método components.
Ver ejemplo
#square(
fill: color.hsl(30deg, 50%, 60%)
)
hue
El ángulo de tono.
saturation
El componente de saturación.
lightness
El componente de luminosidad.
alpha
El componente alfa.
color
Alternativamente: el color que se convierte a HSL.
Si se da, no se deben dar los componentes individuales.
hsvDesde: 0.9.0
Crea un color HSV.
Este espacio de color es útil para especificar colores por tono, saturación y valor. También es útil para la manipulación de colores, como saturar manteniendo el tono percibido.
Un color HSV se representa internamente con un array de cuatro componentes:
Estos componentes también están disponibles con el método components.
Ver ejemplo
#square(
fill: color.hsv(30deg, 50%, 60%)
)
hue
El ángulo de tono.
saturation
El componente de saturación.
value
El componente de valor.
alpha
El componente alfa.
color
Alternativamente: el color que se convierte a HSL.
Si se da, no se deben dar los componentes individuales.
componentsDesde: 0.9.0
Extrae los componentes de este color.
El tamaño y los valores de este array dependen del espacio de color. Podés obtener el espacio de color con space. A continuación hay una tabla de los espacios de color y sus componentes:
| Espacio de color | C1 | C2 | C3 | C4 |
|---|---|---|---|---|
luma | Luminosidad | |||
oklab | Luminosidad | a | b | Alfa |
oklch | Luminosidad | Croma | Tono | Alfa |
linear-rgb | Rojo | Verde | Azul | Alfa |
rgb | Rojo | Verde | Azul | Alfa |
cmyk | Cian | Magenta | Amarillo | Clave |
hsl | Tono | Saturación | Luminosidad | Alfa |
hsv | Tono | Saturación | Valor | Alfa |
spot | Tinte |
Para el significado y el tipo de cada valor individual, mirá la documentación del espacio de color correspondiente. El componente alfa es opcional y solo se incluye si el argumento alpha es true. La longitud del array devuelto depende de la cantidad de componentes y de si se incluye el componente alfa.
Ver ejemplo
// note that the alpha component is included by default
#rgb(40%, 60%, 80%).components()
alphaPor defecto: true
Si se incluye el componente alfa.
spaceDesde: 0.9.0
Devuelve la función constructora del espacio de este color.
Devuelve una de las siguientes:
Ver ejemplo
#let color = cmyk(1%, 2%, 3%, 4%)
#(color.space() == cmyk)
to-hexDesde: 0.9.0
Devuelve la representación hexadecimal RGB(A) del color (como #ffaa32 o #020304fe). El componente alfa (los dos últimos dígitos en #020304fe) se omite si es igual a ff (255 / 100%).
lightenDesde: siempre
Aclara un color según un factor dado.
factor
El factor por el que se aclara el color.
darkenDesde: siempre
Oscurece un color según un factor dado.
factor
El factor por el que se oscurece el color.
saturateDesde: 0.9.0
Aumenta la saturación de un color según un factor dado.
Solo se pueden saturar los colores de proceso. Si querés saturar un color plano, convertilo primero en un color de proceso.
factor
El factor por el que se satura el color.
desaturateDesde: 0.9.0
Disminuye la saturación de un color según un factor dado.
Solo se pueden desaturar los colores de proceso. Si querés desaturar un color plano, convertilo primero en un color de proceso.
factor
El factor por el que se desatura el color.
negateDesde: siempre
Produce el color complementario usando un espacio de color dado. Podés pensarlo como el lado opuesto en una rueda de colores.
Ver ejemplo
#square(fill: yellow)
#square(fill: yellow.negate())
#square(fill: yellow.negate(space: rgb))
spacePor defecto: auto
El espacio de color que se usa para la transformación. Por defecto se usa un espacio de color perceptual.
rotateDesde: 0.9.0
Rota el tono del color según un ángulo dado.
Esta función solo funciona en modelos de color con un componente de tono bien definido, es decir, Oklch, HSL y HSV.
angle
El ángulo por el que se rota el tono.
spaceanyPor defecto: oklch
El espacio de color que se usa para rotar. Por defecto, esto ocurre en un espacio de color perceptual (oklch).
mixDesde: 0.7.0
Crea un color mezclando dos o más colores.
En los espacios de color con un componente de tono (HSL, HSV, Oklch), solo se pueden mezclar dos colores a la vez. ¡Mezclar más de dos colores en un espacio así producirá un error!
Ver ejemplo
#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%)))
colors
Los colores, opcionalmente con pesos, especificados como un par (array de longitud dos) de color y peso (flotante o proporción).
Los pesos no necesitan sumar 100%, son relativos a la suma de todos los pesos.
spacePor defecto: auto
El espacio de color en el que se mezcla. Por defecto, esto ocurre en un espacio de color perceptual (oklab) o, si todos los colores usan el mismo colorante plano, usando ese colorante.
Todos los colores se convertirán a este espacio de color.
transparentizeDesde: 0.11.0
Vuelve un color más transparente según un factor dado.
Este método es relativo al valor alfa existente. Si la escala es positiva, calcula alpha - alpha * scale. Las escalas negativas se comportan como color.opacify(-scale).
Ver ejemplo
#block(fill: red)[opaque]
#block(fill: red.transparentize(50%))[half red]
#block(fill: red.transparentize(75%))[quarter red]
scale
El factor por el que se cambia el valor alfa.
opacifyDesde: 0.11.0
Vuelve un color más opaco según una escala dada.
Este método es relativo al valor alfa existente. Si la escala es positiva, calcula alpha + scale - alpha * scale. Las escalas negativas se comportan como color.transparentize(-scale).
Ver ejemplo
#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]
scale
La escala por la que se cambia el valor alfa.
Tipos
spotDesde: 0.15.0
Un colorante plano (spot) a partir del cual se pueden crear colores planos.
Usá colores planos para solicitar un pigmento preciso en un entorno de impresión profesional. Una vez que creaste un colorante plano, podés crear colores con su método tint.
Constructor
Crea un colorante plano nuevo.
name
Nombre del colorante plano que se usa.
En producción, este nombre se verificará manualmente y se asociará a un colorante, por lo que este valor debe ser inequívoco. Lo mejor es hacer referencia a un color de un registro como PANTONE, HKS, RAL, Toyo & DIC, etcétera.
Los valores acá pueden tratarse distinguiendo mayúsculas de minúsculas durante la producción: "PANTONE 2221 C" y "PANTONE 2221 c" pueden tratarse como colores distintos. Asegurate de usar una convención de nombres consistente, ya sea haciendo referencia a un registro o coordinando con tus expertos de impresión de producción.
Si este valor es "all" y tu impresión involucrará varias planchas de color, el uso de este colorante dará como resultado que el tinte especificado se aplique por igual a todas las planchas. Si elegís none, no se aplicará ningún colorante al usar este color. Este valor especial suele usarse para indicar cortes o barnices. ¡Asegurate de consultarlo con tu imprenta de producción!
No recomendamos usar los nombres "Cyan", "Magenta", "Yellow", "Key", "Black" ni sus traducciones a tu idioma local. Según tu impresora, pueden o no interpretarse como colores de proceso CMYK.
| Variante | Detalles |
|---|---|
"all" | Usa todas las placas de color disponibles en lugar de un solo colorante. |
fallback
Cómo renderizar este color si el colorante especificado no está disponible.
Muchos medios, como la vista previa en pantalla y las impresoras domésticas, no tendrán disponible este colorante plano específico. Para mostrar una aproximación de la impresión prevista, se usa en su lugar otro color disponible.
Funciones en spot
tintDesde: 0.15.0
Crea un color plano en un tinte específico de este colorante.
El tinte representa qué porcentaje del colorante se aplica. Un tinte de 100% significa que el colorante se aplica a plena intensidad, mientras que 0% significa que no se aplica colorante.
Ver ejemplo
#let pantone = color.spot(
"PANTONE 2221 C",
rgb("#239dad")
)
#square(fill: pantone.tint(100%))
#square(fill: pantone.tint(70%))
#square(fill: pantone.tint(40%))
value
El porcentaje de tinte, entre 0% y 100%.