New color generator algorithm

[skjnldsv]

Fix #1747

• We now generate all of our colours based on the three primary we decided to use.
  • Colors are now based on nextcloud official
  • This removes the unwanted hue system we've been using before
  • We can decide to change the sat/lum of one of the primary we want and the generator will automatically smooth the colors to match.
  • Better contrasts
• New hash to int algorithm.
  • Far better results. A bit slower, but we get a variance around <1% across the desired number.
    Chart for 1M generated hash with 20 colors spread
    

@rullzer do you want me to update the php algorithm you used to generate all avatars?

[rullzer]

sure

[jancborchardt]

@skjnldsv before & after screenshots would be appreciated for quicker comparison and easier design review. :)

[skjnldsv]

Of course :)
From #1747 (comment)

[jancborchardt]

Hm, those look a bit dark and gloomy. How about we instead simply use the Material design color palette? https://material.io/guidelines/style/color.html#color-color-palette

We could use all of the colors which work with the white text on them (except the 900 values cause they are a bit too dark). What do you think?

[skjnldsv]

@jancborchardt the main goal was to use stuff with the nextcloud color.
We can indeed use a palette like material, but if we decide to only use those where white font is ok on this, we can drop all yellow-ish based colours :/

Nonetheless, if you want to try new colours generation, you can play with the values in https://github.com/nextcloud/server/pull/8535/files#diff-f0151c05e04ac2dddb3c73f949683689R100

Just find a red, yellow and blue you like and the generator will complete the missing colors according to your demand :)

Here is a live version so you can try it: https://codepen.io/skjnldsv/pen/PQOwQm

[jancborchardt]

Hmm ok, in the Codepen it actually looks fine. Then since it’s an improvement over the current way, let’s go for it. :)

[skjnldsv]

Yeah, maybe too much colors in the same window isn't the best way to overview this pr! :/

[MorrisJobke]

I like it 👍

[codecov]

Codecov Report

❗ No coverage uploaded for pull request base (master@88c1b8e). Click here to learn what that means.
The diff coverage is 100%.

@@            Coverage Diff            @@
##             master    #8535   +/-   ##
=========================================
  Coverage          ?   51.33%           
  Complexity        ?    25288           
=========================================
  Files             ?     1537           
  Lines             ?    87127           
  Branches          ?        0           
=========================================
  Hits              ?    44729           
  Misses            ?    42398           
  Partials          ?        0

Impacted Files	Coverage Δ	Complexity Δ
lib/private/Avatar.php	79.42% <100%> (ø)	45 <8> (?)

[skjnldsv]

Since we're using nextcloud color, it could lead to strange behavior. @nextcloud/designers are you ok with that or should we use a border? :)

[skjnldsv]

Suggestion if you don't like without borders @nextcloud/designers :

border-radius: 50%;
box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.3);

Personally I'm okay with or without, I don't mind.

[pixelipo]

IMO we should use all but the primary colour. If I'm not mistaken this is never used for the UI elements, so it makes no sense to use UI colour either. Better to use !primary because it needs to stand out from the regular interface (avatars, charts etc.)

In the Contacts app it would also be strange if the contact had a header that is the same colour as the NC header:

[skjnldsv]

@pixelipo could you propose three colours and post the screenshotted palette here please?
https://codepen.io/skjnldsv/pen/PQOwQm?editors=0010

[pixelipo]

@skjnldsv how about this:
palette
CodePen

It's basically a triad of adjacent colors that are complementary to the "NC blue" - so, in a way, a "perfect opposite" :)

[skjnldsv]

@pixelipo I understand your point but I disagree with your choice. The colours should not stand out of the page that much and we should use all of the existing tones (r g & b). Well, it's my opinion :)

[pixelipo]

@skjnldsv those colours are still complementary, which means they will "look good" with our brand colour. The whole point of thir PR is to paint non-UI elements - content, that is to say - to be quickly recognizible.

By the way, you can try larger angles to "grab" a larger portion of the spectrum, e.g. http://paletton.com/#uid=63t0X0k++IruKZLQU+V+Wtt+an5

[skjnldsv]

For reference with pixelipo's colours:

[danxuliu]

Like @pixelipo, I would not use the primary colour as one of the base colours. However, I also agree with @skjnldsv that it would be better to use a broader set of tones, and with @jancborchardt that we should only use colours on which white is legible. Moreover, the colours should not be hardcoded based on the Nextcloud colour, but depend on whichever primary colour is set in the theme.

It may be possible to use triads/tetrads to always get the best base colours based on the primary colour that meets all those requeriments, I do not know (but I am probably asking for too much :-P ) .

Here is an alternative idea (totally untested, probably stupid :-P so feel free to ignore it ;-) ) to fulfill all those conditions:

• We keep a database of all the Material colours in which white is legible (not only main colours, any tone in the 50-A700 range)
• The three base colours for the colour generator coded by @skjnldsv are choosen as follows:
  • First colour is the nearest whitelisted Material colour (not only main colours, any tone in the 50-A700 range) to the opposite of the primary colour set in the theme
  • Second colour is a random colour from the whitelisted Material colours with the same tone (50-A700 value) as the first colour which is not similar to the primary colour nor the first colour (I guess that there are some easy mathematical checks with the HSV or something like that to know if a colour is similar to another one, but I do not really know ;-) )
  • Third colour is a random colour from the whitelisted Material colours with the same tone as the first and second colours which is not similar to the primary colour, nor the first colour, nor the second colour

[pixelipo]

I have to more variants for consideration:

1. tetrad (Codepen) is more pink/red

var color1 = new Color(236, 0, 87);
var color2 = new Color(125, 241, 0);
var color3 = new Color(255, 139, 0);

2. complementary triad (CodePen) is more purple/blue

var color1 = new Color(79, 0, 208);
var color2 = new Color(125, 241, 0);
var color3 = new Color(255, 139, 0);

[juliushaertl]

1. tetrad (Codepen) is more pink/red

That looks best to me, we have no conflict with colors that are to similar to the primary color (NC-blue) and have a variety of colors, not just using red-ish ones.

[skjnldsv]

Could we take a position on this? :)
@nextcloud/designers

[rullzer]

@nextcloud/designers your input is required

[rullzer]

Anyway

tetrad (Codepen) is more pink/red

looks fine to me.

[juliushaertl]

As already said tetrad (Codepen) is more pink/red looks best to me since we don't have collisions with the nextcloud color there. But no strong opinion there, since the others are also a big improvement to the previous color generation mode in terms of contrast and readability.

[skjnldsv]

Then, let's go for this :)
Please clean up your avatar cache and heads up to your users list ;)

[jancborchardt]

Hmm … I get the reasoning @pixelipo, and it does look nice. However I see 2 problems:

• The original intention of the colors, which is to provide a good visual cue for separation, is not that strong anymore because a significant chunk of color is gone
• It will break down as soon as someone themes their instance and just be devoid of blue? Or does it adjust according to that?

[skjnldsv]

@jancborchardt no, the current theming color is not taken into consideration for now! :)

[MorrisJobke]

I like the current set and makes sense 👍 Let's get this in and then iterate on this if it is totally off.

Edit: I meant the color set from this comment here: #8535 (comment)

[juliushaertl]

👍 for the first version as well from my side

[skjnldsv]

@jancborchardt

[jancborchardt]

I also think the original proposal is good and we can always adjust.

For Contacts which have a picture set, we should use a big&blurred version of that picture as header background anyway. :)