Hash string into RGB color
Is there a best practice on how to hash an arbitrary string into a RGB color value? Or to be more general: to 3 bytes.
You're asking: When will I ever need this? It doesn't matter to me, but imagine those tube graphs on any GitHub network page. There you can see something like this:
Where every colored line means a distinct git branch. The low tech approach to color these branches would be a CLUT (color lookup table). The more sophisticated version would be:
$branchColor = hashStringToColor(concat($username,$branchname));
Because you want a static color every time you see the branches representation. And for bonus points: How do you ensure an even color distribution of that hash function?
So the answer to my question boils down to the implementation of hashStringToColor()
.
A good hash function will provide a near uniform distribution over the key space. This reduces the question to how do I convert a random 32 bit number to a 3 byte RGB space. I see nothing wrong with just taking the low 3 bytes.
int hash = string.getHashCode();
int r = (hash & 0xFF0000) >> 16;
int g = (hash & 0x00FF00) >> 8;
int b = hash & 0x0000FF;
For any Javascript users out there, I combined the accepted answer from @jeff-foster with the djb2
hash function from erlycoder.
The result per the question:
function djb2(str){
var hash = 5381;
for (var i = 0; i < str.length; i++) {
hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */
}
return hash;
}
function hashStringToColor(str) {
var hash = djb2(str);
var r = (hash & 0xFF0000) >> 16;
var g = (hash & 0x00FF00) >> 8;
var b = hash & 0x0000FF;
return "#" + ("0" + r.toString(16)).substr(-2) + ("0" + g.toString(16)).substr(-2) + ("0" + b.toString(16)).substr(-2);
}
UPDATE: Fixed the return string to always return a #000000 format hex string based on an edit by @alexc (thanks!).
I just build a JavaScript library named color-hash, which can generate color based on the given string (using HSL color space and BKDRHash).
Repo: https://github.com/zenozeng/color-hash
Demo: https://zenozeng.github.io/color-hash/demo/