Converting A Random String Into A Hex Colour

I have a table of action logs in my application. I want to assign rows a random colour based on the sessionID of that entry to help see patterns/grouped actions. I have this so far

Solution 1:

As requested, posting this as an awswer

var stringHexNumber = (                       // 1parseInt(                                 // 2parseInt('mj3bPTCbIAVoNr93me1I', 36)  // 3
            .toExponential()                  // 4
            .slice(2,-5)                      // 5
    , 10) & 0xFFFFFF// 6
).toString(16).toUpperCase(); // "32EF01"     // 7

So, what's going on?

1. Things start on line 3 where 'mj3bPTCbIAVoNr93me1I' gets converted to an Integer, say x, by interpreting it as a base-36 number.
2. Next, x is put into it's exponential form as a String on line 4. This is because with that many characters, x can be huge, this example is around 8e30, so convert it to a form that will be pretty standard.
3. After this, line 5 trims off the beginning and end so you'll be left with just digits, e.g. '8.123e+30'.slice(2, -5) becomes '12'.
4. Now we go back to line 2, where this gets converted back into an Integer again, this time in base 10.
5. Then, line 6 truncates this number down to the range 0..16777215 (=== 0xFFFFFF) using a fast bitwise AND. This will also convert NaN to 0.
6. Finally, line 7 converts this back into the upper case hex format we are used to seeing colours in, by writing the number in base 16 and changing the case.

If you want to use this, you may also want to ensure that the final number is 6 digits and stick a # on the front, which can be done via

'#' + ('000000' + stringHexNumber).slice(-6); //"#32EF01"

Solution 2:

var color_codes = {};
functionstringToColorCode(str) {
    return (str in color_codes) ? color_codes[str] : (color_codes[str] = '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6));
}

Solution 3:

Sweet question. What I did is create a global variable so you can consistently get the same color for a given input string. Once you have called stringToColorCode, it will only generate a random color for that string ONCE. You can rely on this to be consistent, so that if you call the function back to back with the same string, it will return the same random color. Only flaw I see is that it's possibly (but unlikely) that two different strings could be mapped to the same color, but that could be worked around if necessary.

Edit: When first answering, I didn't realize @Nirk had practically the same answer. To make this one a little more unique, use this which will give you consistent colors across page reloads.

console.log(stringToColorCode('mj3bPTCbIAVoNr93me1I'));

functionstringToColorCode(str) {
    var sessionStoreKey = "myStringColors" + str;
    if (!sessionStorage[sessionStoreKey ]) {
        sessionStorage[sessionStoreKey] = Math.random()*0xFFFFFF<<0;       
    }

    var randomColor = sessionStorage[sessionStoreKey];

    return'#'+ randomColor;
}

Solution 4:

I resolved this on backing bean. This works for me in Java:

privatevoidcreateDefaultColorFromName(final String name) {
    Stringmd5="#" + md5(name).substring(0, 6);
    defaultColor = Color.decode(md5);
    intdarkness= ((defaultColor.getRed() * 299) + (defaultColor.getGreen() * 587) + (defaultColor.getBlue() * 114)) / 1000;
    if (darkness > 125) {
        defaultColor = defaultColor.darker();
    }
}

I made the generated color a little darker for a white background...