Bun.color(input, outputFormat?) nutzt Buns CSS-Parser, um Farben aus der Benutzereingabe zu parsen, zu normalisieren und in eine Vielzahl von Ausgabeformaten zu konvertieren, darunter:

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

Es gibt viele verschiedene Möglichkeiten, diese API zu verwenden:

• Farben validieren und normalisieren, um sie in einer Datenbank zu speichern (number ist am datenbankfreundlichsten)
• Farben in verschiedene Formate konvertieren
• Farbiges Logging über die 16 Farben hinaus, die viele heute verwenden (verwenden Sie ansi, wenn Sie nicht herausfinden möchten, was das Terminal des Benutzers unterstützt, andernfalls verwenden Sie ansi-16, ansi-256 oder ansi-16m für die Anzahl der Farben, die das Terminal unterstützt)
• Farben für die Verwendung in CSS formatieren, das in HTML injiziert wird
• Die r, g, b und a Farbkomponenten als JavaScript-Objekte oder Zahlen aus einem CSS-Farbstring erhalten

Sie können sich dies als Alternative zu den beliebten npm-Paketen color und tinycolor2 vorstellen, jedoch mit vollständiger Unterstützung zum Parsen von CSS-Farbstrings und ohne Abhängigkeiten, die direkt in Bun integriert sind.

Flexible Eingabe

Sie können Folgendes übergeben:

• Standard-CSS-Farbnamen wie "red"
• Zahlen wie 0xff0000
• Hex-Strings wie "#f00"
• RGB-Strings wie "rgb(255, 0, 0)"
• RGBA-Strings wie "rgba(255, 0, 0, 1)"
• HSL-Strings wie "hsl(0, 100%, 50%)"
• HSLA-Strings wie "hsla(0, 100%, 50%, 1)"
• RGB-Objekte wie { r: 255, g: 0, b: 0 }
• RGBA-Objekte wie { r: 255, g: 0, b: 0, a: 1 }
• RGB-Arrays wie [255, 0, 0]
• RGBA-Arrays wie [255, 0, 0, 255]
• LAB-Strings wie "lab(50% 50% 50%)"
• ... alles andere, das CSS als einzelnen Farbwert parsen kann

Farben als CSS formatieren

Das "css"-Format gibt gültiges CSS für die Verwendung in Stylesheets, Inline-Styles, CSS-Variablen, CSS-in-JS usw. aus. Es gibt die kompakteste Darstellung der Farbe als String zurück.

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"

Wenn die Eingabe unbekannt ist oder das Parsen fehlschlägt, gibt Bun.color null zurück.

Farben als ANSI formatieren (für Terminals)

Das "ansi"-Format gibt ANSI-Escape-Codes für die Verwendung in Terminals aus, um Text farbig zu machen.

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"

Dies ermittelt die Farbtiefe von stdout und wählt automatisch eine der Optionen "ansi-16m", "ansi-256", "ansi-16" basierend auf den Umgebungsvariablen. Wenn stdout keine Form von ANSI-Farbe unterstützt, gibt es einen leeren String zurück. Wie beim Rest von Buns Farb-API gibt es null zurück, wenn die Eingabe unbekannt ist oder das Parsen fehlschlägt.

24-Bit-ANSI-Farben (ansi-16m)

Das "ansi-16m"-Format gibt 24-Bit-ANSI-Farben für die Verwendung in Terminals aus, um Text farbig zu machen. 24-Bit-Farbe bedeutet, dass Sie 16 Millionen Farben auf unterstützten Terminals anzeigen können, und erfordert ein modernes Terminal, das dies unterstützt.

Dies konvertiert die Eingabefarbe in RGBA und gibt diese dann als ANSI-Farbe aus.

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 ANSI-Farben (ansi-256)

Das "ansi-256"-Format approximiert die Eingabefarbe an die nächste der 256 ANSI-Farben, die von einigen Terminals unterstützt werden.

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"

Um von RGBA in eine der 256 ANSI-Farben zu konvertieren, haben wir den Algorithmus portiert, den tmux verwendet.

16 ANSI-Farben (ansi-16)

Das "ansi-16"-Format approximiert die Eingabefarbe an die nächste der 16 ANSI-Farben, die von den meisten Terminals unterstützt werden.

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"

Dies funktioniert, indem zuerst die Eingabe in einen 24-Bit-RGB-Farbraum konvertiert wird, dann in ansi-256, und dann konvertieren wir das in die nächste 16-ANSI-Farbe.

Farben als Zahlen formatieren

Das "number"-Format gibt eine 24-Bit-Zahl für die Verwendung in Datenbanken, Konfigurationen oder anderen Anwendungsfällen aus, bei denen eine kompakte Darstellung der Farbe gewünscht ist.

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

Die Rot-, Grün-, Blau- und Alpha-Kanäle erhalten

Sie können die Formate "{rgba}", "{rgb}", "[rgba]" und "[rgb]" verwenden, um die Rot-, Grün-, Blau- und Alpha-Kanäle als Objekte oder Arrays zu erhalten.

{rgba}-Objekt

Das "{rgba}"-Format gibt ein Objekt mit den Rot-, Grün-, Blau- und Alpha-Kanälen aus.

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

Beispiel:

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 }

Um sich ähnlich wie CSS zu verhalten, ist der a-Kanal eine Dezimalzahl zwischen 0 und 1.

Das "{rgb}"-Format ist ähnlich, enthält jedoch nicht den Alpha-Kanal.

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 }

[rgba]-Array

Das "[rgba]"-Format gibt ein Array mit den Rot-, Grün-, Blau- und Alpha-Kanälen aus.

// Alle Werte sind 0 - 255
type RGBAArray = [number, number, number, number];

Beispiel:

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]

Im Gegensatz zum "{rgba}"-Format ist der Alpha-Kanal eine Ganzzahl zwischen 0 und 255. Dies ist nützlich für typisierte Arrays, bei denen jeder Kanal denselben zugrunde liegenden Typ haben muss.

Das "[rgb]"-Format ist ähnlich, enthält jedoch nicht den Alpha-Kanal.

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]

Farben als Hex-Strings formatieren

Das "hex"-Format gibt einen Hex-String in Kleinbuchstaben für die Verwendung in CSS oder anderen Kontexten aus.

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"

Das "HEX"-Format ist ähnlich, gibt jedoch einen Hex-String mit Großbuchstaben anstelle von Kleinbuchstaben aus.

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"

Clientseitige Farbformatierung zur Bundle-Zeit

Wie viele von Buns APIs können Sie Makros verwenden, um Bun.color zur Bundle-Zeit für die Verwendung in clientseitigen JavaScript-Builds aufzurufen:

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

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

Dann bauen Sie den clientseitigen Code:

bun build ./client-side.ts

Dies gibt Folgendes in client-side.js aus:

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