HSL ID

A collision-resistant ID generator that creates readable, color-based identifiers that convert to valid CSS hsl() / hsla() values.

• URL-safe
• Collisions are unlikely
• Relatively performant
• Converts to CSS
• Configurable

Usage

Normal:

import hslid from "hslid";

const id = hslid();

console.log(id);
// h18342.s04821.l06342.a00912.A9F

Custom:

import hslid from "hslid";

const id = hslid({ //A vivid color example
    separator: "-",
    precision: 5,
    salt: false,
    clamp: {
        h: { min: 0, max: 36000 },
        s: { min: 6000, max: 10000 },
        l: { min: 4500, max: 6500 },
        a: { min: 10000, max: 10000 },
    }
});

console.log(id);
// h27442-s06468-l06167-a10000

API

// defaults (all optional)
hslid({
    separator: '.', // String
    precision: 5, // Number (Minimum: 3, pads each value of hsla to this length with leading zeroes.)
    salt: true, // Boolean (Appends a random 3 character hexadecimal string to the end of the id.)
    clamp: { // Object (Minimum and maximum values of range for each value of hsla.)
        h: { min: 0, max: 36000 },
        s: { min: 0, max: 10000 },
        l: { min: 0, max: 10000 },
        a: { min: 0, max: 10000 },
    }
})

import hslid from "hslid";
import { hslToCSS } from "hslid/css";
const id = hslid(); // h22192.s01999.l04697.a04979.E1D

const css = hslToCSS(id, true /* default: true, optional, include alpha */);

console.log(css);
// hsla(221.92, 19.99%, 46.97%, 49.79)

Why

Mostly as a toy but should work for low-stakes applications or applications where security is not a priority, even though the collision probability is very low and generation is secure.

License

MIT