Bun.color(input, outputFormat?) aprovecha el analizador CSS de Bun para analizar, normalizar y convertir colores desde la entrada del usuario a una variedad de formatos de salida, incluyendo:

Formato	Ejemplo
"css"	"red"
"ansi"	"\x1b[38;2;255;0;0m"
"ansi-16"	"\x1b[38;5;\tm"
"ansi-256"	"\x1b[38;5;196m"
"ansi-16m"	"\x1b[38;2;255;0;0m"
"number"	0x1a2b3c
"rgb"	"rgb(255, 99, 71)"
"rgba"	"rgba(255, 99, 71, 0.5)"
"hsl"	"hsl(120, 50%, 50%)"
"hex"	"#1a2b3c"
"HEX"	"#1A2B3C"
"{rgb}"	{ r: 255, g: 99, b: 71 }
"{rgba}"	{ r: 255, g: 99, b: 71, a: 1 }
"[rgb]"	[ 255, 99, 71 ]
"[rgba]"	[ 255, 99, 71, 255]

Hay muchas formas diferentes de usar esta API:

• Validar y normalizar colores para persistir en una base de datos (number es el más amigable para bases de datos)
• Convertir colores a diferentes formatos
• Registro colorido más allá de los 16 colores que muchos usan hoy (usa ansi si no quieres averiguar qué soporta la terminal del usuario, de lo contrario usa ansi-16, ansi-256 o ansi-16m según cuántos colores soporte la terminal)
• Formatear colores para uso en CSS inyectado en HTML
• Obtener los componentes de color r, g, b y a como objetos JavaScript o números desde una cadena de color CSS

Puedes pensar en esto como una alternativa a los populares paquetes de npm color y tinycolor2 excepto con soporte completo para analizar cadenas de color CSS y cero dependencias integrado directamente en Bun.

Entrada flexible

Puedes pasar cualquiera de los siguientes:

• Nombres de color CSS estándar como "red"
• Números como 0xff0000
• Cadenas hex como "#f00"
• Cadenas RGB como "rgb(255, 0, 0)"
• Cadenas RGBA como "rgba(255, 0, 0, 1)"
• Cadenas HSL como "hsl(0, 100%, 50%)"
• Cadenas HSLA como "hsla(0, 100%, 50%, 1)"
• Objetos RGB como { r: 255, g: 0, b: 0 }
• Objetos RGBA como { r: 255, g: 0, b: 0, a: 1 }
• Arrays RGB como [255, 0, 0]
• Arrays RGBA como [255, 0, 0, 255]
• Cadenas LAB como "lab(50% 50% 50%)"
• ... cualquier otra cosa que CSS pueda analizar como un valor de color único

Formatear colores como CSS

El formato "css" produce CSS válido para usar en hojas de estilo, estilos en línea, variables CSS, css-in-js, etc. Devuelve la representación más compacta del color como una cadena.

Bun.color("red", "css"); // "red"
Bun.color(0xff0000, "css"); // "#f000"
Bun.color("#f00", "css"); // "red"
Bun.color("#ff0000", "css"); // "red"
Bun.color("rgb(255, 0, 0)", "css"); // "red"
Bun.color("rgba(255, 0, 0, 1)", "css"); // "red"
Bun.color("hsl(0, 100%, 50%)", "css"); // "red"
Bun.color("hsla(0, 100%, 50%, 1)", "css"); // "red"
Bun.color({ r: 255, g: 0, b: 0 }, "css"); // "red"
Bun.color({ r: 255, g: 0, b: 0, a: 1 }, "css"); // "red"
Bun.color([255, 0, 0], "css"); // "red"
Bun.color([255, 0, 0, 255], "css"); // "red"

Si la entrada es desconocida o no se puede analizar, Bun.color devuelve null.

Formatear colores como ANSI (para terminales)

El formato "ansi" produce códigos de escape ANSI para usar en terminales para hacer texto colorido.

Bun.color("red", "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color(0xff0000, "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color("#f00", "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color("#ff0000", "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color("rgb(255, 0, 0)", "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color("rgba(255, 0, 0, 1)", "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color("hsl(0, 100%, 50%)", "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color("hsla(0, 100%, 50%, 1)", "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color({ r: 255, g: 0, b: 0 }, "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color({ r: 255, g: 0, b: 0, a: 1 }, "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color([255, 0, 0], "ansi"); // "\u001b[38;2;255;0;0m"
Bun.color([255, 0, 0, 255], "ansi"); // "\u001b[38;2;255;0;0m"

Esto obtiene la profundidad de color de stdout y elige automáticamente uno de "ansi-16m", "ansi-256", "ansi-16" basado en las variables de entorno. Si stdout no soporta ninguna forma de color ANSI, devuelve una cadena vacía. Al igual que con el resto de la API de color de Bun, si la entrada es desconocida o no se puede analizar, devuelve null.

Colores ANSI de 24 bits (ansi-16m)

El formato "ansi-16m" produce colores ANSI de 24 bits para usar en terminales para hacer texto colorido. El color de 24 bits significa que puedes mostrar 16 millones de colores en terminales compatibles, y requiere una terminal moderna que lo soporte.

Esto convierte el color de entrada a RGBA, y luego lo produce como un color ANSI.

Bun.color("red", "ansi-16m"); // "\x1b[38;2;255;0;0m"
Bun.color(0xff0000, "ansi-16m"); // "\x1b[38;2;255;0;0m"
Bun.color("#f00", "ansi-16m"); // "\x1b[38;2;255;0;0m"
Bun.color("#ff0000", "ansi-16m"); // "\x1b[38;2;255;0;0m"

256 colores ANSI (ansi-256)

El formato "ansi-256" aproxima el color de entrada al más cercano de los 256 colores ANSI soportados por algunas terminales.

Bun.color("red", "ansi-256"); // "\u001b[38;5;196m"
Bun.color(0xff0000, "ansi-256"); // "\u001b[38;5;196m"
Bun.color("#f00", "ansi-256"); // "\u001b[38;5;196m"
Bun.color("#ff0000", "ansi-256"); // "\u001b[38;5;196m"

Para convertir de RGBA a uno de los 256 colores ANSI, portamos el algoritmo que tmux usa.

16 colores ANSI (ansi-16)

El formato "ansi-16" aproxima el color de entrada al más cercano de los 16 colores ANSI soportados por la mayoría de las terminales.

Bun.color("red", "ansi-16"); // "\u001b[38;5;\tm"
Bun.color(0xff0000, "ansi-16"); // "\u001b[38;5;\tm"
Bun.color("#f00", "ansi-16"); // "\u001b[38;5;\tm"
Bun.color("#ff0000", "ansi-16"); // "\u001b[38;5;\tm"

Esto funciona convirtiendo primero la entrada a un espacio de color RGB de 24 bits, luego a ansi-256, y luego convertimos eso al color ANSI de 16 más cercano.

Formatear colores como números

El formato "number" produce un número de 24 bits para usar en bases de datos, configuración, o cualquier otro caso de uso donde se desee una representación compacta del color.

Bun.color("red", "number"); // 16711680
Bun.color(0xff0000, "number"); // 16711680
Bun.color({ r: 255, g: 0, b: 0 }, "number"); // 16711680
Bun.color([255, 0, 0], "number"); // 16711680
Bun.color("rgb(255, 0, 0)", "number"); // 16711680
Bun.color("rgba(255, 0, 0, 1)", "number"); // 16711680
Bun.color("hsl(0, 100%, 50%)", "number"); // 16711680
Bun.color("hsla(0, 100%, 50%, 1)", "number"); // 16711680

Obtener los canales rojo, verde, azul y alfa

Puedes usar los formatos "{rgba}", "{rgb}", "[rgba]" y "[rgb]" para obtener los canales rojo, verde, azul y alfa como objetos o arrays.

Objeto {rgba}

El formato "{rgba}" produce un objeto con los canales rojo, verde, azul y alfa.

type RGBAObject = {
  // 0 - 255
  r: number;
  // 0 - 255
  g: number;
  // 0 - 255
  b: number;
  // 0 - 1
  a: number;
};

Ejemplo:

Bun.color("hsl(0, 0%, 50%)", "{rgba}"); // { r: 128, g: 128, b: 128, a: 1 }
Bun.color("red", "{rgba}"); // { r: 255, g: 0, b: 0, a: 1 }
Bun.color(0xff0000, "{rgba}"); // { r: 255, g: 0, b: 0, a: 1 }
Bun.color({ r: 255, g: 0, b: 0 }, "{rgba}"); // { r: 255, g: 0, b: 0, a: 1 }
Bun.color([255, 0, 0], "{rgba}"); // { r: 255, g: 0, b: 0, a: 1 }

Para comportarse de manera similar a CSS, el canal a es un número decimal entre 0 y 1.

El formato "{rgb}" es similar, pero no incluye el canal alfa.

Bun.color("hsl(0, 0%, 50%)", "{rgb}"); // { r: 128, g: 128, b: 128 }
Bun.color("red", "{rgb}"); // { r: 255, g: 0, b: 0 }
Bun.color(0xff0000, "{rgb}"); // { r: 255, g: 0, b: 0 }
Bun.color({ r: 255, g: 0, b: 0 }, "{rgb}"); // { r: 255, g: 0, b: 0 }
Bun.color([255, 0, 0], "{rgb}"); // { r: 255, g: 0, b: 0 }

Array [rgba]

El formato "[rgba]" produce un array con los canales rojo, verde, azul y alfa.

// Todos los valores son 0 - 255
type RGBAArray = [number, number, number, number];

Ejemplo:

Bun.color("hsl(0, 0%, 50%)", "[rgba]"); // [128, 128, 128, 255]
Bun.color("red", "[rgba]"); // [255, 0, 0, 255]
Bun.color(0xff0000, "[rgba]"); // [255, 0, 0, 255]
Bun.color({ r: 255, g: 0, b: 0 }, "[rgba]"); // [255, 0, 0, 255]
Bun.color([255, 0, 0], "[rgba]"); // [255, 0, 0, 255]

A diferencia del formato "{rgba}", el canal alfa es un entero entre 0 y 255. Esto es útil para typed arrays donde cada canal debe ser del mismo tipo subyacente.

El formato "[rgb]" es similar, pero no incluye el canal alfa.

Bun.color("hsl(0, 0%, 50%)", "[rgb]"); // [128, 128, 128]
Bun.color("red", "[rgb]"); // [255, 0, 0]
Bun.color(0xff0000, "[rgb]"); // [255, 0, 0]
Bun.color({ r: 255, g: 0, b: 0 }, "[rgb]"); // [255, 0, 0]
Bun.color([255, 0, 0], "[rgb]"); // [255, 0, 0]

Formatear colores como cadenas hex

El formato "hex" produce una cadena hex en minúsculas para usar en CSS u otros contextos.

Bun.color("hsl(0, 0%, 50%)", "hex"); // "#808080"
Bun.color("red", "hex"); // "#ff0000"
Bun.color(0xff0000, "hex"); // "#ff0000"
Bun.color({ r: 255, g: 0, b: 0 }, "hex"); // "#ff0000"
Bun.color([255, 0, 0], "hex"); // "#ff0000"

El formato "HEX" es similar, pero produce una cadena hex con letras mayúsculas en lugar de minúsculas.

Bun.color("hsl(0, 0%, 50%)", "HEX"); // "#808080"
Bun.color("red", "HEX"); // "#FF0000"
Bun.color(0xff0000, "HEX"); // "#FF0000"
Bun.color({ r: 255, g: 0, b: 0 }, "HEX"); // "#FF0000"
Bun.color([255, 0, 0], "HEX"); // "#FF0000"

Formateo de colores en el cliente en tiempo de compilación

Como muchas de las APIs de Bun, puedes usar macros para invocar Bun.color en tiempo de compilación para uso en compilaciones de JavaScript del lado del cliente:

import { color } from "bun" with { type: "macro" };

console.log(color("#f00", "css"));

Luego, construye el código del lado del cliente:

bun build ./client-side.ts

Esto producirá lo siguiente en client-side.js:

// client-side.ts
console.log("red");