顏色
將顏色格式化為 CSS、ANSI、數字、十六進位制字串等多種格式
Bun.color(input, outputFormat?) 使用 Bun 的 CSS 解析器解析、規範化顏色，並將使用者輸入的顏色轉換為以下任一輸出格式：
| 格式 | 範例 |
|---|---|
"css" | "red" |
"ansi" | "\x1b[38;2;255;0;0m" |
"ansi-16" | "\x1b[91m" |
"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] |
可用於：
- 驗證顏色並將其規範化後持久化到資料庫（
number對資料庫最友好） - 將顏色轉換為不同格式
- 為終端輸出新增超出基本 16 色範圍的顏色（使用
ansi自動檢測終端顏色支援，或使用ansi-16、ansi-256或ansi-16m指定顏色深度） - 格式化顏色，以便在注入 HTML 的 CSS 中使用
- 從 CSS 顏色字串中獲取
r、g、b和a顏色分量，結果可以是 JavaScript 物件或數字
這是 npm 軟體包 color 和 tinycolor2 的內建替代方案，完整支援解析 CSS 顏色字串，且零相依。
靈活的輸入
Bun.color 接受以下任意輸入：
- 標準 CSS 顏色名稱，例如
"red" - 數字，例如
0xff0000 - 十六進位制字串，例如
"#f00" - RGB 字串，例如
"rgb(255, 0, 0)" - RGBA 字串，例如
"rgba(255, 0, 0, 1)" - HSL 字串，例如
"hsl(0, 100%, 50%)" - HSLA 字串，例如
"hsla(0, 100%, 50%, 1)" - RGB 物件，例如
{ r: 255, g: 0, b: 0 } - RGBA 物件，例如
{ r: 255, g: 0, b: 0, a: 1 } - RGB 陣列，例如
[255, 0, 0] - RGBA 陣列，例如
[255, 0, 0, 255] - LAB 字串，例如
"lab(50% 50 50)" - ……以及 CSS 能夠解析為單個顏色值的任何其他內容
將顏色格式化為 CSS
"css" 格式輸出可用於樣式表、內聯樣式、CSS 變數或 CSS-in-JS 的有效 CSS。它會傳回顏色最緊湊的字串表示形式。
TypeScript
Bun.color("red", "css"); // "red"
Bun.color(0xff0000, "css"); // "red"
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 轉義碼。
TypeScript
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"
"ansi" 格式會根據環境變數檢測標準輸出的顏色深度，並相應選擇 "ansi-16m"、"ansi-256" 或 "ansi-16"。如果標準輸出不支援任何形式的 ANSI 顏色，則傳回空字串。與 Bun 顏色 API 的其他部分一樣，如果輸入未知或解析失敗，則傳回 null。
24 位 ANSI 顏色 (ansi-16m)
"ansi-16m" 格式輸出 24 位 ANSI 顏色，可以顯示 1600 萬種顏色，但需要支援該功能的現代終端。
Bun 會將輸入顏色轉換為 RGBA，然後將其作為 ANSI 顏色輸出。
TypeScript
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 色之一。
TypeScript
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 色的演算法來源於 tmux。
16 色 ANSI (ansi-16)
"ansi-16" 格式，將輸入顏色近似到大多數終端支援的 16 色之一。
TypeScript
Bun.color("red", "ansi-16"); // "\u001b[91m"
Bun.color(0xff0000, "ansi-16"); // "\u001b[91m"
Bun.color("#f00", "ansi-16"); // "\u001b[91m"
Bun.color("#ff0000", "ansi-16"); // "\u001b[91m"
Bun 會將輸入轉換為 24 位 RGB 顏色空間，然後轉換為 ansi-256，最後選取與其最接近的 16 種 ANSI 顏色之一。
將顏色格式化為數字
"number" 格式將顏色輸出為 24 位數字，這是適用於資料庫和設定的緊湊表示形式。
TypeScript
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
獲取紅、綠、藍和 alpha 通道
"{rgba}"、"{rgb}"、"[rgba]" 和 "[rgb]" 格式將紅、綠、藍和 alpha 通道作為物件或陣列傳回。
{rgba} 物件
"{rgba}" 格式輸出包含紅、綠、藍和 alpha 通道的物件。
TypeScript
type RGBAObject = {
// 0 - 255
r: number;
// 0 - 255
g: number;
// 0 - 255
b: number;
// 0 - 1
a: number;
};
範例：
TypeScript
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 之間的小數。
"{rgb}" 格式類似，但不包含 alpha 通道。
TypeScript
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]" 格式輸出包含紅、綠、藍和 alpha 通道的陣列。
TypeScript
// 所有值範圍 0 - 255
type RGBAArray = [number, number, number, number];
範例：
TypeScript
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}" 格式不同，alpha 通道是 0 到 255 的整數。這適用於每個通道具有相同底層型別的型別化陣列。
"[rgb]" 格式類似，但不包含 alpha 通道。
TypeScript
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]
將顏色格式化為十六進位制字串
"hex" 格式輸出小寫十六進位制字串。
TypeScript
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" 格式相同，但輸出大寫字母。
TypeScript
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 建置中使用：
client-side.ts
import { color } from "bun" with { type: "macro" };
console.log(color("#f00", "css"));
然後，建置客戶端程式碼：
shell
bun build ./client-side.ts
bun build 將以下內容輸出到標準輸出：
JavaScript
// client-side.ts
console.log("red");