Contacts App generated colors are too bright

[elioqoshi]

Some of the randomly generated colors for contacts in the contacts app are too bright and the text can hardly be read (it's white).

It would be great if we could use one of the 500 colors of Google Material Design (20 different colors) so it's safe to use with white text:
https://material.google.com/style/color.html#color-color-palette

Discussed this with @jancborchardt and he agrees that this should be refreshed

[jancborchardt]

cc @nextcloud/designers and @skjnldsv @MorrisJobke @georgehrke @icewind1991 who worked on the color generation (right? :D)

[skjnldsv]

Well, I created this color generator! :p
But the contact app isn't in http://github.com/owncloud/contacts?

[skjnldsv]

@elioqoshi Are you suggesting we only use 20 colors?

[elioqoshi]

@skjnldsv Yep, that's what I'm suggesting (@jancborchardt agreed as well I think)

[skjnldsv]

Well, the generator is integrated on core now. So changing the behavior change it for every app that use it (mail, calendar, contacts...) So we need to be sure. 😕
For now your idea is compatible with the calendar app, since @jancborchardt and me chosed to limit the number of colors available. BUT the app just re-enabled the random color button, so this will break the wanted behavior (random amongst 20 isn't really useful 😉 )

That being said, I would agree with you that some colours are hard to see. But I strongly disagree about going back to a range of colours. We could adjust the panel of hsl colours we agreed with before (on numerous conversation from owncloud core). I think this will be better.

Refs: owncloud/core#23638
owncloud/contacts#261
owncloud/contacts#306
owncloud/contacts#432

[skjnldsv]

Ps: 😜

Cool, definitely more readable and less intense! 👍

@skjnldsv can you then make sure that anywhere we use generated colors (Mail app account colors, Contacts, profile picture placeholders, etc) this new generator is used?

— @jancborchardt, owncloud/core#23638 (comment)

[skjnldsv]

Okay, I did some researchs, and we possibly could improve the current generator by using this: http://tools.medialab.sciences-po.fr/iwanthue/index.php

[jancborchardt]

@skjnldsv the problem is that with the Hue-approach we definitely get some greens and yellows which will be difficult with black text. If we just go with 20 set colors that will not be a problem, they will be fine everywhere. And using material colors ensures that they are tried and true. (Also, not sure we really need the random button in the Calendar app ;)

[skjnldsv]

I know, I know! I still find it unsuitable to limit an algorithm to only 20 colours when this algorithm had the possibility to be used on much more things than just contacts headers... 😕

You forgot the main focus here. If we dropped the colors list before, was that anyone could generate a color from a hash that would have had the same property than any other colours we could encounter on owncloud. It was a great purpose. I hate being limited to something like customisation. And that's why I created the random colour (because you didn't wanted to let the user choose is own colour IIRC). That's why I created this algo. And that's also why you asked me to implement it on all other apps, contacts, gallery, calendar, mail...

So as always, this is an opensource app, so we can do whatever we want. But this does feel like a great step backward. 😞
(But we're only talking on the colors generator point of view. Obviously, this isn't really as dramatic as I make it sound, it's only an algorithm! 😄)

[elioqoshi]

It's actually a step forward UX wise. You look at it from the technical side which I understand, but to the end user it doesn't have much value. Limiting it to 20 colors definitely ensures it works well and is accessible. In this case keeping it simple is helpful.

[jancborchardt]

@skjnldsv yeah, I mean it’s true like for the automatic color for the user. It’s a great way to do that. But we really have a grave problem of readability here. ;) If that can be fixed while keeping the algorithm then it’s fine. :)

[eppfel]

Although, from users point of view: who can actually tell more then 20 colors apart. I didn't even realize that these are generated, I thought it's a palette. 😁
The bigger question is the palette. I have no problem with the material colors (use them myself sometimes), but with the redesign of nextcloud.com and the design guide I wonder how we should choose this. I think the palette should be chosen in respect to the nextcloud blue. I agree with @elioqoshi that the issue is with too bright colors and I have the feeling: colorful yes, but avoid neon-tron-style-azid-youreyeswillburn...

[skjnldsv]

Okay, let's take over this one! :)
I suggest we don't define a hardcoded palette, but rather generating one based on a red-yellow-blue primary colour. Which should gives us the proper ability to generate readable values.

I used our brand colour as a base and chose a fushia-ish colour and a yellow-ish colour that I thought was in the same tone:

I then created a script (based on eric's mayer colour blend) to generate the missing colours. We can choose how many steps we want and tune our values how we like.
You can see it there: https://codepen.io/skjnldsv/pen/PQOwQm
Result:

What do you think?

[juliushaertl]

@skjnldsv Nice idea to generate that colors based on the nc blue.

Unfortunately this doesn't solve the readability issue with white text: https://codepen.io/anon/pen/QQOywg

Maybe we could also use the same mechanism that is used to generate the default avatars: https://github.com/nextcloud/server/pull/6876/files#diff-b32c4056021bc99b934fe5c4de05b79bR312

[skjnldsv]

It can solve it if we lower the luminosity of some colours, actually, the only really bothering one is the yellow. We can low it down a bit :)

[skjnldsv]

@juliushaertl the avatar mechanism used is the exact same as the one I coded on the javascript lib 2 years ago 😝

https://github.com/owncloud/core/pull/23638/files

[skjnldsv]

New one is ready. It deems far better already.~~ I'd still prefer if we lower a bit the saturation of the yellow~~ Updated image

[skjnldsv]

Yup, does looks really great! :)

[jancborchardt]

@skjnldsv nice, much more readable. :) The top right avatar placeholder is still very bright, is that separate?

[skjnldsv]

@jancborchardt yes, it's generated in php now, I need to port my function on the avatar generator :)