Bun.Color

Bun.color(input, outputFormat?) は、Bun の CSS パーサーを活用して、ユーザー入力から色を解析・正規化し、さまざまな出力形式に変換します。

形式	例
`"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]`

この API にはさまざまな使用方法があります。

データベースに保存するための色の検証と正規化（number が最もデータベースに適しています）
色を異なる形式に変換
多くの人が現在使用している 16 色を超えたカラフルなロギング（ユーザーのターミナルがサポートするものを調べたくない場合は ansi を使用し、それ以外の場合はターミナルがサポートする色数に応じて ansi-16、ansi-256、または ansi-16m を使用）
HTML に注入される CSS での色のフォーマット
CSS 色文字列から JavaScript オブジェクトまたは数値として r、g、b、a の色成分を取得

これは、人気のある npm パッケージである color や tinycolor2 の代替として考えることができますが、CSS 色文字列の完全な解析サポートと、Bun に直接組み込まれたゼロ依存関係という点で異なります。

柔軟な入力

以下を入力できます。

"red" のような標準の CSS 色名
0xff0000 のような数値
"#f00" のような 16 進文字列
"rgb(255, 0, 0)" のような RGB 文字列
"rgba(255, 0, 0, 1)" のような RGBA 文字列
"hsl(0, 100%, 50%)" のような HSL 文字列
"hsla(0, 100%, 50%, 1)" のような HSLA 文字列
{ r: 255, g: 0, b: 0 } のような RGB オブジェクト
{ r: 255, g: 0, b: 0, a: 1 } のような RGBA オブジェクト
[255, 0, 0] のような RGB 配列
[255, 0, 0, 255] のような RGBA 配列
"lab(50% 50% 50%)" のような LAB 文字列
... CSS が単一の色値として解析できるその他のもの

色を CSS としてフォーマット

"css" 形式は、スタイルシート、インラインスタイル、CSS 変数、css-in-js などで使用するための有効な CSS を出力します。これは、色の最もコンパクトな表現を文字列として返します。

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"

入力が不明な場合、または解析に失敗した場合、Bun.color は null を返します。

色を ANSI としてフォーマット（ターミナル用）

"ansi" 形式は、ターミナルでテキストをカラフルにするために使用される ANSI エスケープコードを出力します。

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"

これは stdout の色深度を取得し、環境変数に基づいて "ansi-16m"、"ansi-256"、"ansi-16" のいずれかを自動的に選択します。stdout が任何形式的 ANSI 色をサポートしていない場合、空の文字列を返します。Bun の色 API の他の部分と同様に、入力が不明な場合、または解析に失敗した場合、null を返します。

24 ビット ANSI 色（`ansi-16m`）

"ansi-16m" 形式は、ターミナルでテキストをカラフルにするために使用される 24 ビット ANSI 色を出力します。24 ビット色は、サポートされているターミナルで 1600 万色を表示できることを意味し、それをサポートするモダンなターミナルが必要です。

これは入力色を RGBA に変換し、それを 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 ANSI 色（`ansi-256`）

"ansi-256" 形式は、一部のターミナルでサポートされている 256 色の ANSI 色のうち、入力色に最も近いものに近似します。

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"

RGBA から 256 色の ANSI 色に変換するには、tmux が使用するアルゴリズムを移植しました。

16 ANSI 色（`ansi-16`）

"ansi-16" 形式は、ほとんどのターミナルでサポートされている 16 色の ANSI 色のうち、入力色に最も近いものに近似します。

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"

これは、まず入力を 24 ビット RGB 色空間に変換し、次に ansi-256 に変換し、それを最も近い 16 色の ANSI 色に変換することで機能します。

色を数値としてフォーマット

"number" 形式は、データベース、設定、または色のコンパクトな表現が必要なその他のユースケースで使用するための 24 ビット数値を出力します。

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

赤、緑、青、アルファチャンネルを取得

"{rgba}"、"{rgb}"、"[rgba]"、"[rgb]" 形式を使用して、赤、緑、青、アルファチャンネルをオブジェクトまたは配列として取得できます。

`{rgba}` オブジェクト

"{rgba}" 形式は、赤、緑、青、アルファチャンネルを持つオブジェクトを出力します。

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

例：

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 }

CSS と同様に動作するために、a チャンネルは 0 から 1 の間の 10 進数です。

"{rgb}" 形式は似ていますが、アルファチャンネルを含みません。

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]` 配列

"[rgba]" 形式は、赤、緑、青、アルファチャンネルを持つ配列を出力します。

// すべての値は 0 - 255
type RGBAArray = [number, number, number, number];

例：

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]

"{rgba}" 形式とは異なり、アルファチャンネルは 0 から 255 の間の整数です。これは、各チャンネルが同じ基盤となる型である必要がある型付き配列で役立ちます。

"[rgb]" 形式は似ていますが、アルファチャンネルを含みません。

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]

色を 16 進文字列としてフォーマット

"hex" 形式は、CSS またはその他のコンテキストで使用するための小文字の 16 進文字列を出力します。

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"

"HEX" 形式は似ていますが、小文字の代わりに大文字の 16 進文字列を出力します。

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"

バンドル時のクライアントサイドカラーフォーマット

Bun の多くの API と同様に、マクロを使用して Bun.color をバンドル時に呼び出して、クライアントサイドの JavaScript ビルドで使用できます。

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

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

次に、クライアントサイドコードをビルドします。

bun build ./client-side.ts

これにより、client-side.js に以下が出力されます。

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

柔軟な入力 ​

色を CSS としてフォーマット ​

色を ANSI としてフォーマット（ターミナル用） ​

24 ビット ANSI 色（ansi-16m） ​

256 ANSI 色（ansi-256） ​

16 ANSI 色（ansi-16） ​

色を数値としてフォーマット ​

赤、緑、青、アルファチャンネルを取得 ​

{rgba} オブジェクト ​

[rgba] 配列 ​

色を 16 進文字列としてフォーマット ​

バンドル時のクライアントサイドカラーフォーマット ​