https://github.com/localvoid/inkdrop
[UNMAINTAINED] Javascript (TypeScript) color manipulation and conversion library
https://github.com/localvoid/inkdrop
Last synced: about 1 year ago
JSON representation
[UNMAINTAINED] Javascript (TypeScript) color manipulation and conversion library
- Host: GitHub
- URL: https://github.com/localvoid/inkdrop
- Owner: localvoid
- License: other
- Created: 2016-05-26T15:18:02.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-06-05T09:04:38.000Z (almost 10 years ago)
- Last Synced: 2025-02-25T10:11:14.676Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 61.5 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# InkDrop
[](https://travis-ci.org/localvoid/inkdrop)
[](https://www.npmjs.com/package/inkdrop)
[](https://www.npmjs.com/package/inkdrop)
[](https://www.npmjs.com/package/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.
```sh
$ 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`
- `isValidRgb(rgb: RgbColor): RgbColor`
- `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`
## Text parsing functions
- `parseHex(hex: string): RgbColor`
## Compare functions
```txt
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`
- `almostEqualXyz(a: XyzColor, b: XyzColor): boolean`
- `almostEqualXyy(a: XyyColor, b: XyyColor): boolean`
- `almostEqualLab(a: LabColor, b: LabColor): boolean`
- `almostEqualLch(a: LchColor, b: LchColor): boolean`
## Colors
- `WhiteD65Color`
- `WhiteD50Color`
- `WhiteRgbColor`
- `BlackRgbColor`
- `randomWarmColor(): LchColor`
- `randomHappyColor(): LchColor`