lounge-neuron icon indicating copy to clipboard operation
lounge-neuron copied to clipboard

Nickname colors need improvement

Open easymac opened this issue 9 years ago • 3 comments

Nickname colors aren't great. The reds match the colors used for highlights. The yellows, oranges, and browns all look alike.

Coming up with an IRC-centric palette is very difficult.

  1. The palette must be readable in every non-matching foreground-background combination.
  2. The palette must include 16 colors, including only a small handful of greys that may not be present in the UI lest they become illegible (but must still look good)
  3. The palette can include as many as 32 colors but coming up with 16 truly valuable colors is already hard enough. The folks working with base16 colors have it easy because only 8 of them are colors while 8 of them are grey scale.

http://ethanschoonover.com/solarized

There's some documentation about how the creator of Solarized, the most popular IDE color scheme, chose his colors. Hopefully this is of some value.

easymac avatar Jul 21 '16 17:07 easymac

So, I made one attempt at using color math to produce new colors:

http://codepen.io/easymac/pen/xEGNmx?editors=0010

This pen uses simple JavaScript to calculate the vector change between mIRC's red color and Neuron's red color, then applies that vector change to each of the other colors in mIRC's palette. (this is done with HSL so that the transformation is hue-agnostic)

As it turns out, the transformation isn't hue-agnostic.

In any case, I tried applying these colors to Neuron and I was quite dissatisfied with the result. Some of the colors were better, but many of them were worse and this didn't solve the problem of far too many colors being in the "orange - yellow - brown - beige" family.

So, my first experiment in color math failed. I'll keep doing research & formulate some more experiences as I have the time.

easymac avatar Sep 14 '16 17:09 easymac

Hello, I faced with the same problem, while making my own theme for Lounge.

In my opinion 32 user colors are not enough (plan on generating 90-100 good looking colors). But getting even 32 colors turned out to be difficult.

I made a small generator based on HSV, and expiremented with input parameters. Although results are dissatisfacting ATM, I still believe it has a potential. All it needs now is some tuning. For example I solved this:

too many colors being in the "orange - yellow - brown - beige" family

Just increasing step interval in this areas (and green, dark blue and a bit of red as well ) makes the trick. Also some colors are brigter than others, so brigtness is auto lowered in orange-yellow-green-cyan zone.

Using this settings I managed to generate ~95 colors, which are more distinctive than standard ones.

It is possible to use other ways. It's easy to find 20 exellent colors from Google Charts. But generating remaining 12 is still a problem. Also I found pre-generated disctinct 256 colors table. But it has a lot of colors we can't use (most of the dark and bright ones) and filtering this list is a pain.

So, I beleive making a generator specially for Lounge is the right way. If it turns good, it will be possible to generate different sets for bright and dark themes.

I plan to re-write my generator and upload it soon (current version was made in 10 minutes and looks bad >_>).


Lounge text-to-color class function is not good enough. For example these nicknames always will get a same color: 2017-04-22_06-31-25 dgw: 100 + 103 + 119 = 322 dey: 100 + 101 + 121 = 322

also these:

2017-04-22_06-30-52

I believe that making nicknames like these more distinctive is the most important purpose of coloring them. So I changed the code in /lounge/client/js/libs/handlebars/colorClass.js:

module.exports = function(str) {
	var hash = 0;
	var hash2 = '';
	var limit = 0;
	for (var i = (str.length - 1); i >= 0; i--) {
		hash += str.charCodeAt(i);
		if(limit < 3) hash2 += str.charCodeAt(i);
		limit++;
	}

	return "color-" + (1 + (hash + hash2) % 32);
};

It looks a bit strange, but does the work perfectly. Although you still need more then 32 colors to fix those nicknames coloring >_> ~90 is fine, I tested.

bews avatar Apr 22 '17 04:04 bews

Finally finished this color generator: https://colors.bews.me/

bews avatar Apr 27 '17 22:04 bews