Bun.color(input, outputFormat?) sfrutta il parser CSS di Bun per analizzare, normalizzare e convertire i colori dall'input dell'utente in una varietà di formati di output, inclusi:

Formato	Esempio
"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]

Ci sono molti modi diversi per usare questa API:

• Validare e normalizzare i colori da persistere in un database (number è il più adatto ai database)
• Convertire i colori in diversi formati
• Logging colorato oltre i 16 colori che molti usano oggi (usa ansi se non vuoi scoprire cosa supporta il terminale dell'utente, altrimenti usa ansi-16, ansi-256, o ansi-16m per quanti colori il terminale supporta)
• Formattare i colori per l'uso in CSS iniettato in HTML
• Ottenere le componenti di colore r, g, b, e a come oggetti JavaScript o numeri da una stringa di colore CSS

Puoi pensare a questo come un'alternativa ai popolari pacchetti npm color e tinycolor2 eccetto con supporto completo per l'analisi di stringhe di colore CSS e zero dipendenze costruito direttamente in Bun.

Input flessibile

Puoi passare uno dei seguenti:

• Nomi di colori CSS standard come "red"
• Numeri come 0xff0000
• Stringhe hex come "#f00"
• Stringhe RGB come "rgb(255, 0, 0)"
• Stringhe RGBA come "rgba(255, 0, 0, 1)"
• Stringhe HSL come "hsl(0, 100%, 50%)"
• Stringhe HSLA come "hsla(0, 100%, 50%, 1)"
• Oggetti RGB come { r: 255, g: 0, b: 0 }
• Oggetti RGBA come { r: 255, g: 0, b: 0, a: 1 }
• Array RGB come [255, 0, 0]
• Array RGBA come [255, 0, 0, 255]
• Stringhe LAB come "lab(50% 50% 50%)"
• ... qualsiasi altra cosa che CSS può analizzare come valore di colore singolo

Formattare i colori come CSS

Il formato "css" produce CSS valido per l'uso in fogli di stile, stili inline, variabili CSS, css-in-js, ecc. Restituisce la rappresentazione più compatta del colore come stringa.

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"

Se l'input è sconosciuto o non riesce l'analisi, Bun.color restituisce null.

Formattare i colori come ANSI (per terminali)

Il formato "ansi" produce codici di escape ANSI per l'uso nei terminali per rendere il testo colorato.

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"

Questo ottiene la profondità di colore di stdout e sceglie automaticamente uno tra "ansi-16m", "ansi-256", "ansi-16" in base alle variabili d'ambiente. Se stdout non supporta alcuna forma di colore ANSI, restituisce una stringa vuota. Come con il resto dell'API color di Bun, se l'input è sconosciuto o non riesce l'analisi, restituisce null.

Colori ANSI a 24 bit (ansi-16m)

Il formato "ansi-16m" produce colori ANSI a 24 bit per l'uso nei terminali per rendere il testo colorato. Il colore a 24 bit significa che puoi visualizzare 16 milioni di colori sui terminali supportati e richiede un terminale moderno che lo supporti.

Questo converte il colore di input in RGBA, e poi lo produce come colore 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 colori ANSI (ansi-256)

Il formato "ansi-256" approssima il colore di input al più vicino dei 256 colori ANSI supportati da alcuni terminali.

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"

Per convertire da RGBA a uno dei 256 colori ANSI, abbiamo portato l'algoritmo che tmux usa.

16 colori ANSI (ansi-16)

Il formato "ansi-16" approssima il colore di input al più vicino dei 16 colori ANSI supportati dalla maggior parte dei terminali.

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"

Questo funziona convertendo prima l'input in uno spazio colore RGB a 24 bit, poi in ansi-256, e poi convertiamo quello al colore ANSI a 16 più vicino.

Formattare i colori come numeri

Il formato "number" produce un numero a 24 bit per l'uso in database, configurazione, o qualsiasi altro caso d'uso dove è desiderata una rappresentazione compatta del colore.

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

Ottenere i canali rosso, verde, blu e alfa

Puoi usare i formati "{rgba}", "{rgb}", "[rgba]" e "[rgb]" per ottenere i canali rosso, verde, blu e alfa come oggetti o array.

Oggetto {rgba}

Il formato "{rgba}" produce un oggetto con i canali rosso, verde, blu e alfa.

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

Esempio:

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 }

Per comportarsi in modo simile a CSS, il canale a è un numero decimale tra 0 e 1.

Il formato "{rgb}" è simile, ma non include il canale 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]

Il formato "[rgba]" produce un array con i canali rosso, verde, blu e alfa.

// Tutti i valori sono 0 - 255
type RGBAArray = [number, number, number, number];

Esempio:

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 differenza del formato "{rgba}", il canale alfa è un intero tra 0 e 255. Questo è utile per typed array dove ogni canale deve essere dello stesso tipo sottostante.

Il formato "[rgb]" è simile, ma non include il canale 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]

Formattare i colori come stringhe hex

Il formato "hex" produce una stringa hex minuscola per l'uso in CSS o altri contesti.

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"

Il formato "HEX" è simile, ma produce una stringa hex con lettere maiuscole invece di lettere minuscole.

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"

Formattazione dei colori lato client al momento del bundle

Come molte delle API di Bun, puoi usare le macro per invocare Bun.color al momento del bundle per l'uso in build JavaScript lato client:

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

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

Poi, builda il codice lato client:

bun build ./client-side.ts

Questo produrrà quanto segue in client-side.js:

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