rangarang

Chooses the best colors from a picture.

Usage no npm install needed!

<script type="module">
  import rangarang from 'https://cdn.skypack.dev/rangarang';
</script>

README

🌈 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