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

Аватар пользователя Ivan Gagarinov
Ivan Gagarinov
22 декабря 2024

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

После получения числового значения, оно должно быть преобразовано в шестнадцатичную строку. 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
0 0
Познакомьтесь с основами JavaScript бесплатно