2.1.1 • Published 2 years ago
rangarang v2.1.1
🌈 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 -- --watchThen 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