To differentiate between UI elements of different categories, we can use colors. For example, a unique color per event type can be used in a Calendar UI to differentiate between different type of events. Sometimes, we may need to show a unique background color for user's avatar when we don't have a profile picture.
npm i -S generate-colorsUsage are pretty simple. Just import the getColorForString method from the module and call it with a string that
uniquely identifies an object (User Account, Event Type). The method returns an array with [R, G, B] values.
import { getColorForString } from "generate-colors"
const color = getColorForString("First Name and Last Name")
// color = [90, 39, 50]Passing the same string again will result in the same color.
/**
* Generate the color a string
* @param {string} str String for which we want to get the colors
* @param {{ contrast: number }} [config={ contrast: 30 }] - Configuration for the color
* @returns {Array} Array with R,G,B values in sequence
*/
function getColorForString(str, config): [number, number, number]Visit Playground to see in section.
This module also exposes a CLI tool to generate colors from command line itself.
npx generate-colors "unique@example.com" --contrast=35Any kind of contribution is most welcome!!
- Fork the repository to your account.
- Clone the repository and install dependencies.
git clone git@github.com:<your_username>/generate-colors
cd generate-colors
npm install- The source code exists in
/srcdirectory.
| Script | Description |
|---|---|
| test | Run all the tests |
| lint | To run the linter |
| coverage | To create the test coverage report |
| dev | To start the development with docs website |
| release | To release a new version |
Any script can be executed by calling
npm run <script_name>.
MIT