### Install and Test color-diff Source: https://github.com/markusn/color-diff/blob/master/README.md Commands to install the color-diff package via npm and run the project test suite. ```bash npm install color-diff --save npm test ``` -------------------------------- ### Install color-diff using npm Source: https://context7.com/markusn/color-diff/llms.txt This snippet shows how to install the color-diff library using npm, a package manager for Node.js. This is the first step to using the library in your JavaScript project. ```bash npm install color-diff --save ``` -------------------------------- ### Defining Color Objects Source: https://github.com/markusn/color-diff/blob/master/README.md Examples of the required object structures for RGBA and LAB color representations used by the library. ```javascript // RGBA Color Example const rgba = { R: 255, G: 1, B: 0 }; // LAB Color Example const lab = { L: 100, a: 0.005, b: -0.010 }; ``` -------------------------------- ### Finding Closest and Furthest Colors Source: https://github.com/markusn/color-diff/blob/master/README.md Examples of using closest() and furthest() functions to find specific colors within a defined palette based on CIEDE2000 difference. ```javascript const color = { R: 255, G: 1, B: 30 }; const palette = [ {R: 255, G: 0, B: 0 }, {R: 0, G: 255, B: 0 }, {R: 0, G: 0, B: 255} ]; // Find closest closest(color, palette); // {R: 255, G: 0, B: 0 } // Find furthest const color2 = { R: 255, G: 255, B: 255 }; const palette2 = [ {R: 0, G: 0, B: 0 }, {R: 255, G: 255, B: 255 } ]; furthest(color2, palette2); // {R: 0, G: 0, B: 0 } ``` -------------------------------- ### Importing color-diff Modules Source: https://github.com/markusn/color-diff/blob/master/README.md Demonstrates how to import the library functions using both CommonJS and ECMAScript Modules (ESM). ```javascript // CommonJS const { closest, furthest, diff, mapPalette, paletteMapKey, rgbaToLab, mapPaletteLab, labPaletteMapKey } = require("color-diff"); // ESM import { closest, furthest, diff, mapPalette, paletteMapKey, rgbaToLab, mapPaletteLab, labPaletteMapKey } from "color-diff"; ``` -------------------------------- ### Generate keys for color mapping Source: https://context7.com/markusn/color-diff/llms.txt Creates a string key for a color object, formatted as 'rgb(R, G, B)' or 'rgba(R, G, B, A)'. This is used to index results from mapPalette. ```javascript import { paletteMapKey } from "color-diff"; const red = { R: 255, G: 0, B: 0 }; const redKey = paletteMapKey(red); const semiRed = { R: 255, G: 0, B: 0, A: 0.5 }; const semiRedKey = paletteMapKey(semiRed); const blueLower = { r: 0, g: 0, b: 255 }; const blueKey = paletteMapKey(blueLower); ``` -------------------------------- ### Generate LAB Color Map Key Source: https://context7.com/markusn/color-diff/llms.txt Creates a unique string key for a LAB color, formatted as `lab(L, a, b)`. This key is essential for accessing mapped colors from the results of `mapPaletteLab()`. ```javascript import { labPaletteMapKey, rgbaToLab } from "color-diff"; // Generate key for LAB color const labColor = { L: 53.23, a: 80.11, b: 67.22 }; const key = labPaletteMapKey(labColor); // Returns: "lab(53.23, 80.11, 67.22)" // Use with mapPaletteLab results const whiteLab = rgbaToLab({ R: 255, G: 255, B: 255 }); const whiteKey = labPaletteMapKey(whiteLab); // Returns key string for looking up mapped colors ``` -------------------------------- ### Find Closest Color in Palette (JavaScript) Source: https://context7.com/markusn/color-diff/llms.txt Demonstrates how to find the color in a given palette that is perceptually closest to a target color using the CIEDE2000 algorithm. It supports handling colors with alpha channels by specifying a background color. ```javascript import { closest } from "color-diff"; // Define the target color (reddish) const targetColor = { R: 255, G: 1, B: 30 }; // Define a palette of colors to search const palette = [ { R: 255, G: 0, B: 0 }, // red { R: 0, G: 255, B: 0 }, // green { R: 0, G: 0, B: 255 } // blue ]; // Find the closest match const closestColor = closest(targetColor, palette); // Returns: { R: 255, G: 0, B: 0 } (red) // With alpha channel and custom background const semiTransparentColor = { R: 255, G: 0, B: 0, A: 0.5 }; const background = { R: 255, G: 255, B: 255 }; // white background const match = closest(semiTransparentColor, palette, background); // Returns the closest color accounting for transparency ``` -------------------------------- ### labPaletteMapKey Source: https://context7.com/markusn/color-diff/llms.txt Generates a string key for a LAB color to be used with mapPaletteLab results. The key format is `lab(L, a, b)`. ```APIDOC ## labPaletteMapKey(color) ### Description Generates a string key for a LAB color to be used with mapPaletteLab results. The key format is `lab(L, a, b)`. ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **color** (object) - Required - The color in LAB format {L, a, b}. ### Request Example ```javascript import { labPaletteMapKey, rgbaToLab } from "color-diff"; const labColor = { L: 53.23, a: 80.11, b: 67.22 }; const key = labPaletteMapKey(labColor); // Returns: "lab(53.23, 80.11, 67.22)" const whiteLab = rgbaToLab({ R: 255, G: 255, B: 255 }); const whiteKey = labPaletteMapKey(whiteLab); // Returns key string for looking up mapped colors ``` ### Response #### Success Response (200) - **key** (string) - A string representation of the LAB color in the format "lab(L, a, b)". #### Response Example ```json { "key": "lab(53.23, 80.11, 67.22)" } ``` ``` -------------------------------- ### mapPaletteLab Source: https://context7.com/markusn/color-diff/llms.txt Maps each LAB color in paletteA to the closest or furthest LAB color in paletteB. More efficient than `mapPalette()` when working with pre-converted LAB colors. ```APIDOC ## mapPaletteLab(paletteA, paletteB, type) ### Description Maps each LAB color in paletteA to the closest or furthest LAB color in paletteB. More efficient than `mapPalette()` when working with pre-converted LAB colors. ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **paletteA** (array) - Required - The source palette of colors in LAB format [{L, a, b}, ...]. - **paletteB** (array) - Required - The target palette of colors in LAB format [{L, a, b}, ...]. - **type** (string) - Required - Either "closest" or "furthest". ### Request Example ```javascript import { mapPaletteLab, labPaletteMapKey, rgbaToLab } from "color-diff"; const sourceLab = [ rgbaToLab({ R: 255, G: 255, B: 255 }), rgbaToLab({ R: 0, G: 0, B: 0 }), rgbaToLab({ R: 0, G: 0, B: 128 }), // navy rgbaToLab({ R: 0, G: 0, B: 255 }) // blue ]; const targetLab = [ rgbaToLab({ R: 255, G: 255, B: 255 }), rgbaToLab({ R: 0, G: 0, B: 0 }), rgbaToLab({ R: 0, G: 0, B: 255 }) // blue only, no navy ]; // Map closest colors const mapping = mapPaletteLab(sourceLab, targetLab, "closest"); // Navy will map to blue (closest available color) // Map furthest colors for contrast const contrastMapping = mapPaletteLab(sourceLab, targetLab, "furthest"); ``` ### Response #### Success Response (200) - **mapping** (object) - An object where keys are generated using `labPaletteMapKey` for colors in `paletteA`, and values are the corresponding mapped LAB colors from `paletteB`. #### Response Example ```json { "lab(0, 0, -128)": {"L": 37.96, "a": -1.72, "b": -50.59}, "lab(100, 0, 0)": {"L": 100, "a": 0, "b": 0}, "lab(53.23, 80.11, 67.22)": {"L": 100, "a": 0, "b": 0} } ``` ``` -------------------------------- ### Calculate CIEDE2000 Color Difference (JavaScript) Source: https://context7.com/markusn/color-diff/llms.txt Shows how to calculate the CIEDE2000 color difference between two colors. The function accepts colors in RGB or LAB formats and can account for transparency when a background color is provided. A difference of 0 indicates identical colors. ```javascript import { diff } from "color-diff"; // Compare two LAB colors const labColor1 = { L: 50.0, a: 2.6772, b: -79.7751 }; const labColor2 = { L: 50.0, a: 0.0, b: -82.7485 }; const labDifference = diff(labColor1, labColor2); // Returns: ~2.0425 // Compare two RGB colors (automatically converted to LAB) const white = { R: 255, G: 255, B: 255 }; const black = { R: 0, G: 0, B: 0 }; const maxDifference = diff(white, black); // Returns: 100.0 (maximum difference) // Compare identical colors const red1 = { R: 255, G: 0, B: 0 }; const red2 = { R: 255, G: 0, B: 0 }; const noDifference = diff(red1, red2); // Returns: 0.0 // Compare with transparency using background color const semiRed = { R: 255, G: 0, B: 0, A: 0.5 }; const solidBlue = { R: 0, G: 0, B: 255 }; const background = { R: 255, G: 255, B: 255 }; const transparentDiff = diff(semiRed, solidBlue, background); // Returns difference accounting for transparency against white background ``` -------------------------------- ### Find Furthest Color in Palette (JavaScript) Source: https://context7.com/markusn/color-diff/llms.txt Illustrates how to find the color in a palette that is perceptually furthest from a target color using the CIEDE2000 algorithm. This is useful for maximizing contrast or finding complementary colors. ```javascript import { furthest } from "color-diff"; // Define a white target color const targetColor = { R: 255, G: 255, B: 255 }; // Define a palette const palette = [ { R: 0, G: 0, B: 0 }, // black { R: 255, G: 255, B: 255 } // white ]; // Find the most different color const furthestColor = furthest(targetColor, palette); // Returns: { R: 0, G: 0, B: 0 } (black - maximum contrast) // Finding the most contrasting color for accessibility const backgroundColor = { R: 240, G: 240, B: 240 }; // light gray const textColors = [ { R: 100, G: 100, B: 100 }, // gray { R: 0, G: 0, B: 0 }, // black { R: 50, G: 50, B: 50 } // dark gray ]; const bestContrast = furthest(backgroundColor, textColors); // Returns: { R: 0, G: 0, B: 0 } (black has highest contrast) ``` -------------------------------- ### Map palettes using color similarity Source: https://context7.com/markusn/color-diff/llms.txt Maps colors from a source palette to the closest or furthest colors in a target palette. It returns a mapping object where keys are generated via paletteMapKey. ```javascript import { mapPalette, paletteMapKey } from "color-diff"; const sourcePalette = [{ R: 255, G: 255, B: 255 }, { R: 0, G: 0, B: 0 }, { R: 0, G: 0, B: 128 }, { R: 0, G: 0, B: 255 }, { R: 255, G: 255, B: 0 }, { R: 255, G: 215, B: 0 }]; const targetPalette = [{ R: 255, G: 255, B: 255 }, { R: 0, G: 0, B: 0 }, { R: 0, G: 0, B: 255 }, { R: 255, G: 215, B: 0 }]; const closestMapping = mapPalette(sourcePalette, targetPalette, "closest"); const navy = { R: 0, G: 0, B: 128 }; const navyKey = paletteMapKey(navy); const mappedColor = closestMapping[navyKey]; const contrastMapping = mapPalette(sourcePalette, targetPalette, "furthest"); ``` -------------------------------- ### Convert RGBA to LAB color space Source: https://context7.com/markusn/color-diff/llms.txt Converts RGBA color objects into LAB color space. This is essential for efficient color comparisons using the CIEDE2000 algorithm, supporting both uppercase and lowercase property names and optional alpha blending. ```javascript import { rgbaToLab } from "color-diff"; const red = { R: 255, G: 0, B: 0 }; const redLab = rgbaToLab(red); const blueLower = { r: 0, g: 0, b: 255 }; const blueLab = rgbaToLab(blueLower); const semiTransparentGreen = { R: 0, G: 255, B: 0, A: 0.5 }; const background = { R: 255, G: 255, B: 255 }; const greenLab = rgbaToLab(semiTransparentGreen, background); const palette = [{ R: 255, G: 255, B: 255 }, { R: 0, G: 0, B: 0 }, { R: 255, G: 0, B: 0 }]; const paletteLab = palette.map(c => rgbaToLab(c)); ``` -------------------------------- ### Map LAB Colors Between Palettes Source: https://context7.com/markusn/color-diff/llms.txt Maps each LAB color from a source palette to the closest or furthest LAB color in a target palette. This function is optimized for scenarios where colors are already in the LAB color space, offering better performance than `mapPalette()`. ```javascript import { mapPaletteLab, labPaletteMapKey, rgbaToLab } from "color-diff"; // Convert palettes to LAB const sourceLab = [ rgbaToLab({ R: 255, G: 255, B: 255 }), rgbaToLab({ R: 0, G: 0, B: 0 }), rgbaToLab({ R: 0, G: 0, B: 128 }), // navy rgbaToLab({ R: 0, G: 0, B: 255 }) // blue ]; const targetLab = [ rgbaToLab({ R: 255, G: 255, B: 255 }), rgbaToLab({ R: 0, G: 0, B: 0 }), rgbaToLab({ R: 0, G: 0, B: 255 }) // blue only, no navy ]; // Map closest colors const mapping = mapPaletteLab(sourceLab, targetLab, "closest"); // Navy will map to blue (closest available color) // Access results using labPaletteMapKey const navyLab = rgbaToLab({ R: 0, G: 0, B: 128 }); const navyKey = labPaletteMapKey(navyLab); const mappedNavy = mapping[navyKey]; // Returns the LAB representation of blue // Map furthest colors for contrast const contrastMapping = mapPaletteLab(sourceLab, targetLab, "furthest"); ``` -------------------------------- ### Calculate Color Difference Source: https://context7.com/markusn/color-diff/llms.txt Calculates the CIEDE2000 color difference between two colors. Works with RGB, RGBA, and LAB color formats, optionally using a background color for transparency. ```APIDOC ## diff(color1, color2, bc) ### Description Calculates the CIEDE2000 color difference between two colors. Returns a numeric value where 0 means identical colors, and higher values indicate greater perceptual difference. Works with both RGB and LAB color formats. ### Method `diff(color1, color2, bc)` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **color1** (object) - Required - The first color object (RGB, RGBA, or LAB). - **color2** (object) - Required - The second color object (RGB, RGBA, or LAB). - **bc** (object) - Optional - The background color object (R, G, B) to use when calculating differences for colors with alpha channels. ### Request Example ```javascript import { diff } from "color-diff"; // Compare two LAB colors const labColor1 = { L: 50.0, a: 2.6772, b: -79.7751 }; const labColor2 = { L: 50.0, a: 0.0, b: -82.7485 }; const labDifference = diff(labColor1, labColor2); console.log(labDifference); // Output: ~2.0425 // Compare two RGB colors const white = { R: 255, G: 255, B: 255 }; const black = { R: 0, G: 0, B: 0 }; const maxDifference = diff(white, black); console.log(maxDifference); // Output: 100.0 // Compare identical colors const red1 = { R: 255, G: 0, B: 0 }; const red2 = { R: 255, G: 0, B: 0 }; const noDifference = diff(red1, red2); console.log(noDifference); // Output: 0.0 // Compare with transparency using background color const semiRed = { R: 255, G: 0, B: 0, A: 0.5 }; const solidBlue = { R: 0, G: 0, B: 255 }; const background = { R: 255, G: 255, B: 255 }; const transparentDiff = diff(semiRed, solidBlue, background); console.log(transparentDiff); // Output: Difference accounting for transparency ``` ### Response #### Success Response (200) - **difference** (number) - The CIEDE2000 color difference value between the two input colors. ``` -------------------------------- ### Find Closest Color Source: https://context7.com/markusn/color-diff/llms.txt Finds the color in a given palette that is perceptually closest to a target color using the CIEDE2000 algorithm. Supports optional background color for transparent colors. ```APIDOC ## closest(color, palette, bc) ### Description Finds the closest color in a palette to a target color using the CIEDE2000 algorithm. The optional `bc` parameter specifies the background color used when colors have alpha channels, defaulting to white if not provided. ### Method `closest(color, palette, bc)` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **color** (object) - Required - The target color object with R, G, B properties (and optional A for alpha). - **palette** (array) - Required - An array of color objects to search within. - **bc** (object) - Optional - The background color object (R, G, B) to use when calculating differences for colors with alpha channels. ### Request Example ```javascript import { closest } from "color-diff"; const targetColor = { R: 255, G: 1, B: 30 }; const palette = [ { R: 255, G: 0, B: 0 }, // red { R: 0, G: 255, B: 0 }, // green { R: 0, G: 0, B: 255 } // blue ]; const closestColor = closest(targetColor, palette); console.log(closestColor); // Output: { R: 255, G: 0, B: 0 } const semiTransparentColor = { R: 255, G: 0, B: 0, A: 0.5 }; const background = { R: 255, G: 255, B: 255 }; // white background const match = closest(semiTransparentColor, palette, background); console.log(match); // Output: Closest color considering transparency ``` ### Response #### Success Response (200) - **color** (object) - The color object from the palette that is closest to the target color. ``` -------------------------------- ### Find closest LAB color in a palette Source: https://context7.com/markusn/color-diff/llms.txt Identifies the color in a provided LAB palette that is closest to a target LAB color. This is highly efficient for batch processing when colors are already converted to LAB. ```javascript import { closestLab, rgbaToLab } from "color-diff"; const targetLab = { L: 50.0, a: 2.5, b: 0.0 }; const paletteLab = [{ L: 50.0, a: 3.1736, b: 0.5854 }, { L: 73.0, a: 25.0, b: -18.0 }, { L: 61.0, a: -5.0, b: 29.0 }]; const closest = closestLab(targetLab, paletteLab); const white = rgbaToLab({ R: 255, G: 255, B: 255 }); const black = rgbaToLab({ R: 0, G: 0, B: 0 }); const red = rgbaToLab({ R: 255, G: 0, B: 0 }); const labPalette = [white, black, red]; const testColor = rgbaToLab({ R: 200, G: 50, B: 50 }); const match = closestLab(testColor, labPalette); ``` -------------------------------- ### furthestLab Source: https://context7.com/markusn/color-diff/llms.txt Finds the most different LAB color in a palette from a target LAB color. Useful for contrast calculations with pre-converted LAB colors. ```APIDOC ## furthestLab(targetColor, palette) ### Description Finds the most different LAB color in a palette from a target LAB color. Useful for contrast calculations with pre-converted LAB colors. ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **targetColor** (object) - Required - The target color in LAB format {L, a, b}. - **palette** (array) - Required - An array of colors in LAB format [{L, a, b}, ...]. ### Request Example ```javascript import { furthestLab, rgbaToLab } from "color-diff"; const whiteLab = rgbaToLab({ R: 255, G: 255, B: 255 }); const blackLab = rgbaToLab({ R: 0, G: 0, B: 0 }); const yellowLab = rgbaToLab({ R: 255, G: 255, B: 0 }); const blueLab = rgbaToLab({ R: 0, G: 0, B: 255 }); const palette = [whiteLab, blackLab, yellowLab, blueLab]; const furthestFromWhite = furthestLab(whiteLab, palette); // Returns: blackLab ``` ### Response #### Success Response (200) - **color** (object) - The LAB color object from the palette that is furthest from the target color. #### Response Example ```json { "L": 0, "a": 0, "b": 0 } ``` ``` -------------------------------- ### Find Furthest Color Source: https://context7.com/markusn/color-diff/llms.txt Finds the color in a given palette that is perceptually furthest from a target color using the CIEDE2000 algorithm. Useful for maximizing contrast. ```APIDOC ## furthest(color, palette, bc) ### Description Finds the most different (furthest) color in a palette from a target color using the CIEDE2000 algorithm. Useful for ensuring maximum contrast or finding complementary colors. ### Method `furthest(color, palette, bc)` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **color** (object) - Required - The target color object with R, G, B properties (and optional A for alpha). - **palette** (array) - Required - An array of color objects to search within. - **bc** (object) - Optional - The background color object (R, G, B) to use when calculating differences for colors with alpha channels. ### Request Example ```javascript import { furthest } from "color-diff"; const targetColor = { R: 255, G: 255, B: 255 }; // white const palette = [ { R: 0, G: 0, B: 0 }, // black { R: 255, G: 255, B: 255 } // white ]; const furthestColor = furthest(targetColor, palette); console.log(furthestColor); // Output: { R: 0, G: 0, B: 0 } // Example for accessibility contrast const backgroundColor = { R: 240, G: 240, B: 240 }; // light gray const textColors = [ { R: 100, G: 100, B: 100 }, // gray { R: 0, G: 0, B: 0 }, // black { R: 50, G: 50, B: 50 } // dark gray ]; const bestContrast = furthest(backgroundColor, textColors); console.log(bestContrast); // Output: { R: 0, G: 0, B: 0 } ``` ### Response #### Success Response (200) - **color** (object) - The color object from the palette that is furthest from the target color. ``` -------------------------------- ### Find Furthest LAB Color in Palette Source: https://context7.com/markusn/color-diff/llms.txt Identifies the LAB color within a given palette that is most perceptually different from a target LAB color. This is useful for contrast calculations when working with pre-converted LAB colors. ```javascript import { furthestLab, rgbaToLab } from "color-diff"; // Create LAB palette const whiteLab = rgbaToLab({ R: 255, G: 255, B: 255 }); const blackLab = rgbaToLab({ R: 0, G: 0, B: 0 }); const yellowLab = rgbaToLab({ R: 255, G: 255, B: 0 }); const blueLab = rgbaToLab({ R: 0, G: 0, B: 255 }); const palette = [whiteLab, blackLab, yellowLab, blueLab]; // Find maximum contrast for white const furthestFromWhite = furthestLab(whiteLab, palette); // Returns: blackLab (maximum perceptual difference) // Find maximum contrast for blue const furthestFromBlue = furthestLab(blueLab, palette); // Returns: yellowLab (complementary color with high contrast) ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.