Créer une couleur hexadécimale à partir d'une chaîne de caractères avec JavaScript

Question

Je souhaite créer une fonction qui acceptera n'importe quelle chaîne de caractères (généralement un seul mot) et à partir de laquelle d'une manière ou d'une autre génère une valeur hexadécimale comprise entre #000000 y #FFFFFF afin que je puisse l'utiliser comme couleur pour un élément HTML.

Peut-être même une valeur hexagonale abrégée (par ex : #FFF ) si c'est moins compliqué. En fait, une couleur issue d'une palette "web-safe" serait idéale.

Answer 1

Je trouve que la génération de couleurs aléatoires a tendance à créer des couleurs qui ne sont pas assez contrastées à mon goût. Le moyen le plus simple que j'ai trouvé pour contourner ce problème est de pré-remplir une liste de couleurs très différentes. Pour chaque nouveau attribue la couleur suivante dans la liste :

// Takes any string and converts it into a #RRGGBB color.
var StringToColor = (function(){
    var instance = null;

    return {
    next: function stringToColor(str) {
        if(instance === null) {
            instance = {};
            instance.stringToColorHash = {};
            instance.nextVeryDifferntColorIdx = 0;
            instance.veryDifferentColors = ["#000000","#00FF00","#0000FF","#FF0000","#01FFFE","#FFA6FE","#FFDB66","#006401","#010067","#95003A","#007DB5","#FF00F6","#FFEEE8","#774D00","#90FB92","#0076FF","#D5FF00","#FF937E","#6A826C","#FF029D","#FE8900","#7A4782","#7E2DD2","#85A900","#FF0056","#A42400","#00AE7E","#683D3B","#BDC6FF","#263400","#BDD393","#00B917","#9E008E","#001544","#C28C9F","#FF74A3","#01D0FF","#004754","#E56FFE","#788231","#0E4CA1","#91D0CB","#BE9970","#968AE8","#BB8800","#43002C","#DEFF74","#00FFC6","#FFE502","#620E00","#008F9C","#98FF52","#7544B1","#B500FF","#00FF78","#FF6E41","#005F39","#6B6882","#5FAD4E","#A75740","#A5FFD2","#FFB167","#009BFF","#E85EBE"];
        }

        if(!instance.stringToColorHash[str])
            instance.stringToColorHash[str] = instance.veryDifferentColors[instance.nextVeryDifferntColorIdx++];

            return instance.stringToColorHash[str];
        }
    }
})();

// Get a new color for each string
StringToColor.next("get first color");
StringToColor.next("get second color");

// Will return the same color as the first time
StringToColor.next("get first color");

Bien que cette méthode soit limitée à 64 couleurs, je pense que la plupart des humains ne peuvent pas vraiment faire la différence après cela. Je suppose que vous pouvez toujours ajouter plus de couleurs.

Bien que ce code utilise des couleurs codées en dur, vous avez au moins la garantie de connaître, pendant le développement, l'intensité exacte du contraste entre les couleurs en production.

La liste des couleurs est tirée de cette réponse de l'OS Il existe d'autres listes avec plus de couleurs.

Answer 2

Si vos données d'entrée ne sont pas suffisamment différentes pour qu'un simple hachage utilise l'ensemble du spectre des couleurs, vous pouvez utiliser un générateur de nombres aléatoires à la place d'une fonction de hachage.

J'utilise le codeur de couleurs de la réponse de Joe Freeman, et Le générateur de nombres aléatoires de David Bau .

function stringToColour(str) {
    Math.seedrandom(str);
    var rand = Math.random() * Math.pow(255,3);
    Math.seedrandom(); // don't leave a non-random seed in the generator
    for (var i = 0, colour = "#"; i < 3; colour += ("00" + ((rand >> i++ * 8) & 0xFF).toString(16)).slice(-2));
    return colour;
}

Answer 3

J'ai ouvert une demande d'extraction (pull request) a S'il vous plaît.js qui permet de générer une couleur à partir d'un hachage.

Vous pouvez faire correspondre la chaîne à une couleur de la manière suivante :

const color = Please.make_color({
    from_hash: "any string goes here"
});

Par exemple, "any string goes here" sera renvoyée sous la forme d'un "#47291b"
y "another!" revient comme "#1f0c3d"

Answer 4

Solution Javascript inspirée de la solution d'Aslam mais qui renvoie une couleur en code couleur hexagonal

/**
 * 
 * @param {String} - stringInput - 'xyz'
 * @returns {String} - color in hex color code - '#ae6204'
 */
function getBackgroundColor(stringInput) {
    const h = [...stringInput].reduce((acc, char) => {
        return char.charCodeAt(0) + ((acc << 5) - acc);
    }, 0);
    const s = 95, l = 35 / 100;
    const a = s * Math.min(l, 1 - l) / 100;
    const f = n => {
        const k = (n + h / 30) % 12;
        const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
        return Math.round(255 * color).toString(16).padStart(2, '0');   // convert to Hex and prefix "0" if needed
    };
    return `#${f(0)}${f(8)}${f(4)}`;
}

Answer 5

Encore une autre solution pour les couleurs aléatoires :

function colorize(str) {
    for (var i = 0, hash = 0; i < str.length; hash = str.charCodeAt(i++) + ((hash << 5) - hash));
    color = Math.floor(Math.abs((Math.sin(hash) * 10000) % 1 * 16777216)).toString(16);
    return '#' + Array(6 - color.length + 1).join('0') + color;
}

Pour moi, c'est un mélange de plusieurs choses qui fait l'affaire. J'ai utilisé la fonction Hash de JFreeman (également une réponse dans ce fil) et la fonction pseudo-aléatoire Asykäri de ici et un peu de rembourrage et de mathématiques de ma part.

Je doute que la fonction produise des couleurs uniformément réparties, bien qu'elle soit belle et qu'elle fasse ce qu'elle devrait faire.