как генерировать цвет в формате hex из строки в javascript

Question

Ivan Gagarinov · Accepted Answer

Для начала, мы должны получить числовое значение из строки. Для этого можно использовать различные алгоритмы хеширования, например, функцию хеширования, которая преобразует строку в числовое значение.

После получения числового значения, оно должно быть преобразовано в шестнадцатичную строку. HEX-цвет состоит из трех пар шестнадцатиричных чисел (R, G, B), каждая из которых варьируется от 00 до FF.

Получив значения для R, G и B, мы можем собрать их в строку формата #RRGGBB.

Вот пример функции, которая выполняет описанные выше шаги:

function stringToHexColor(str) {
    // Используем хеш-функцию для получения числового значения из строки
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }

    // Получаем значения R, G и B
    let r = (hash & 0xFF0000) >> 16; // Старшие 8 бит
    let g = (hash & 0x00FF00) >> 8;  // Средние 8 бит
    let b = hash & 0x0000FF;         // Младшие 8 бит

    // Приводим значения к диапазону 0-255
    r = r % 256;
    g = g % 256;
    b = b % 256;

    // Конвертируем в HEX-формат
    const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;

    return hex;
}

// Пример использования
const color1 = stringToHexColor("Hello, World!");
const color2 = stringToHexColor("OpenAI");
const color3 = stringToHexColor("ChatGPT");

console.log(color1); // Например, #A3E8B5
console.log(color2); // Например, #C9B4E0
console.log(color3); // Например, #F2A4D2

год назад

Ivan Gagarinov

как генерировать цвет в формате hex из строки в javascript

Ответы

Каталог