string-to-color-gradient/dist/index.mjs

A lightweight npm library to convert any string into consistent hex colors and CSS gradients — perfect for avatars, tags, themes, blog cards, and visual identifiers. Turn names, emails, or any string into beautiful, deterministic color values that stay th

import CryptoJS from 'crypto-js';
import tinycolor from 'tinycolor2';

/**
 * Hashes a string to a 32-bit integer using MD5.
 * @param str - Input string
 * @returns A 32-bit integer derived from the string hash
 */
function hashStringToInt(str) {
    var hash = CryptoJS.MD5(str).toString();
    return parseInt(hash.slice(0, 12), 16);
}
/**
 * Returns a predefined lightness value based on brightness level.
 * @param brightness - Brightness setting
 * @returns Lightness value (0–100)
 */
function getLightness(brightness) {
    if (brightness === void 0) { brightness = 'normal'; }
    switch (brightness) {
        case 'dark':
            return 35;
        case 'light':
            return 70;
        default:
            return 60;
    }
}
/**
 * Returns a predefined saturation value based on brightness level.
 * @param brightness - Brightness setting
 * @returns Saturation value (0–100)
 */
function getSaturation(brightness) {
    if (brightness === void 0) { brightness = 'normal'; }
    switch (brightness) {
        case 'dark':
            return 80;
        case 'light':
            return 60;
        default:
            return 70;
    }
}
/**
 * Generates a consistent gradient angle from a string using SHA-1.
 * @param str - Input string
 * @returns Angle between 0–359 degrees
 */
function getAngleFromString(str) {
    var hash = CryptoJS.SHA1(str).toString();
    var angleInt = parseInt(hash.slice(0, 6), 16);
    return angleInt % 360;
}
/**
 * Converts a string into a single HSL-based hex color.
 *
 * @param str - Input string to hash
 * @param brightness - Brightness setting (default: 'normal')
 * @returns A hex color string (e.g., "#a1b2c3")
 */
function stringToColor(str, brightness) {
    if (brightness === void 0) { brightness = 'normal'; }
    var hashInt = hashStringToInt(str);
    var hue = hashInt % 360;
    var saturation = getSaturation(brightness);
    var lightness = getLightness(brightness);
    return tinycolor({ h: hue, s: saturation, l: lightness }).toHexString();
}
/**
 * Converts a string into a gradient composed of two colors.
 *
 * @param str - Input string to hash
 * @param options - Gradient options (brightness)
 * @returns A tuple of two hex color strings
 */
function stringToGradient(str, options) {
    if (options === void 0) { options = {}; }
    var _a = options.brightness, brightness = _a === void 0 ? 'normal' : _a;
    var hash = CryptoJS.SHA256(str).toString();
    var hue1 = parseInt(hash.slice(0, 8), 16) % 360;
    var hue2 = parseInt(hash.slice(8, 16), 16) % 360;
    // Ensure hue2 is sufficiently different from hue1
    var MIN_HUE_DIFF = 30;
    if (Math.abs(hue1 - hue2) < MIN_HUE_DIFF) {
        hue2 = (hue2 + MIN_HUE_DIFF) % 360;
    }
    var saturation = getSaturation(brightness);
    var lightness = getLightness(brightness);
    var color1 = tinycolor({
        h: hue1,
        s: saturation,
        l: lightness,
    }).toHexString();
    var color2 = tinycolor({
        h: hue2,
        s: saturation,
        l: lightness,
    }).toHexString();
    return [color1, color2];
}
/**
 * Converts a string into a complete CSS linear-gradient string.
 *
 * @param str - Input string to hash
 * @param options - Gradient options including angle and brightness
 * @returns A CSS gradient string (e.g., `linear-gradient(45deg, #a1b2c3, #d4e5f6)`)
 */
function stringToCssGradient(str, options) {
    if (options === void 0) { options = {}; }
    var _a = options.angle, angle = _a === void 0 ? 'auto' : _a;
    var _b = stringToGradient(str, options), color1 = _b[0], color2 = _b[1];
    var angleValue = angle === 'auto' ? getAngleFromString(str) : angle;
    return "linear-gradient(".concat(angleValue, "deg, ").concat(color1, ", ").concat(color2, ")");
}

export { stringToColor, stringToCssGradient, stringToGradient };