Bun.color(input, outputFormat?) 利用 Bun 的 CSS 解析器来解析、标准化和转换用户输入的颜色，支持多种输出格式，包括：
| 格式 | Example |
|---|---|
"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 颜色字符串中获取
r、g、b和a颜色组件作为 JavaScript 对象或数字
您可以将其视为流行的 npm 包 color 和 tinycolor2 的替代方案，但它完全支持解析 CSS 颜色字符串，并且零依赖，直接内置于 Bun 中。
灵活输入
您可以传入以下任何一种
- 标准 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 变量、css-in-js 等。它以字符串形式返回颜色最紧凑的表示。
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"
这将获取标准输出的颜色深度，并根据环境变量自动选择 "ansi-16m"、"ansi-256"、"ansi-16" 之一。如果标准输出不支持任何形式的 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
获取红色、绿色、蓝色和 Alpha 通道
您可以使用 "{rgba}"、"{rgb}"、"[rgba]" 和 "[rgb]" 格式将红色、绿色、蓝色和 Alpha 通道作为对象或数组获取。
{rgba} 对象
"{rgba}" 格式输出一个包含红色、绿色、蓝色和 Alpha 通道的对象。
type RGBAObject = {
// 0 - 255
r: number;
// 0 - 255
g: number;
// 0 - 255
b: number;
// 0 - 1
a: number;
};
Example
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 通道。
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 通道的数组。
// All values are 0 - 255
type RGBAArray = [number, number, number, number];
Example
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 通道。
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" 格式输出小写十六进制字符串，用于 CSS 或其他上下文。
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" 格式类似，但输出的是大写字母的十六进制字符串，而不是小写字母。
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"));
然后，构建客户端代码
bun build ./client-side.ts
这将输出以下内容到 client-side.js
// client-side.ts
console.log("red");
