Generate Unique Colors From Strings – string-to-color

Category: Color , Javascript | September 19, 2023
Author:Marko19907
Views Total:140 views
Official Page:Go to website
Last Update:September 19, 2023
License:MIT

Preview:

Generate Unique Colors From Strings – string-to-color

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
});

You Might Be Interested In:


Leave a Reply