InkDrop

Javascript (TypeScript) color manipulation and conversion library.

Motivation

This library doesn't perform any implicit conversions between different color models and implemented in a way so that js compilers with dead code elimination could easily remove unused code.

Installation

Npm package inkdrop provides umd modules, es6 modules at jsnext:main and TypeScript typings.

$ npm install inkdrop

Color models

All color models are using values with a range [0, 1] for all properties.

• RgbColor
• HsvColor
• HslColor
• HwbColor
• CmykColor
• XyzColor
• XyyColor
• LabColor
• LchColor

Converters

• rgbLinearize(rgb: RgbColor): RgbColor
• rgbDelinearize(lrgb: RgbColor): RgbColor
• rgbToHsl(rgb: RgbColor): HslColor
• hslToRgb(hsl: HslColor): RgbColor
• rgbToHsv(rgb: RgbColor): HsvColor
• hsvToRgb(hsv: HsvColor): RgbColor
• rgbToHwb(rgb: RgbColor): HwbColor
• hwbToRgb(hwb: HwbColor): RgbColor
• rgbToCmyk(rgb: RgbColor): CmykColor
• cmykToRgb(cmyk: CmykColor): RgbColor
• rgbToHex(rgb: RgbColor): string
• hexToRgb(hex: string): RgbColor
• linearRgbToXyz(lrgb: RgbColor): XyzColor
• xyzToLinearRgb(xyz: XyzColor): RgbColor
• xyzToXyy(xyz: XyzColor): XyyColor
• xyyToXyz(xyy: XyyColor): XyzColor
• xyzToLab(xyz: XyzColor): LabColor
• labToXyz(lab: LabColor): XyzColor
• labToLch(lab: LabColor): LchColor
• lchToLab(lch: LchColor): LabColor
• rgbToLab(rgb: RgbColor): LabColor
• labToRgb(lab: LabColor): RgbColor
• rgbToLch(rgb: RgbColor): LchColor
• lchToRgb(lch: LchColor): RgbColor

Utils

• luminance(rgb: RgbColor): number
• contrast(a: RgbColor, b: RgbColor): number
• contrastLevel(contrastRatio: number): number
• findBestContrast(a: RgbColor, bs: RgbColor[]): RgbColor | undefined
• brightness(rgb: RgbColor): number
• isDark(rgb: RgbColor): boolean
• isLight(rgb: RgbColor): boolean
• labDistanceCIE76(lab: LabColor): number
• labDistanceCIE94(lab: LabColor): number
• clampRgb(rgb: RgbColor): RgbColor

Transformation functions

• absDesaturate(hsl: HslColor, amount = 0.1): HslColor
• absSaturate(hsl: HslColor, amount = 0.1): HslColor
• absLighten(hsl: HslColor, amount = 0.1): HslColor
• absDarken(hsl: HslColor, amount = 0.1): HslColor
• absFadeIn(hsl: HslColor, amount = 0.1): HslColor
• absFadeOut(hsl: HslColor, amount = 0.1): HslColor
• absWhiten(hwb: HwbColor, amount = 0.1): HwbColor
• absBlacken(hwb: HwbColor, amount = 0.1): HwbColor
• relDesaturate(hsl: HslColor, ratio = 0.1): HslColor
• relSaturate(hsl: HslColor, ratio = 0.1): HslColor
• relLighten(hsl: HslColor, ratio = 0.1): HslColor
• relDarken(hsl: HslColor, ratio = 0.1): HslColor
• relFadeIn(hsl: HslColor, ratio = 0.1): HslColor
• relFadeOut(hsl: HslColor, ratio = 0.1): HslColor
• relWhiten(hwb: HwbColor, ratio = 0.1): HwbColor
• relBlacken(hwb: HwbColor, ratio = 0.1): HwbColor
• spin(hsl: HslColor, amount: number): HslColor
• mix(a: RgbColor, b: RgbColor, amount = 0.5): RgbColor
• tint(rgb: RgbColor, amount = 0.5): RgbColor
• shade(rgb: RgbColor, amount = 0.5): RgbColor
• negate(rgb: RgbColor): RgbColor
• greyscale(rgb: RgbColor): RgbColor

Blend functions

• blend(c1: RgbColor, c2: RgbColor, mode: (a: number, b: number) => number): RgbColor
• blendMultiply(a: RgbColor, b: RgbColor): RgbColor
• blendScreen(a: RgbColor, b: RgbColor): RgbColor
• blendOverlay(a: RgbColor, b: RgbColor): RgbColor
• blendSoftlight(a: RgbColor, b: RgbColor): RgbColor
• blendHardlight(a: RgbColor, b: RgbColor): RgbColor
• blendDifference(a: RgbColor, b: RgbColor): RgbColor
• blendExclusion(a: RgbColor, b: RgbColor): RgbColor
• blendAverage(a: RgbColor, b: RgbColor): RgbColor
• blendNegation(a: RgbColor, b: RgbColor): RgbColor

Combination functions

• complement(hsl: HslColor): HslColor
• triad(hsl: HslColor): [HslColor, HslColor, HslColor]
• tetrad(hsl: HslColor): [HslColor, HslColor, HslColor, HslColor]
• splitComplement(hsl: HslColor): [HslColor, HslColor, HslColor]
• analogous(hsl: HslColor, results = 6, slices = 30): HslColor[]
• monochromatic(hsv: HsvColor, results = 6): HsvColor[]

Text formatting functions

• formatRgbToHex(rgb: RgbColor): string
• formatRgbToString(rgb: RgbColor): string
• formatHslToString(hsl: HslColor): string
• formatHsvToString(hsv: HsvColor): string

Compare functions

Epsilon:

alpha = 1 / 100
rgb colors = 1 / 255
hue = 1 / 360
saturation, lightness, value, whiteness, blackness, cyan, magenta, yellow, black = 1 / 100

• almostEqualRgb(a: RgbColor, b: RgbColor): boolean
• almostEqualHsl(a: HslColor, b: HslColor): boolean
• almostEqualHsv(a: HsvColor, b: HsvColor): boolean
• almostEqualHwb(a: HwbColor, b: HwbColor): boolean
• almostEqualCmyk(a: CmykColor, b: CmykColor): boolean