@imsyy/color-utils NPM

color-utils

Some common color processing tools, color format conversion, image processing, etc.

Install

npm install @imsyy/color-utils

Usage

Conversion

Method Name	Parameters	Description
`rgbToHsv`	(r: number, g: number, b: number)	Converts RGB values to HSV.
`rgbToHex`	(r: number, g: number, b: number)	Converts RGB values to HEX format.
`rgbToHev`	(r: number, g: number, b: number)	Converts RGB values to HEV format.
`rgbToCmyk`	(r: number, g: number, b: number)	Converts RGB values to CMYK format.
`rgbToHwb`	(r: number, g: number, b: number)	Converts RGB values to HWB format.
`hexToRgb`	(hex: string)	Converts a HEX string to RGB values.
`hsvToRgb`	(h: number, s: number, v: number)	Converts HSV values to RGB format.
`hslToRgb`	(h: number, s: number, l: number)	Converts HSL values to RGB format.
`cmykToRgb`	(c: number, m: number, y: number, k: number)	Converts CMYK values to RGB format.
`hwbToRgb`	(h: number, w: string \| number, b: string \| number)	Converts HWB values to RGB format.

for example:

// rgbToHsv
import { rgbToHsv } from "color-utils";

rgbToHsv(255, 0, 0); // { "h": 0, "s": 100, "v": 100 }

Processing

Method Name	Parameters	Description
`getRandomColor`	()	Generates a random color in RGB format.
`adjustBrightness`	(r: number, g: number, b: number, factor: number)	Adjusts the brightness of an RGB color.
`getColorDifference`	(color1: string, color2: string)	Calculates the difference between two colors.
`getComplementaryColor`	(color: string)	Gets the complementary color of the given color.

for example:

// getColorDifference
import { getColorDifference } from "color-utils";

getColorDifference("#ffffff", "#000000"); // 441.6729559300637

Recognition

Method Name	Parameters	Description
`getImageColor`	(img: string \| HTMLImageElement, quality: number = 5)	Extracts the dominant colors from an image.
`getMDColor`	(color: string, option: { type: "rgb" })	Generates a Material Design color scheme based on a given color.

for example:

// getMDColor
import { getMDColor } from "color-utils";

getMDColor("#123456");

// Generate
{
    "light": {
        // ...,
    },
    "dark": {
        // ...,
    }
}

Testing

npm test

utils

@material/material-color-utilities colorthief

1.0.2

12 months ago

1.0.1

1 year ago

1.0.0

1 year ago