Bun.Color(input, outputFormat?) aproveita o parser CSS do Bun para analisar, normalizar e converter cores de entrada do usuário para uma variedade de formatos de saída, incluindo:

Formato	Exemplo
"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]

Existem muitas maneiras diferentes de usar esta API:

• Validar e normalizar cores para persistir em um banco de dados (number é o mais amigável para banco de dados)
• Converter cores para diferentes formatos
• Registro colorido além das 16 cores que muitos usam hoje (use ansi se não quiser descobrir o que o terminal do usuário suporta, caso contrário use ansi-16, ansi-256 ou ansi-16m para quantas cores o terminal suporta)
• Formatar cores para uso em CSS injetado em HTML
• Obter os componentes de cor r, g, b e a como objetos JavaScript ou números de uma string de cor CSS

Você pode pensar nisso como uma alternativa aos populares pacotes npm color e tinycolor2 exceto com suporte completo para parsing de strings de cor CSS e zero dependências construídas diretamente no Bun.

Entrada flexível

Você pode passar qualquer um dos seguintes:

• Nomes de cores CSS padrão como "red"
• Números como 0xff0000
• Strings hex como "#f00"
• Strings RGB como "rgb(255, 0, 0)"
• Strings RGBA como "rgba(255, 0, 0, 1)"
• Strings HSL como "hsl(0, 100%, 50%)"
• Strings HSLA como "hsla(0, 100%, 50%, 1)"
• Objetos RGB como { r: 255, g: 0, b: 0 }
• Objetos RGBA como { r: 255, g: 0, b: 0, a: 1 }
• Arrays RGB como [255, 0, 0]
• Arrays RGBA como [255, 0, 0, 255]
• Strings LAB como "lab(50% 50% 50%)"
• ... qualquer outra coisa que o CSS possa analisar como um valor de cor único

Formatar cores como CSS

O formato "css" produz CSS válido para uso em folhas de estilo, estilos inline, variáveis CSS, css-in-js, etc. Retorna a representação mais compacta da cor como uma string.

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"

Se a entrada for desconhecida ou falhar ao analisar, Bun.color retorna null.

Formatar cores como ANSI (para terminais)

O formato "ansi" produz códigos de escape ANSI para uso em terminais para tornar o texto colorido.

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"

Isso obtém a profundidade de cor do stdout e automaticamente escolhe um de "ansi-16m", "ansi-256", "ansi-16" com base nas variáveis de ambiente. Se stdout não suportar nenhuma forma de cor ANSI, retorna uma string vazia. Como no resto da API de cor do Bun, se a entrada for desconhecida ou falhar ao analisar, retorna null.

Cores ANSI de 24 bits (ansi-16m)

O formato "ansi-16m" produz cores ANSI de 24 bits para uso em terminais para tornar o texto colorido. Cor de 24 bits significa que você pode exibir 16 milhões de cores em terminais suportados e requer um terminal moderno que o suporte.

Isso converte a cor de entrada para RGBA e depois produz isso como uma cor 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 cores ANSI (ansi-256)

O formato "ansi-256" aproxima a cor de entrada para a mais próxima das 256 cores ANSI suportadas por alguns terminais.

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"

Para converter de RGBA para uma das 256 cores ANSI, portamos o algoritmo que o tmux usa.

16 cores ANSI (ansi-16)

O formato "ansi-16" aproxima a cor de entrada para a mais próxima das 16 cores ANSI suportadas pela maioria dos terminais.

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"

Isso funciona primeiro convertendo a entrada para um espaço de cor RGB de 24 bits, depois para ansi-256, e então convertemos isso para a cor ANSI 16 mais próxima.

Formatar cores como números

O formato "number" produz um número de 24 bits para uso em bancos de dados, configuração ou qualquer outro caso de uso onde uma representação compacta da cor é desejada.

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

Obter os canais vermelho, verde, azul e alfa

Você pode usar os formatos "{rgba}", "{rgb}", "[rgba]" e "[rgb]" para obter os canais vermelho, verde, azul e alfa como objetos ou arrays.

Objeto {rgba}

O formato "{rgba}" produz um objeto com os canais vermelho, verde, azul e alfa.

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

Exemplo:

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 }

Para se comportar de forma semelhante ao CSS, o canal a é um número decimal entre 0 e 1.

O formato "{rgb}" é similar, mas não inclui o canal alfa.

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 }

Array [rgba]

O formato "[rgba]" produz um array com os canais vermelho, verde, azul e alfa.

// Todos os valores são 0 - 255
type RGBAArray = [number, number, number, number];

Exemplo:

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]

Ao contrário do formato "{rgba}", o canal alfa é um inteiro entre 0 e 255. Isso é útil para typed arrays onde cada canal deve ser do mesmo tipo subjacente.

O formato "[rgb]" é similar, mas não inclui o canal alfa.

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]

Formatar cores como strings hex

O formato "hex" produz uma string hex lowercase para uso em CSS ou outros contextos.

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"

O formato "HEX" é similar, mas produz uma string hex com letras uppercase em vez de letras lowercase.

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"

Formatação de cores no client-side em tempo de bundle

Como muitas das APIs do Bun, você pode usar macros para invocar Bun.color em tempo de bundle para uso em builds JavaScript client-side:

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

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

Depois, construa o código client-side:

bun build ./client-side.ts

Isso produzirá o seguinte para client-side.js:

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