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 의 대안으로 생각할 수 있습니다. Bun 에 직접 내장되어 CSS 색상 문자열 구문 분석을 완전히 지원하며 의존성이 없습니다.

유연한 입력

다음 중 하나를 전달할 수 있습니다.

"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 사이의 십진수입니다.

"{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 와 마찬가지로 매크로를 사용하여 클라이언트 측 JavaScript 빌드에서 번들 타임에 Bun.color 를 호출할 수 있습니다.

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 진수 문자열로 색상 포맷팅 ​

번들 타임 클라이언트 측 색상 포맷팅 ​