Generate Unique Colors From Strings – string-to-color

Preview:

Description:

string-to-color is a tiny JavaScript library that takes any string and deterministically converts it into an HSL or RGB color.

With options to tweak saturation, lightness and alpha, you can tailor the generated colors to suit your design. string-to-color also supports generating gradients with CSS, and tree-shaking for lean bundles.

How to use it:

1. Install and import the string-to-color.

# Yarn
$ yarn @marko19907/string-to-color
# NPM
$ npm i @marko19907/string-to-color

// HSL
import { 
  generateColor, 
  generateSecondaryColor
} from "@marko19907/string-to-color";
// RGB
import { 
  generateColorRGB, 
  generateSecondaryColorRGB
} from "@marko19907/string-to-color";

2. Generate HSL or RGB colors from the string you specify.

// HSL
const username = "CSSScript";
const primaryColor = generateColor(username); 
const secondaryColor = generateSecondaryColor(username); 
// RGB
const username = "CSSScript";
const primaryColorRGB = generateColor(username); 
const secondaryColorRGB = generateSecondaryColor(username);

3. Generate a gradient using the CSS linear-gradient property:

import { generateGradient } from "@marko19907/string-to-color";

const username = "CSSScript";
const gradient = generateGradient(username, 90, options, secondaryOptions);

4. Tailor the generated colors to your design by adjusting saturation, lightness, and alpha values.

const primaryColor = generateColor(username,{
      // options
      saturation: 50, 
      lightness: 75, 
      alpha: 100
});

5. With support for a variety of PRNG algorithms. You can choose from blazing fast options like Alea and Xor128 or opt for slower, meticulous ones like Arc4.

• Alea (Very Fast)
• Arc4 (Slow)
• Tychei (Fast)
• Xor128 (Very Fast)
• Xor4096 (Fast)
• Xorshift7 (Medium)
• Xorwow (Fast)

const primaryColor = generateColor(username,{
      algorithm: Alea
});