### Install node-vibrant Source: https://github.com/vibrant-colors/node-vibrant/blob/main/README.md Install the node-vibrant package using npm. ```bash $ npm install node-vibrant ``` -------------------------------- ### Install Node-Vibrant Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/guides/get-started.md Install the node-vibrant library using npm. Ensure you are using a modern bundler, modern bundleless JS APIs, or the latest Node LTS version. ```shell npm install node-vibrant ``` -------------------------------- ### Get Color Palette using Builder or Constructor Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/guides/get-started.md Demonstrates two ways to get a color palette: using the static `from()` method with a path and `getPalette()`, or by creating a new `Vibrant` instance with the image path and options, then calling `getPalette()`. ```typescript // Using builder Vibrant.from("path/to/image") .getPalette() .then((palette) => console.log(palette)); // Using constructor const vibrant = new Vibrant("path/to/image", opts); vibrant.getPalette() .then((palette) => console.log(palette)); ``` -------------------------------- ### Create Vibrant Builder Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/vibrant.md Use the static `from()` method to start building a Vibrant instance. It takes an image source and returns a `Builder` object for further configuration. ```typescript static from(src): Builder ``` -------------------------------- ### Get Palette from Image Source (Node.js) Source: https://context7.com/vibrant-colors/node-vibrant/llms.txt Use Vibrant.from() to create a builder and get the color palette from an image file. The palette object contains up to six swatches, which can be null if a variant is not found. ```typescript import { Vibrant } from "node-vibrant/node"; const palette = await Vibrant.from("./photo.jpg").getPalette(); // Each swatch is Swatch | null console.log(palette.Vibrant?.hex); // e.g. "#3d7abf" console.log(palette.DarkVibrant?.hex); // e.g. "#1a4a80" console.log(palette.LightVibrant?.hex); // e.g. "#a0c4f1" console.log(palette.Muted?.hex); // e.g. "#7a9cbb" console.log(palette.DarkMuted?.hex); // e.g. "#3a5a70" console.log(palette.LightMuted?.hex); // e.g. "#b0c8dc" ``` -------------------------------- ### Demo Usage in Browser Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/guides/get-started.md A browser-specific example demonstrating how to fetch a palette from a remote image URL and dynamically update the DOM with extracted color information, including vibrant color and its text color. ```typescript import { Vibrant } from "node-vibrant/browser"; Vibrant.from("https://avatars.githubusercontent.com/Vibrant-Colors").getPalette() .then(palette => { app.innerHTML = `

Vibrant

` }) ``` -------------------------------- ### Install and Use Vibrant with Web Workers Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/guides/get-started.md Set up Vibrant to use Web Workers for offloading image quantization to a separate thread. This requires importing both Vibrant and WorkerPipeline, and initializing WorkerPipeline with a worker instance. ```typescript // Worker usage import { Vibrant, WorkerPipeline } from "node-vibrant/worker"; import PipelineWorker from "node-vibrant/worker.worker?worker"; Vibrant.use(new WorkerPipeline(PipelineWorker as never)); ``` -------------------------------- ### ImageBase getWidth() Method Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image/classes/imagebase.md Abstract method to get the width of the image. Returns the image width in pixels. ```typescript abstract getWidth(): number ``` -------------------------------- ### Get Default Options Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/vibrant.md Access the static `DefaultOpts` property to retrieve the default configuration options for Vibrant. ```typescript static DefaultOpts: Partial; ``` -------------------------------- ### Access Swatch Properties Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/guides/get-started.md Examples of accessing color information from a Swatch object, including its hex, RGB, HSL values, and suggested text colors for titles and body content based on background contrast. ```typescript palette.Vibrant.hex; // "#rrggbb palette.Vibrant.rgb; // [r, g, b] where r, g, and b are numbers palette.Vibrant.hsl; // [hue, saturation, light] where all are numbers palette.Vibrant.titleTextColor; // "#fff" (white) if the color is too dark, "#000" (black) if the background is light palette.Vibrant.bodyTextColor; // Same as titleTextColor but with lower contrast threshold ``` -------------------------------- ### ImageBase getHeight() Method Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image/classes/imagebase.md Abstract method to get the height of the image. Returns the image height in pixels. ```typescript abstract getHeight(): number ``` -------------------------------- ### ImageBase getPixelCount() Method Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image/classes/imagebase.md Abstract method to get the total number of pixels in the image. This is calculated as width * height. ```typescript abstract getPixelCount(): number ``` -------------------------------- ### Browser Usage with node-vibrant Source: https://context7.com/vibrant-colors/node-vibrant/llms.txt Import from 'node-vibrant/browser' for browser environments. Image sources can be URLs, HTMLImageElements, or HTMLCanvasElements. This example sets the background color and displays swatches on the page. ```typescript import { Vibrant } from "node-vibrant/browser"; Vibrant.from("https://avatars.githubusercontent.com/Vibrant-Colors") .getPalette() .then((palette) => { document.body.style.backgroundColor = palette.Vibrant?.hex ?? "#fff"; document.body.style.color = palette.Vibrant?.titleTextColor ?? "#000"; const list = document.getElementById("swatches")!; for (const [name, swatch] of Object.entries(palette)) { if (!swatch) continue; const li = document.createElement("li"); li.style.background = swatch.hex; li.style.color = swatch.bodyTextColor; li.textContent = `${name}: ${swatch.hex}`; list.appendChild(li); } }); ``` -------------------------------- ### Get Swatch Population Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-color/classes/swatch.md Retrieves the population count of the Swatch, indicating its prevalence in the image. ```typescript get population(): number ``` -------------------------------- ### Filter Swatches with Custom Criteria using Swatch.applyFilters Source: https://context7.com/vibrant-colors/node-vibrant/llms.txt Use Swatch.applyFilters to return only swatches that satisfy all provided Filter functions. Filters receive (r, g, b, alpha) values. This example excludes near-white and near-black colors. ```typescript import { Swatch } from "@vibrant/color"; import type { Filter } from "@vibrant/color"; // Exclude near-white and near-black pixels const notWhiteOrBlack: Filter = (r, g, b, _a) => { const isWhite = r > 240 && g > 240 && b > 240; const isBlack = r < 15 && g < 15 && b < 15; return !isWhite && !isBlack; }; const swatches = [ new Swatch([255, 255, 255], 10), // white — filtered out new Swatch([61, 122, 191], 342), // blue — kept new Swatch([5, 5, 5 ], 20), // black — filtered out ]; const filtered = Swatch.applyFilters(swatches, [notWhiteOrBlack]); console.log(filtered.length); // 1 console.log(filtered[0]?.hex); // "#3d7abf" ``` -------------------------------- ### Get Title Text Color Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-color/classes/swatch.md Returns an appropriate color for title text to be displayed over this Swatch's color. ```typescript get titleTextColor(): string ``` -------------------------------- ### Get Body Text Color Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-color/classes/swatch.md Returns an appropriate color for body text to be displayed over this Swatch's color. ```typescript get bodyTextColor(): string ``` -------------------------------- ### Get All Palettes Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/vibrant.md The `getPalettes()` method returns a Promise that resolves to an object containing various palette formats. This is useful for accessing different color representations. ```typescript getPalettes(): Promise<{}> ``` -------------------------------- ### Get All Generator Palettes Source: https://context7.com/vibrant-colors/node-vibrant/llms.txt Use getPalettes() to run all registered generators and retrieve a map of named palettes. This is useful when custom palette generators have been added to the pipeline. ```typescript import { Vibrant } from "node-vibrant/node"; const v = new Vibrant("./album-art.png"); const palettes = await v.getPalettes(); // palettes["default"] is the standard 6-swatch palette for (const [generatorName, palette] of Object.entries(palettes)) { console.log(generatorName, palette.Vibrant?.hex); } ``` -------------------------------- ### Get Swatch HSL Value Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-color/classes/swatch.md Retrieves the Swatch's color value formatted as an HSL (Hue, Saturation, Lightness) array. ```typescript get hsl(): Vec3 ``` -------------------------------- ### build() Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/builder.md Builds and returns a Vibrant instance based on the current builder configuration. ```APIDOC ## build() ### Description Constructs and returns a `Vibrant` instance with the configurations applied through the builder. ### Signature ```ts build(): Vibrant ``` ### Returns - [`Vibrant`](vibrant.md) - A configured `Vibrant` instance. ``` -------------------------------- ### Chaining Builder Methods Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/builder.md Demonstrates how to chain multiple configuration methods on a Builder instance before generating the color palette. This is the primary way to use the Builder class. ```javascript Vibrant.from(src) .quality(1) .clearFilters() // ... .getPalette() .then((palette) => {}) ``` -------------------------------- ### colorCount Accessor Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image/classes/histogram.md Gets the total number of colors counted in the histogram. ```APIDOC ## Accessor: colorCount ### Description Retrieves the total count of colors present in the histogram. ### Returns - `number` - The total number of colors. ``` -------------------------------- ### Vibrant Constructor Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/vibrant.md Initializes a new Vibrant instance with an image source and optional configuration options. ```APIDOC ## new Vibrant() ### Description Initializes a new Vibrant instance. ### Parameters #### _src - **_src** (ImageSource) - Required - Path to image file (supports HTTP/HTTPs) #### opts? - **opts** (Partial) - Optional - Options (optional) ### Returns - **Vibrant** - An instance of the Vibrant class. ### Defined in [index.ts:43](https://github.com/Vibrant-Colors/node-vibrant/blob/main/packages/vibrant-core/src/index.ts#L43) ``` -------------------------------- ### Builder Constructor Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/builder.md Initializes a new Builder instance with a source image and optional configuration options. ```APIDOC ## new Builder() ### Description Initializes a new Builder instance. ### Signature ```ts new Builder(src: ImageSource, opts?: Partial): Builder ``` ### Parameters #### src - **src** (ImageSource) - The source of the image to process. #### opts - **opts** (Partial) - Optional configuration options for the builder. Defaults to `{}`. ### Returns - [`Builder`](builder.md) - A new instance of the Builder class. ``` -------------------------------- ### ImageClass Constructor Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image/interfaces/imageclass.md Initializes a new instance of the ImageClass. ```APIDOC ## new ImageClass() ### Description Initializes a new instance of the ImageClass. ### Method Constructor ### Returns - [`Image`](image.md) - An instance of the Image class. ### Defined in [index.ts:46](https://github.com/Vibrant-Colors/node-vibrant/blob/main/packages/vibrant-image/src/index.ts#L46) ``` -------------------------------- ### Get Swatch Hex Value Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-color/classes/swatch.md Retrieves the Swatch's color value formatted as a hexadecimal string. ```typescript get hex(): string ``` -------------------------------- ### Initialize Builder Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/builder.md Constructs a new Builder instance with the image source and optional configuration options. The arguments are the same as the main Vibrant constructor. ```typescript new Builder(src, opts): Builder ``` -------------------------------- ### Get a Worker Pool Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-worker/classes/workermanager.md Retrieves a worker pool associated with the given name. Returns undefined if no worker is found. ```typescript getWorker(name): undefined | WorkerPool ``` -------------------------------- ### Swatch Static Methods Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-color/classes/swatch.md Provides static utility methods for working with Swatch objects, including filtering and cloning. ```APIDOC ## Methods ### applyFilters(colors, filters) #### Parameters ##### colors [`Swatch`](swatch.md)[] ##### filters [`Filter`](../interfaces/filter.md)[] #### Returns [`Swatch`](swatch.md)[] *** ### clone(swatch) Make a value copy of a swatch based on a previous one. Returns a new Swatch instance #### Parameters ##### swatch [`Swatch`](swatch.md) #### Returns [`Swatch`](swatch.md) ``` -------------------------------- ### Get Swatch Red Value (r) Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-color/classes/swatch.md Retrieves the red component of the Swatch's RGB color value. ```typescript get r(): number ``` -------------------------------- ### Instantiate ImageClass Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image/interfaces/imageclass.md Creates a new instance of the ImageClass. This is the primary way to begin working with image data. ```typescript new ImageClass(): Image ``` -------------------------------- ### Get Swatch Green Value (g) Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-color/classes/swatch.md Retrieves the green component of the Swatch's RGB color value. ```typescript get g(): number ``` -------------------------------- ### Vibrant.from() Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/vibrant.md Static method to create a Builder instance from a given image source. ```APIDOC ## from(src) ### Description Static method to create a Builder instance from a given image source. ### Parameters #### src - **src** (ImageSource) - Required - The image source to process. ### Returns - `Builder` - A Builder instance. ### Defined in [index.ts:28](https://github.com/Vibrant-Colors/node-vibrant/blob/main/packages/vibrant-core/src/index.ts#L28) ``` -------------------------------- ### Vibrant.use() Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/vibrant.md Static method to register a custom pipeline for color extraction. ```APIDOC ## use(pipeline) ### Description Static method to register a custom pipeline for color extraction. ### Parameters #### pipeline - **pipeline** (Pipeline) - Required - The pipeline to use. ### Returns - `void` ### Defined in [index.ts:18](https://github.com/Vibrant-Colors/node-vibrant/blob/main/packages/vibrant-core/src/index.ts#L18) ``` -------------------------------- ### Color Difference Status Function Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-color/index.md A function to get the difference status between two colors using the DeltaE94 metric. ```APIDOC ## getColorDiffStatus ### Description Determines the difference status between two colors based on the DeltaE94 metric. ### Signature `getColorDiffStatus(color1: { l: number, a: number, b: number }, color2: { l: number, a: number, b: number }): number` ``` -------------------------------- ### Swatch Constructor Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-color/classes/swatch.md Internal use constructor for creating a Swatch instance. Requires RGB values and population. ```typescript new Swatch(rgb, population): Swatch ``` -------------------------------- ### Get Swatch Blue Value (b) Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-color/classes/swatch.md Retrieves the blue component of the Swatch's RGB color value. ```typescript get b(): number ``` -------------------------------- ### BrowserImage Constructor Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image-browser/classes/browserimage.md Initializes a new instance of the BrowserImage class. This constructor is inherited from the ImageBase class. ```APIDOC ## Constructor ### new BrowserImage() Initializes a new instance of the BrowserImage class. #### Returns - [`BrowserImage`](browserimage.md) - A new instance of BrowserImage. #### Inherited from `ImageBase.constructor` ``` -------------------------------- ### ImageBase Constructor Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image/classes/imagebase.md Initializes a new instance of the ImageBase class. This is an abstract constructor and is typically called by subclasses. ```APIDOC ## Constructor: new ImageBase() ### Description Initializes a new instance of the ImageBase class. ### Returns - `ImageBase`: An instance of the ImageBase class. ``` -------------------------------- ### Get Swatch RGB Value Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-color/classes/swatch.md Retrieves the Swatch's color value formatted as an RGB (Red, Green, Blue) array. ```typescript get rgb(): Vec3 ``` -------------------------------- ### Vibrant.DefaultOpts Property Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/vibrant.md Provides default configuration options for the Vibrant class. ```APIDOC ## DefaultOpts Property ### Description Default options for the Vibrant class. ### Type `Partial` ### Defined in [index.ts:22](https://github.com/Vibrant-Colors/node-vibrant/blob/main/packages/vibrant-core/src/index.ts#L22) ``` -------------------------------- ### Image Interface Methods Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image/interfaces/image.md This section details the available methods for interacting with the Image interface, allowing for image loading, data access, and manipulation. ```APIDOC ## Image Interface Methods This section details the available methods for interacting with the Image interface, allowing for image loading, data access, and manipulation. ### `clear()` #### Description Clears the current image data. #### Method Signature `clear(): void` ### `getHeight()` #### Description Gets the height of the image. #### Method Signature `getHeight(): number` ### `getImageData()` #### Description Retrieves the raw image data. #### Method Signature `getImageData(): ImageData` ### `getPixelCount()` #### Description Gets the total number of pixels in the image. #### Method Signature `getPixelCount(): number` ### `getWidth()` #### Description Gets the width of the image. #### Method Signature `getWidth(): number` ### `load(image)` #### Description Loads an image from a given source. #### Parameters - **image** (`ImageSource`) - The source of the image to load. #### Method Signature `load(image): Promise` ### `remove()` #### Description Removes the current image. #### Method Signature `remove(): void` ### `resize(targetWidth, targetHeight, ratio)` #### Description Resizes the image to the specified dimensions or ratio. #### Parameters - **targetWidth** (`number`) - The target width for resizing. - **targetHeight** (`number`) - The target height for resizing. - **ratio** (`number`) - The scaling ratio. #### Method Signature `resize(targetWidth, targetHeight, ratio): void` ### `scaleDown(opts)` #### Description Scales down the image based on provided options. #### Parameters - **opts** (`ImageOptions`) - Options for scaling down the image. #### Method Signature `scaleDown(opts): void` ### `update(imageData)` #### Description Updates the image with new image data. #### Parameters - **imageData** (`ImageData`) - The new image data to update with. #### Method Signature `update(imageData): void` ``` -------------------------------- ### Defer Constructor Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-types/classes/defer.md Initializes a new Defer instance. This class is an internal implementation detail and mimics the functionality of Promise.withResolvers. ```APIDOC ## new Defer() ### Description Constructs a new Defer object. ### Returns - `Defer`: A new Defer instance. ### Type Parameters - `R`: The type of the value the promise will resolve with. ``` -------------------------------- ### Get Color Palette Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/vibrant.md Call `getPalette()` to asynchronously retrieve the dominant color palette from the image. This method returns a Promise that resolves to a `Palette` object. ```typescript getPalette(): Promise ``` -------------------------------- ### getPalette() Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/builder.md Builds the Vibrant instance and retrieves the color palette. ```APIDOC ## getPalette() ### Description Builds a `Vibrant` instance using the current configuration and then calls its `getPalette` method to generate the color palette. ### Signature ```ts getPalette(): Promise ``` ### Returns - `Promise` - A promise that resolves with the generated color palette. ``` -------------------------------- ### Web Worker Usage Source: https://context7.com/vibrant-colors/node-vibrant/llms.txt Demonstrates how to integrate node-vibrant with Web Workers to offload the CPU-intensive quantization step, improving UI responsiveness. ```APIDOC ## Web Worker Integration ### Description Offloads image quantization to a Web Worker to prevent blocking the UI thread. ### Setup Requires a bundler supporting the `?worker` query suffix (e.g., Vite). ### Code Example ```typescript import { Vibrant, WorkerPipeline } from "node-vibrant/worker"; import PipelineWorker from "node-vibrant/worker.worker?worker"; // Install the worker pipeline once at app startup Vibrant.use(new WorkerPipeline(PipelineWorker as never)); // Subsequent calls automatically use the worker const palette = await Vibrant.from("./large-image.jpg").getPalette(); console.log(palette.Vibrant?.hex); ``` ``` -------------------------------- ### Vibrant.opts Property Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/vibrant.md Stores the configuration options used for the Vibrant instance. ```APIDOC ## opts Property ### Description Stores the configuration options for this Vibrant instance. ### Type `Options` ### Defined in [index.ts:36](https://github.com/Vibrant-Colors/node-vibrant/blob/main/packages/vibrant-core/src/index.ts#L36) ``` -------------------------------- ### Get Color Difference Status Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-color/functions/getcolordiffstatus.md This function returns a string describing the perceptual meaning of a color difference (Delta E). It's primarily used in testing scenarios to categorize color differences. ```typescript function getColorDiffStatus(d): string ``` -------------------------------- ### Instantiate Vibrant Class Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/vibrant.md Use the constructor to create a new Vibrant instance. Provide the image source and optional configuration options. ```typescript new Vibrant(_src, opts?): Vibrant ``` -------------------------------- ### Configure Image Processing Pipeline Source: https://context7.com/vibrant-colors/node-vibrant/llms.txt Use the Builder API to chain configuration options before generating a color palette. Adjust quality, color count, dimensions, and filters. ```typescript import { Vibrant } from "node-vibrant/node"; const palette = await Vibrant.from("./photo.jpg") .quality(1) // no downsampling — most accurate .maxColorCount(256) // quantize to at most 256 colors .maxDimension(500) // scale image down to max 500px on longest side .clearFilters() // remove default filters .addFilter("default") // re-add the default white/black exclusion filter .useQuantizer("mmcq") // use the Median-Cut Quantizer (default) .useGenerator("default") // use the default palette generator .getPalette(); console.log(palette.Vibrant?.hex); // "#3d7abf" console.log(palette.LightMuted?.hsl); // [0.58, 0.42, 0.78] ``` -------------------------------- ### load() Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image/classes/imagebase.md Loads an image from a given source. This method is abstract and must be implemented by subclasses. ```APIDOC ## Method: load(image) ### Description Loads an image from the provided source. ### Parameters #### image - `ImageSource` - The source of the image to load. ### Returns - `Promise`: A promise that resolves with the ImageBase instance after loading. ``` -------------------------------- ### Generator() Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-generator/interfaces/generator.md Creates a new Generator instance. This is the primary way to generate a color palette from provided swatches and optional configuration. ```APIDOC ## Generator() ### Description Creates a new Generator instance. This is the primary way to generate a color palette from provided swatches and optional configuration. ### Signature ```ts Generator(swatches: Swatch[], opts?: object): Resolvable ``` ### Parameters #### swatches - **swatches** (Swatch[]) - Required - An array of Swatch objects to generate the palette from. #### opts - **opts** (object) - Optional - Configuration options for the generator. ### Returns - **Resolvable** - A resolvable object that will eventually yield a Palette. ### Defined in - index.ts:5 ``` -------------------------------- ### ImageBase resize() Method Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image/classes/imagebase.md Abstract method to resize the image to a target width and height, optionally maintaining aspect ratio. This method modifies the image in place. ```typescript abstract resize( targetWidth, targetHeight, ratio): void ``` -------------------------------- ### ImageBase Constructor Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image/classes/imagebase.md Initializes a new instance of the ImageBase class. This is an abstract class and cannot be instantiated directly. ```typescript new ImageBase(): ImageBase ``` -------------------------------- ### Histogram Constructor Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image/classes/histogram.md Initializes a new Histogram instance with pixel data and options. ```APIDOC ## Constructor: new Histogram() ### Description Initializes a new Histogram instance. ### Parameters - **pixels** (`Pixels`) - The pixel data to process. - **opts** (`HistogramOptions`) - Options for configuring the histogram. ### Returns - `Histogram` - A new instance of the Histogram class. ``` -------------------------------- ### ImageBase load() Method Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image/classes/imagebase.md Abstract method to load an image from a source. This method is asynchronous and returns a Promise that resolves with the ImageBase instance. ```typescript abstract load(image): Promise ``` -------------------------------- ### QuantizerOptions Interface Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-quantizer/interfaces/quantizeroptions.md The QuantizerOptions interface allows you to configure the quantization process. The primary option available is `colorCount`, which determines the number of colors to generate in the initial palette. ```APIDOC ## Interface: QuantizerOptions ### Description Configuration options for the vibrant quantizer. ### Properties #### colorCount - **Type**: `number` - **Description**: Amount of colors in initial palette from which the swatches will be generated. - **Default**: `64` ``` -------------------------------- ### load() Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image-node/classes/nodeimage.md Loads an image from a given source. This method overrides the load method from the ImageBase class and returns a Promise. ```APIDOC ## load(image) ### Description Loads an image from a given source. ### Parameters #### image - `ImageSource` - The source of the image to load. ### Returns - `Promise` - A Promise that resolves with the ImageBase object after the image is loaded. ### Overrides `ImageBase.load` ### Defined in [index.ts:69](https://github.com/Vibrant-Colors/node-vibrant/blob/main/packages/vibrant-image-node/src/index.ts#L69) ``` -------------------------------- ### Vibrant.from(src) - Static Builder Factory Source: https://context7.com/vibrant-colors/node-vibrant/llms.txt The primary entry point for creating a Vibrant instance. It accepts an image source (path, URL, or Buffer) and returns a chainable Builder instance. Call .getPalette() on the builder to process the image and retrieve a Palette object. ```APIDOC ## Vibrant.from(src) ### Description Creates a chainable `Builder` instance from an image source. ### Method Static method on the `Vibrant` class. ### Parameters #### Path Parameters - **src** (string | Buffer | HTMLImageElement | HTMLCanvasElement) - Required - The image source. Can be a file path (Node.js), URL, `Buffer` (Node.js), `HTMLImageElement`, or `HTMLCanvasElement` (Browser). ### Usage Example (Node.js) ```typescript import { Vibrant } from "node-vibrant/node"; const palette = await Vibrant.from("./photo.jpg").getPalette(); console.log(palette.Vibrant?.hex); ``` ### Usage Example (Browser) ```typescript import { Vibrant } from "node-vibrant/browser"; Vibrant.from("https://example.com/image.jpg") .getPalette() .then((palette) => { console.log(palette.Vibrant?.hex); }); ``` ### Response Returns a `Builder` instance with a `.getPalette()` method. ``` -------------------------------- ### Quantizer Interface Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-quantizer/interfaces/quantizer.md The Quantizer interface defines the signature for color quantization functions. It accepts pixel data and quantization options, returning an array of Swatch objects. ```APIDOC ## Quantizer() ### Description Processes pixel data to extract dominant colors. ### Parameters #### pixels - **pixels** (Pixels) - The input pixel data. #### opts - **opts** (QuantizerOptions) - Optional configuration for the quantization process. ### Returns - **Resolvable** - A promise that resolves to an array of Swatch objects representing the dominant colors. ``` -------------------------------- ### Builder Class Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/index.md The Builder class provides methods for configuring and creating Vibrant instances. ```APIDOC ## Builder Class ### Description The Builder class is used to configure and construct `Vibrant` instances. It allows for customization of options before the Vibrant object is created. ### Methods - **`Builder(options)`**: Constructor for the Builder class. Accepts an optional `options` object for configuration. - **`build()`**: Creates and returns a `Vibrant` instance based on the current builder configuration. ### Usage Example ```javascript import { Builder } from '@vibrant/core'; const builder = new Builder({ /* options */ }); const vibrant = builder.build(); ``` ``` -------------------------------- ### Build Vibrant Instance Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/builder.md Finalizes the configuration and builds a Vibrant instance based on the current builder settings. This instance can then be used to extract color palettes. ```typescript build(): Vibrant ``` -------------------------------- ### Use Custom Quantizer with Builder Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/builder.md Specifies which `Quantizer` implementation class to use for color quantization. This allows for choosing different algorithms for grouping colors. ```typescript useQuantizer(quantizer, options?): Builder ``` -------------------------------- ### NodeImage Constructor Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image-node/classes/nodeimage.md Initializes a new instance of the NodeImage class. This constructor is inherited from the ImageBase class. ```APIDOC ## new NodeImage() ### Description Initializes a new instance of the NodeImage class. ### Returns - [`NodeImage`](nodeimage.md) - A new instance of NodeImage. ### Inherited from `ImageBase.constructor` ``` -------------------------------- ### WorkerManager Constructor Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-worker/classes/workermanager.md Initializes a new instance of the WorkerManager. ```APIDOC ## new WorkerManager() ### Description Initializes a new instance of the WorkerManager. ### Returns - [`WorkerManager`](workermanager.md) - A new instance of WorkerManager. ``` -------------------------------- ### BrowserImage Constructor Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image-browser/classes/browserimage.md Initializes a new instance of the BrowserImage class. This constructor is inherited from the ImageBase class. ```typescript new BrowserImage(): BrowserImage ``` -------------------------------- ### ImageOptions Interface Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image/interfaces/imageoptions.md Defines the properties for configuring image processing options. ```APIDOC ## Interface: ImageOptions ### Description This interface allows you to configure how images are processed, particularly for downsampling. ### Properties #### maxDimension - **maxDimension** (number) - Optional - The maximum dimension for the longer side of the image during downsampling. If set, this overrides the `quality` setting. - Default: `undefined` #### quality - **quality** (number) - Optional - The scale-down factor for downsampling. A value of 1 means no downsampling. This property is ignored if `maxDimension` is specified. - Default: `5` ``` -------------------------------- ### resize() Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image/classes/imagebase.md Resizes the image to the specified dimensions or ratio. This method is abstract and must be implemented by subclasses. ```APIDOC ## Method: resize(targetWidth, targetHeight, ratio) ### Description Resizes the image. ### Parameters #### targetWidth - `number` - The target width for resizing. #### targetHeight - `number` - The target height for resizing. #### ratio - `number` - The ratio for resizing. ### Returns - `void` ``` -------------------------------- ### quality() Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/builder.md Sets the quality level for image processing. ```APIDOC ## quality() ### Description Sets the `quality` option for the Vibrant instance, affecting the trade-off between processing speed and accuracy. ### Signature ```ts quality(q: number): Builder ``` ### Parameters #### q - **q** (number) - The quality level (e.g., 0 for fastest, 1 for best quality). ### Returns - [`Builder`](builder.md) - The current Builder instance for chaining. ``` -------------------------------- ### useQuantizer() Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/builder.md Specifies a custom quantizer to be used for color quantization. ```APIDOC ## useQuantizer() ### Description Sets the `quantizer` option, allowing you to specify a custom algorithm for quantizing colors. ### Signature ```ts useQuantizer(quantizer: string, options?: any): Builder ``` ### Parameters #### quantizer - **quantizer** (string) - The identifier or path to the custom quantizer. #### options? - **options** (any) - Optional configuration options for the specified quantizer. ### Returns - [`Builder`](builder.md) - The current Builder instance for chaining. ``` -------------------------------- ### BrowserImage.load() Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image-browser/classes/browserimage.md Loads an image into the BrowserImage instance. This method overrides the load method from the ImageBase class and returns a Promise. ```APIDOC ## Method ### load(image) Loads an image into the BrowserImage instance. #### Parameters - **image** (`ImageSource`) - The source of the image to load. #### Returns - `Promise` - A Promise that resolves with the BrowserImage instance after the image is loaded. #### Overrides `ImageBase.load` ``` -------------------------------- ### Use Custom Pipeline Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/vibrant.md The static `use()` method allows you to register a custom processing pipeline with Vibrant. This is an advanced feature for extending functionality. ```typescript static use(pipeline): void ``` -------------------------------- ### scaleDown() Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image/classes/imagebase.md Scales down the image according to the provided options. This method is abstract and must be implemented by subclasses. ```APIDOC ## Method: scaleDown(opts) ### Description Scales down the image based on the provided options. ### Parameters #### opts - `ImageOptions` - Options for scaling down the image. ### Returns - `void` ``` -------------------------------- ### Defer Properties Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-types/classes/defer.md Exposes the promise, resolve, and reject functions associated with the Defer instance. ```APIDOC ## Properties ### promise - **Type**: `Promise` - **Description**: The underlying Promise object that can be awaited. ### reject - **Type**: `(error: any) => void` - **Description**: A function to reject the associated Promise with an error. ### resolve - **Type**: `(thenableOrResult: R | Promise) => void` - **Description**: A function to resolve the associated Promise with a value or another Promise. ``` -------------------------------- ### Access Swatch Properties and Helpers Source: https://context7.com/vibrant-colors/node-vibrant/llms.txt Retrieve color swatches from a palette and access their properties in various formats (hex, RGB, HSL). Includes accessibility helpers and serialization. ```typescript import { Vibrant } from "node-vibrant/node"; const { Vibrant: swatch } = await Vibrant.from("./image.jpg").getPalette(); if (swatch) { // Color representations console.log(swatch.hex); // "#3d7abf" — CSS hex string console.log(swatch.rgb); // [61, 122, 191] — Vec3 [r, g, b] (0–255) console.log(swatch.hsl); // [0.583, 0.52, 0.494] — Vec3 [h, s, l] (0–1) console.log(swatch.r, swatch.g, swatch.b); // 61 122 191 // Pixel frequency in the source image console.log(swatch.population); // e.g. 342 // Accessibility helpers — white or black for legible text on this background console.log(swatch.titleTextColor); // "#fff" (YIQ threshold: 200) console.log(swatch.bodyTextColor); // "#fff" (YIQ threshold: 150) // Serialization console.log(swatch.toJSON()); // { rgb: [61, 122, 191], population: 342 } } ``` -------------------------------- ### Import Vibrant for Node.js or Browser Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/guides/get-started.md Import the Vibrant class from the appropriate module based on your environment. For Node.js, use 'node-vibrant/node'; for browsers, use 'node-vibrant/browser'. ```typescript // Node.js usage import { Vibrant } from "node-vibrant/node"; // Browser usage import { Vibrant } from "node-vibrant/browser"; ``` -------------------------------- ### Replace Global Pipeline with Custom Implementation Source: https://context7.com/vibrant-colors/node-vibrant/llms.txt Use `Vibrant.use()` to replace the default image processing pipeline with a custom one, such as `BasicPipeline` with registered quantizers and generators. ```typescript import { Vibrant, BasicPipeline } from "node-vibrant/node"; import { MMCQ } from "@vibrant/quantizer-mmcq"; import { DefaultGenerator } from "@vibrant/generator-default"; const pipeline = new BasicPipeline(); pipeline.quantizer.register("mmcq", MMCQ); pipeline.generator.register("default", DefaultGenerator); Vibrant.use(pipeline); const palette = await Vibrant.from("./image.jpg").getPalette(); console.log(palette.Vibrant?.hex); ``` -------------------------------- ### Instantiate Defer Class Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-types/classes/defer.md Creates a new instance of the Defer class. This class is an internal implementation detail and is not intended for direct public use. ```typescript new Defer() ``` -------------------------------- ### BrowserImage.load Method Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image-browser/classes/browserimage.md Loads an image source into the BrowserImage instance and returns a Promise that resolves with the BrowserImage instance once loaded. This method overrides the load method from the ImageBase class. ```typescript load(image): Promise ``` -------------------------------- ### Color Conversion Utilities Source: https://context7.com/vibrant-colors/node-vibrant/llms.txt Utilize standalone functions from `@vibrant/color` for converting between Hex, RGB, and HSL color formats, and calculating color differences. ```typescript import { hexToRgb, rgbToHex, rgbToHsl, hslToRgb, rgbToXyz, xyzToCIELab, rgbToCIELab, deltaE94, rgbDiff, hexDiff, getColorDiffStatus, DELTAE94_DIFF_STATUS, } from "@vibrant/color"; // Hex ↔ RGB const rgb = hexToRgb("#3d7abf"); // [61, 122, 191] const hex = rgbToHex(61, 122, 191); // "#3d7abf" // RGB → HSL const hsl = rgbToHsl(61, 122, 191); // [0.583, 0.52, 0.494] const back = hslToRgb(0.583, 0.52, 0.494); // ≈ [61, 122, 191] // Perceptual color difference (CIE Delta E 1994) const lab1 = rgbToCIELab(61, 122, 191); const lab2 = rgbToCIELab(70, 130, 200); const diff = deltaE94(lab1, lab2); console.log(diff); // ~3.4 — "Good" // Convenience wrappers const dRgb = rgbDiff([61, 122, 191], [200, 50, 50]); // large value const dHex = hexDiff("#3d7abf", "#3d7abf"); // 0 — identical console.log(getColorDiffStatus(0)); // "Perfect" console.log(getColorDiffStatus(1.5)); // "Close" console.log(getColorDiffStatus(5)); // "Good" console.log(getColorDiffStatus(30)); // "Similar" console.log(getColorDiffStatus(75)); // "Wrong" // Threshold constants console.log(DELTAE94_DIFF_STATUS); // { NA: 0, PERFECT: 1, CLOSE: 2, GOOD: 10, SIMILAR: 50 } ``` -------------------------------- ### DefaultGenerator() Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-generator-default/functions/defaultgenerator.md Generates a color palette from a given array of swatches and optional configuration options. ```APIDOC ## Function: DefaultGenerator() ### Signature ```ts function DefaultGenerator(swatches, opts?): Resolvable ``` ### Parameters #### swatches - `Swatch[]` - An array of Swatch objects to generate the palette from. #### opts? - `object` - Optional configuration object for the generator. ### Returns - `Resolvable` - A resolvable object that will eventually yield the generated Palette. ### Defined in - `vibrant-generator-default/src/index.ts:296` ``` -------------------------------- ### Sending Messages with postMessage (Options) Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-worker/interfaces/taskworker.md Transmit messages to the worker's global environment using structured serialization options. ```typescript postMessage(message, options?): void ``` -------------------------------- ### Configure node-vibrant for Web Worker Usage Source: https://github.com/vibrant-colors/node-vibrant/blob/main/README.md Configure node-vibrant to use Web Workers for image quantization to prevent UI thread freezing. This requires bundler support for worker imports. ```typescript import { Vibrant, WorkerPipeline } from "node-vibrant/worker"; import PipelineWorker from "node-vibrant/worker.worker?worker"; Vibrant.use(new WorkerPipeline(PipelineWorker as never)); ``` -------------------------------- ### Vibrant Class Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/index.md The Vibrant class is the main entry point for color extraction and manipulation. ```APIDOC ## Vibrant Class ### Description The `Vibrant` class is the core component for extracting color palettes from images. It provides methods to access the generated swatches and their properties. ### Methods - **`Vibrant(source, options)`**: Constructor for the Vibrant class. Takes an image `source` and optional `options`. - **`getSwatches()`**: Returns an object containing all extracted color swatches. - **`getPalette()`**: Returns a curated color palette, often the most dominant colors. ### Usage Example ```javascript import Vibrant from '@vibrant/core'; const vibrant = new Vibrant('/path/to/image.jpg'); const swatches = vibrant.getSwatches(); const palette = vibrant.getPalette(); ``` ``` -------------------------------- ### Clone Swatch Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-color/classes/swatch.md A static method that creates a deep copy of a given Swatch instance, returning a new Swatch object. ```typescript static clone(swatch): Swatch ``` -------------------------------- ### Vibrant.getPalettes() Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-core/classes/vibrant.md Asynchronously retrieves multiple color palettes from the image. ```APIDOC ## getPalettes() ### Description Asynchronously retrieves multiple color palettes from the image. ### Returns - `Promise<{}>` - A promise that resolves with an object containing various palettes. ### Defined in [index.ts:83](https://github.com/Vibrant-Colors/node-vibrant/blob/main/packages/vibrant-core/src/index.ts#L83) ``` -------------------------------- ### Web Worker Usage for Quantization Source: https://context7.com/vibrant-colors/node-vibrant/llms.txt Offload CPU-intensive quantization to a Web Worker by importing from 'node-vibrant/worker' and using the WorkerPipeline. This requires a bundler that supports the '?worker' query suffix. ```typescript import { Vibrant, WorkerPipeline } from "node-vibrant/worker"; import PipelineWorker from "node-vibrant/worker.worker?worker"; // Install the worker pipeline once at app startup Vibrant.use(new WorkerPipeline(PipelineWorker as never)); // All subsequent calls automatically run quantization off-thread const palette = await Vibrant.from("./large-image.jpg").getPalette(); console.log(palette.Vibrant?.hex); ``` -------------------------------- ### ImageBase scaleDown() Method Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image/classes/imagebase.md Scales down the image based on provided options. This method is intended for reducing image size while potentially preserving quality. ```typescript scaleDown(opts): void ``` -------------------------------- ### BrowserImage.resize() Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-image-browser/classes/browserimage.md Resizes the image to the specified dimensions or ratio. This method overrides the resize method from the ImageBase class. ```APIDOC ## Method ### resize(targetWidth, targetHeight, ratio) Resizes the image. #### Parameters - **targetWidth** (`number`) - The target width for resizing. - **targetHeight** (`number`) - The target height for resizing. - **ratio** (`number`) - The aspect ratio to maintain during resizing. #### Returns - `void` #### Overrides `ImageBase.resize` ``` -------------------------------- ### Swatch.applyFilters() Source: https://context7.com/vibrant-colors/node-vibrant/llms.txt Filters an array of swatches based on provided filter functions. Each filter function receives the RGBA values of a swatch and should return true if the swatch passes the filter. ```APIDOC ## `Swatch.applyFilters()` ### Description Filters an array of swatches based on provided filter functions. Each filter function receives the RGBA values of a swatch and should return true if the swatch passes the filter. ### Parameters - **swatches** (Array) - The array of swatches to filter. - **filters** (Array) - An array of filter functions. A swatch is kept only if all filters return true. ### Filter Function Signature `Filter = (r: number, g: number, b: number, alpha: number) => boolean` ### Returns - (Array) - A new array containing only the swatches that passed all filters. ### Example ```typescript import { Swatch } from "@vibrant/color"; import type { Filter } from "@vibrant/color"; const notWhiteOrBlack: Filter = (r, g, b, _a) => { const isWhite = r > 240 && g > 240 && b > 240; const isBlack = r < 15 && g < 15 && b < 15; return !isWhite && !isBlack; }; const swatches = [ new Swatch([255, 255, 255], 10), // white — filtered out new Swatch([61, 122, 191], 342), // blue — kept new Swatch([5, 5, 5 ], 20), // black — filtered out ]; const filtered = Swatch.applyFilters(swatches, [notWhiteOrBlack]); console.log(filtered.length); // 1 console.log(filtered[0]?.hex); // "#3d7abf" ``` ``` -------------------------------- ### Color Conversion Functions Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-color/index.md Utility functions for converting colors between different formats like HEX, RGB, and HSL, as well as to and from CIELab and XYZ color spaces. ```APIDOC ## hexToRgb ### Description Converts a HEX color string to an RGB object. ### Signature `hexToRgb(hex: string): { r: number, g: number, b: number }` ## rgbToHex ### Description Converts an RGB color object to a HEX string. ### Signature `rgbToHex(rgb: { r: number, g: number, b: number }): string` ## hslToRgb ### Description Converts an HSL color object to an RGB object. ### Signature `hslToRgb(hsl: { h: number, s: number, l: number }): { r: number, g: number, b: number }` ## rgbToHsl ### Description Converts an RGB color object to an HSL object. ### Signature `rgbToHsl(rgb: { r: number, g: number, b: number }): { h: number, s: number, l: number }` ## rgbToCIELab ### Description Converts an RGB color object to a CIELab color object. ### Signature `rgbToCIELab(rgb: { r: number, g: number, b: number }): { l: number, a: number, b: number }` ## xyzToCIELab ### Description Converts an XYZ color object to a CIELab color object. ### Signature `xyzToCIELab(xyz: { x: number, y: number, z: number }): { l: number, a: number, b: number }` ## rgbToXyz ### Description Converts an RGB color object to an XYZ color object. ### Signature `rgbToXyz(rgb: { r: number, g: number, b: number }): { x: number, y: number, z: number }` ``` -------------------------------- ### Apply Filters to Swatches Source: https://github.com/vibrant-colors/node-vibrant/blob/main/docs/reference/vibrant-color/classes/swatch.md A static method that applies a list of filters to an array of Swatches, returning the filtered Swatches. ```typescript static applyFilters(colors, filters): Swatch[] ```