colorgram-js

KO | EN

gitlite — search

#python #hacktoberfest #react #typescript #android #linux #nodejs #awesome #kubernetes #vue #awesome-list #security #mcp #open-source

(★ 93)

Color extraction library

File Explorer

Download Latest Version (.zip)

- colorgram.ts
- index.ts
- utils.ts
- - chalk.jpg
  - field.jpg
  - fireworks.jpg
  - flower.jpg
  - hsl.png
  - hues.png
  - palette-a.png
  - pastel.png
  - README.md
  - stone.png
  - structure-a.png
  - winter.jpg
- - load_image.js
- browser_test.html
- server_test.js
.editorconfig
.gitattributes
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
package-lock.json
package.json
README.md
rollup.config.js
tsconfig.json
tslint.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Colorgram [![Build Status](https://travis-ci.org/darosh/colorgram-js.svg)](https://travis-ci.org/darosh/colorgram-js)

Color extraction library. In TypeScript/JavaScript. For browser/server.

## Demo

[test/browser_test.html](http://darosh.github.io/colorgram-js/test/browser_test.html)

## Features

- small size, 1kB (minified + gzipped)
- pretty fast, 512&times;512 pixels in ~50ms, 340&times;340 pixels in ~15ms (~6&times; slower on mobile)
- scans every pixel
- identical output for rotated images
- sampled by top 2 bits of 3 groups: H, L, and [luminance](https://en.wikipedia.org/wiki/Luma_%28video%29#Use_of_luminance)
- calculates average per group
- fixed memory footprint, samples using 2 (bits) ^ 3 (groups) * 4 (RGB + count) * 4 (Uint32) = 1024 bytes
- usually generates small (~16 colors) palette of main colors
- supports RGB and RGBA input pixel array (compatible with [ImageData.data](https://developer.mozilla.org/en-US/docs/Web/API/ImageData/data))
- using [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)
- no native dependencies

## Similar stuff

- [lokesh/color-thief](https://github.com/lokesh/color-thief)
- [leeoniya/RgbQuant.js](https://github.com/leeoniya/RgbQuant.js)
- [nrabinowitz/quantize.js](https://gist.github.com/nrabinowitz/1104622)
- [igor-bezkrovny/image-quantization](https://github.com/igor-bezkrovny/image-quantization)
- [NeuQuant](http://members.ozemail.com.au/~dekker/NEUQUANT.HTML)
- [quantization keyword in npm](https://www.npmjs.com/browse/keyword/quantization)
- [pngquant](https://pngquant.org/)
- [Adobe Color CC](https://color.adobe.com/create/image/)

## Install

```npm install colorgram```

## Usage

See [test](https://github.com/darosh/colorgram-js/tree/master/test) folder.

## TypeScript documentation

[http://darosh.github.io/colorgram-js/doc/](http://darosh.github.io/colorgram-js/doc/)

## License

[MIT](https://github.com/darosh/colorgram-js/tree/master/LICENSE)

colorgram-js

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

colorgram-js

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README