Skip to content

Latest commit

 

History

History
57 lines (51 loc) · 2.34 KB

README.md

File metadata and controls

57 lines (51 loc) · 2.34 KB
Raw

🌈 Rangarang

Rangarang (Persian word for "Colorful") is a tiny library that chooses the best colors from a picture. It extracts a beautiful background color, and an accessible text color.

It is:

  • Very, very lightweight ⚡️
  • Fast 🤔
  • TypeScript-friendly ✅
  • Works in both Node.js and broswer environments 🌍
  • Accessible: The colors have a >= 4.5 contrast ratio when used together!

Usage

This library uses the pixel data of the image. In browsers, it's easy to gather the pixel data using a <canvas> element:

import rangarang, { getDataFromCanvas } from 'rangarang';

const img = document.querySelector('img');
img.onload = () => {
  const { background, text } = rangarang(getDataFromCanvas(img)));
  console.log(background, text) // prints two hexacodes
};

But in Node.js environments, it's a bit harder. This library does not have any functions to extract pixel data from an image in Node, but you can extract it using your favorite library and use it:

const rangarang = require('rangarang').default;
rangarang(somehowGetPixelData());

Documentation

rangarang

Argument name Type Description
data Uint8Array | Uint8ClampedArray Image's pixel data.
options object? Options. 👇
options.skipPixels number? Number of pixels to skip in each iteration. Defaults to 0
options.minLuminance number? The minimum luminance for an acceptable color. Defaults to 0.2
options.maxLuminance number? The maximum luminance for an acceptable color. Defaults to 0.8
options.minSaturation number? The maximum saturation for an acceptable color. Defaults to 0.1

getDataFromCanvas

Argument name Type Description
image HTMLImageElement The source image.
size number | (originalWidth: number) => number Number or function to determine the <canvas>'s size. Bigger number/output results in a faster and less precise operation. Defaults to x => Math.max(80, x / 16)

Development

You can visually test the code:

npm run serve
npm run build -- --watch

Then head to localhost:8080/examples/web.

Todos

  • Better support for Node.js environments
  • Choose not only one color but more colors (secondary, background, etc.)
  • Allow to modify the behaviour of the code
  • Improve the performance
  • Write tests