5 ms·

Idea: Color each username based on a hash of the username. '#' + username.md5().take(6).join('') I did it for a chat I once built, users liked it, and it

by danneu 10y ago

Idea: Color each username based on a hash of the username. '#' + username.md5().take(6).join('') I did it for a chat I once built, users liked it, and it helps you keep track of who said what. Though I added some styling to keep it legible, like a 30% white blend, a stroke, and a drop shadow. https://dl.dropboxusercontent.com/spa/quq37nq1583x0lf/xf17fnph.png https://dl.dropboxusercontent.com/spa/quq37nq1583x0lf/xf17fn... (not the best example since everyone happened to be shades of green)

baddox 10y ago
I like the idea, although I'd probably choose a palette of, say, 30 colors, and hash the username mod 30 to determine the color. That way all the colors should be sufficiently contrasty.
- danneu 10y ago
  My IRC client does this, but I find it too jarring when multiple people are talking and they have the same color. Sometimes it rolls a yahtzee and the three people talking all have the same color and the same length of chars in their name. I figure that even if the people talking luck out and have a shade of green like in my screenshot, it's still better than if they all fell into the identical green bucket.
  - evan_ 10y ago
    It could choose two or three colors and split the name in half or thirds.
- looki 10y ago
  I'd probably try to convert the RGB to HSV and then sanitize the values a bit. Get rid of too flashy or too unsaturated colors.
  - Zarel 10y ago
    This is what Pokémon Showdown does. https://github.com/Zarel/Pokemon-Showdown-Client/blob/434322fecce4deeec9533c4023f0273101055a80/js/battledata.js#L65-L108 https://github.com/Zarel/Pokemon-Showdown-Client/blob/434322... A naive HSL implementation will lead to very light yellows/cyans and very dark blues. PS corrects for this by manually darkening yellows/cyans and lightening blues. A better solution might be to use a color model based on perceived luminance, like one discussed here: https://news.ycombinator.com/item?id=11437794 https://news.ycombinator.com/item?id=11437794
killwhitey 10y ago
I wrote about my own implementation for something like this for a web irc client, which may be helpful. https://gist.github.com/0x263b/2bdd90886c2036a1ad5bcf06d6e6fb37 https://gist.github.com/0x263b/2bdd90886c2036a1ad5bcf06d6e6f...
thr0waway1239 10y ago
I usually find that the images that users use on forums, especially when they are somewhat odd-looking, really reinforces who is saying what. Maybe there is some scope for taking distinctive glyphicons from a project like Bootstrap and displaying it next to the username. And combine this with your color scheme, I think it might become easier to keep track of threads. Although, some people may not like the icon associated to them.
spdustin 10y ago
I do something similar but different.. I take a long sequence of random numbers, using only digits 1-8, like 29834572498741387972573179875938893507418675309 Let's say that goes on for 105 places. Each user then gets an auto-increment ID that I mod 100 (divide by 100 and take the remainder) and add one. I start at that index of the long sequence of digits, and take six characters. If your ID was 112, mod 100 would be 12, plus 1 is 13. Starting at the 13th character, I take six characters: 413879. Then prefix with # - #413879 - and you have a pseudo-random hex code, with neighboring colors being pleasantly visually related. If it's a dark background, I use letters A-F instead. If the contrast is insufficient, I'll change a character in the sequence here and there, but it's a lot faster than calculating a new color for everyone, and while everyone doesn't get a unique color, my opinion is that color isn't what makes them unique, it's their username; the color is an extra hint for those able to see it. EDIT: I called this, when I came up with it a very long time ago, the "sliding doors" technique. I'm sure I'm not the first to do something like that, and it was before the similarly named (abut unrelated, functionally) image replacement trick was popular.

by danneu 10y ago

baddox 10y ago

I like the idea, although I'd probably choose a palette of, say, 30 colors, and hash the username mod 30 to determine the color. That way all the colors should be sufficiently contrasty.

danneu 10y ago
My IRC client does this, but I find it too jarring when multiple people are talking and they have the same color. Sometimes it rolls a yahtzee and the three people talking all have the same color and the same length of chars in their name. I figure that even if the people talking luck out and have a shade of green like in my screenshot, it's still better than if they all fell into the identical green bucket.
- evan_ 10y ago
  It could choose two or three colors and split the name in half or thirds.
looki 10y ago
I'd probably try to convert the RGB to HSV and then sanitize the values a bit. Get rid of too flashy or too unsaturated colors.
- Zarel 10y ago
  This is what Pokémon Showdown does. https://github.com/Zarel/Pokemon-Showdown-Client/blob/434322fecce4deeec9533c4023f0273101055a80/js/battledata.js#L65-L108 https://github.com/Zarel/Pokemon-Showdown-Client/blob/434322... A naive HSL implementation will lead to very light yellows/cyans and very dark blues. PS corrects for this by manually darkening yellows/cyans and lightening blues. A better solution might be to use a color model based on perceived luminance, like one discussed here: https://news.ycombinator.com/item?id=11437794 https://news.ycombinator.com/item?id=11437794

killwhitey 10y ago

I wrote about my own implementation for something like this for a web irc client, which may be helpful. https://gist.github.com/0x263b/2bdd90886c2036a1ad5bcf06d6e6fb37 https://gist.github.com/0x263b/2bdd90886c2036a1ad5bcf06d6e6f...

thr0waway1239 10y ago

I usually find that the images that users use on forums, especially when they are somewhat odd-looking, really reinforces who is saying what. Maybe there is some scope for taking distinctive glyphicons from a project like Bootstrap and displaying it next to the username. And combine this with your color scheme, I think it might become easier to keep track of threads. Although, some people may not like the icon associated to them.

spdustin 10y ago

I do something similar but different.. I take a long sequence of random numbers, using only digits 1-8, like 29834572498741387972573179875938893507418675309 Let's say that goes on for 105 places. Each user then gets an auto-increment ID that I mod 100 (divide by 100 and take the remainder) and add one. I start at that index of the long sequence of digits, and take six characters. If your ID was 112, mod 100 would be 12, plus 1 is 13. Starting at the 13th character, I take six characters: 413879. Then prefix with # - #413879 - and you have a pseudo-random hex code, with neighboring colors being pleasantly visually related. If it's a dark background, I use letters A-F instead. If the contrast is insufficient, I'll change a character in the sequence here and there, but it's a lot faster than calculating a new color for everyone, and while everyone doesn't get a unique color, my opinion is that color isn't what makes them unique, it's their username; the color is an extra hint for those able to see it. EDIT: I called this, when I came up with it a very long time ago, the "sliding doors" technique. I'm sure I'm not the first to do something like that, and it was before the similarly named (abut unrelated, functionally) image replacement trick was popular.