Advanced ColorUtils Library

A TypeScript library for working with colors, providing functionality to find distinct colors from a list based on a similarity threshold.

Description

Unleash the full potential of color manipulation with the ColorUtils library! Designed for developers who need precise control over color processing, this TypeScript library provides powerful tools to efficiently find and manipulate distinct colors from any color palette. Whether you're working on data visualization, graphic design, or user interface development, ColorUtils ensures your colors are perfectly balanced and aesthetically pleasing.

Key Features:

• Precision Color Conversion: Seamlessly convert between HEX and LAB color spaces to ensure accurate color representation and manipulation.
• Distinct Color Extraction: Effortlessly extract a specified number of distinct colors from any list, using customizable similarity thresholds to ensure the perfect balance.
• Performance Optimization: Optimized for both memory and time efficiency, making it suitable for handling large datasets with millions of colors.
• TypeScript Support: Fully typed for enhanced developer experience and robust error checking.

Why Choose ColorUtils?

• High Efficiency: Designed to handle massive color datasets with ease, providing rapid results even with millions of colors.
• Customizability: Fine-tune color similarity thresholds to match your specific needs and achieve the perfect color harmony.
• Reliability: Built with rigorous testing and performance benchmarks to ensure consistent and reliable results.
• Ease of Use: Intuitive API design, comprehensive documentation, and seamless integration into any TypeScript project.
• Elevate your projects with the precision and performance of the ColorUtils library, your ultimate tool for advanced color processing and manipulation.

Installation

Install the library using npm:

npm install advanced-color-utils

Usage

Importing the Library

You can import the ColorUtils class from the library as follows:

import { ColorUtils } from '@color-utils/ColorUtils';

Methods

getDistinctColors

Finds a specified number of distinct colors from a list based on a similarity threshold.

- Parameters:

hexColors (string[]): The list of hex color strings (e.g., ['#ff0000', '#00ff00']).

numColors (number): The number of distinct colors to retrieve.

threshold (number): The threshold for color similarity (lower values mean more similar).

- Returns:

(string[]): The list of distinct hex color strings.

- Example:

const colors = ['#ff0000', '#00ff00', '#0000ff', '#ff00ff'];
const numColorsToRetrieve = 2;
const threshold = 20;

const distinctColors = ColorUtils.getDistinctColors(colors, numColorsToRetrieve, threshold);
console.log(distinctColors); // Output: ['#ff0000', '#00ff00']

labToHex

Converts a LAB color to a hex color string.

- Parameters:

lab (LabColor): The LAB color object.

- Returns:

(string): The hex color string.

- Example:

const lab = { L: 53.23288, a: 80.10933, b: 67.22006 };
const hex = ColorUtils.labToHex(lab);
console.log(hex); // Output: '#ff0000'

hexToLab

Converts a hex color to a LAB color object.

- Parameters:

hex (string): The hex color string (e.g., '#ff0000').

- Returns:

(LabColor): The LAB color object.

- Example:

const hex = '#ff0000';
const lab = ColorUtils.hexToLab(hex);
console.log(lab); // Output: { L: 53.23288, a: 80.10933, b: 67.22006 }

rgbToHex

Converts an RGB color to a hex color string.

- Parameters:

rgb (RGBColor): The RGB color object.

- Returns:

(string): The hex color string.

- Example:

const rgb = { R: 255, G: 0, B: 0 };
const hex = ColorUtils.rgbToHex(rgb);
console.log(hex); // Output: '#ff0000'

hexToRgb

Converts a hex color to an RGB color object.

- Parameters:

hex (string): The hex color string (e.g., '#ff0000').

- Returns:

(RGBColor): The RGB color object. - Example:

const hex = '#ff0000';
const rgb = ColorUtils.hexToRgb(hex);
console.log(rgb); // Output: { R: 255, G: 0, B: 0 }

generateColorPalette

Generates a color palette based on a given hex color and the desired number of colors.

- Parameters:

hex (string): The hex color string (e.g., '#ff0000'). numColors (number): The number of colors in the palette.

- Returns:

(string[]): The array of hex color strings in the palette.

- Example:

const palette = ColorUtils.generateColorPalette('#ff0000', 5);
console.log(palette); // Output: ['#ff0000', '#ff3333', '#ff6666', '#ff9999', '#ffcccc']

getComplementaryColor

Generates a complementary color for a given hex color.

- Parameters:

hex (string): The hex color string (e.g., '#ff0000').

- Returns:

(string): The complementary hex color string.

- Example:

const complementaryColor = ColorUtils.getComplementaryColor('#ff0000');
console.log(complementaryColor); // Output: '#00ffff'

generateShades

Generates a list of shades from a base color.

- Parameters:

hex (string): The base hex color string (e.g., '#ff0000').

numShades (number): The number of shades to generate.

- Returns:

(string[]) An array of hex color strings representing the shades.

- Example:

const shades = ColorUtils.generateShades('#ff0000', 5);
console.log(shades); // Output: ['#ff0000', '#bb1909', '#7a1b0c', '#3f1508', '#000000']

generateTints

Generates a list of tints from a base color.

- Parameters:

hex (string): The base hex color string (e.g., '#ff0000').

numTints (number): The number of tints to generate.

- Returns:

(string[]) An array of hex color strings representing the tints.

- Example:

const tints = ColorUtils.generateTints('#ff0000', 5);
console.log(tints); // Output: ['#ff0000', '#ff4040', '#ff8080', '#ffbfbf', '#ffffff']

blendColors

Blends two hex colors together.

- Parameters:

color1 (string): The first hex color string.

color2 (string): The second hex color string.

ratio (number): The ratio of blending (0 to 1). 0 means full color1, 1 means full color2.

colorSpace (InterpolationMode): The color space to use for blending (default is 'lab').

Possible values for colorSpace are "rgb" | "hsl" | "hsv" | "hsi" | "lab" | "oklab" | "lch" | "oklch" | "hcl" | "lrgb"

- Returns:

(string) The blended hex color string.

Example:

const blendedColor = ColorUtils.blendColors('#ff0000', '#0000ff', 0.5, 'lab');
console.log(blendedColor); // Output: '#b400b4'

hexToHsl

Converts a hex color string to an HSL object.

- Parameters:

hex (string): The hex color string (e.g., '#ff0000').

- Returns:

(HSLColor) The HSL color object.

- Example:

const hsl = ColorUtils.hexToHsl('#ff0000');
console.log(hsl); // Output: { h: 0, s: 100, l: 50 }

getContrastRatio

Calculates the contrast ratio between two hex colors.

- Parameters:

color1 (string): The first hex color string.

color2 (string): The second hex color string.

- Returns:

(number) The contrast ratio.

- Example:

const ratio = ColorUtils.getContrastRatio('#ff0000', '#0000ff');
console.log(ratio); // Output: 4.5

generateRandomColor

Generates a random hex color.

- Returns: (string) The random hex color string.

- Example:

const randomColor = ColorUtils.generateRandomColor();
console.log(randomColor); // Output: e.g., '#a1b2c3'

generateAnalogousColors

Generates a list of analogous colors based on a base color.

Parameters:

hex (string): The base hex color string (e.g., '#ff0000').

numColors (number): The number of analogous colors to generate.

- Returns:

(string[]) An array of hex color strings representing the analogous colors.

- Example:

const analogousColors = ColorUtils.generateAnalogousColors('#ff0000', 5);
console.log(analogousColors); // Output: ['#ff0000', '#ff3333', '#ff6666', '#ff9999', '#ffcccc']

License

This library is licensed under the MIT License.

Feel free to contribute or report issues via the GitHub repository.

Support me ☕