Bun.color(input, outputFormat?) exploite l'analyseur CSS de Bun pour analyser, normaliser et convertir les couleurs depuis l'entrée utilisateur vers divers formats de sortie, notamment :

Format	Exemple
"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]

Il existe de nombreuses façons d'utiliser cette API :

• Valider et normaliser les couleurs pour les persister dans une base de données (number est le plus adapté aux bases de données)
• Convertir les couleurs en différents formats
• Journalisation colorée au-delà des 16 couleurs utilisées aujourd'hui (utilisez ansi si vous ne voulez pas déterminer ce que le terminal de l'utilisateur prend en charge, sinon utilisez ansi-16, ansi-256 ou ansi-16m selon le nombre de couleurs prises en charge par le terminal)
• Formater les couleurs pour une utilisation dans du CSS injecté dans du HTML
• Obtenir les composants de couleur r, g, b et a sous forme d'objets JavaScript ou de nombres depuis une chaîne de couleur CSS

Vous pouvez considérer cela comme une alternative aux packages npm populaires color et tinycolor2 sauf avec une prise en charge complète de l'analyse des chaînes de couleurs CSS et zéro dépendance intégré directement dans Bun.

Entrée flexible

Vous pouvez passer l'un des éléments suivants :

• Noms de couleurs CSS standard comme "red"
• Nombres comme 0xff0000
• Chaînes hexadécimales comme "#f00"
• Chaînes RGB comme "rgb(255, 0, 0)"
• Chaînes RGBA comme "rgba(255, 0, 0, 1)"
• Chaînes HSL comme "hsl(0, 100%, 50%)"
• Chaînes HSLA comme "hsla(0, 100%, 50%, 1)"
• Objets RGB comme { r: 255, g: 0, b: 0 }
• Objets RGBA comme { r: 255, g: 0, b: 0, a: 1 }
• Tableaux RGB comme [255, 0, 0]
• Tableaux RGBA comme [255, 0, 0, 255]
• Chaînes LAB comme "lab(50% 50% 50%)"
• ... tout autre élément que CSS peut analyser comme une valeur de couleur unique

Formater les couleurs en CSS

Le format "css" produit un CSS valide pour une utilisation dans les feuilles de style, les styles inline, les variables CSS, css-in-js, etc. Il retourne la représentation la plus compacte de la couleur sous forme de chaîne.

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 l'entrée est inconnue ou échoue à l'analyse, Bun.color retourne null.

Formater les couleurs en ANSI (pour les terminaux)

Le format "ansi" produit des codes d'échappement ANSI pour une utilisation dans les terminaux pour rendre le texte coloré.

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"

Cela obtient la profondeur de couleur de stdout et choisit automatiquement l'un des formats "ansi-16m", "ansi-256", "ansi-16" en fonction des variables d'environnement. Si stdout ne prend en charge aucune forme de couleur ANSI, il retourne une chaîne vide. Comme pour le reste de l'API de couleur de Bun, si l'entrée est inconnue ou échoue à l'analyse, elle retourne null.

Couleurs ANSI 24 bits (ansi-16m)

Le format "ansi-16m" produit des couleurs ANSI 24 bits pour une utilisation dans les terminaux pour rendre le texte coloré. La couleur 24 bits signifie que vous pouvez afficher 16 millions de couleurs sur les terminaux pris en charge, et nécessite un terminal moderne qui les prend en charge.

Cela convertit la couleur d'entrée en RGBA, puis la produit comme une couleur 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 couleurs ANSI (ansi-256)

Le format "ansi-256" approxime la couleur d'entrée à la plus proche des 256 couleurs ANSI prises en charge par certains terminaux.

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"

Pour convertir de RGBA vers l'une des 256 couleurs ANSI, nous avons porté l'algorithme que tmux utilise.

16 couleurs ANSI (ansi-16)

Le format "ansi-16" approxime la couleur d'entrée à la plus proche des 16 couleurs ANSI prises en charge par la plupart des terminaux.

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"

Cela fonctionne en convertissant d'abord l'entrée en un espace de couleur RVB 24 bits, puis en ansi-256, puis nous convertissons cela à la couleur ANSI 16 la plus proche.

Formater les couleurs en nombres

Le format "number" produit un nombre 24 bits pour une utilisation dans les bases de données, la configuration, ou tout autre cas d'utilisation où une représentation compacte de la couleur est souhaitée.

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

Obtenir les canaux rouge, vert, bleu et alpha

Vous pouvez utiliser les formats "{rgba}", "{rgb}", "[rgba]" et "[rgb]" pour obtenir les canaux rouge, vert, bleu et alpha sous forme d'objets ou de tableaux.

Objet {rgba}

Le format "{rgba}" produit un objet avec les canaux rouge, vert, bleu et alpha.

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

Exemple :

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 }

Pour se comporter de manière similaire à CSS, le canal a est un nombre décimal entre 0 et 1.

Le format "{rgb}" est similaire, mais il n'inclut pas le canal alpha.

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 }

Tableau [rgba]

Le format "[rgba]" produit un tableau avec les canaux rouge, vert, bleu et alpha.

// Toutes les valeurs sont 0 - 255
type RGBAArray = [number, number, number, number];

Exemple :

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]

Contrairement au format "{rgba}", le canal alpha est un entier entre 0 et 255. Ceci est utile pour les tableaux typés où chaque canal doit être du même type sous-jacent.

Le format "[rgb]" est similaire, mais il n'inclut pas le canal alpha.

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]

Formater les couleurs en chaînes hexadécimales

Le format "hex" produit une chaîne hexadécimale en minuscules pour une utilisation en CSS ou d'autres contextes.

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"

Le format "HEX" est similaire, mais il produit une chaîne hexadécimale avec des lettres majuscules au lieu de minuscules.

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"

Formatage des couleurs côté client au moment du bundle

Comme beaucoup d'API de Bun, vous pouvez utiliser des macros pour invoquer Bun.color au moment du bundle pour une utilisation dans des builds JavaScript côté client :

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

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

Ensuite, construisez le code côté client :

bun build ./client-side.ts

Cela produira ce qui suit dans client-side.js :

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