Page MenuHome

Outliner: Collection icon color tweaks
ClosedPublic

Authored by Nathan Craddock (natecraddock) on Nov 8 2020, 5:01 AM.

Details

Summary

The icons originally chosen for the collection colors were selected during development and had several issues with contrast in the light theme, and the gray color was not a good choice against gray backgrounds.

The new colors were chosen in an attempt to be more readable in both the Blender dark and light themes. The gray was replaced with pink.

BeforeAfter

Diff Detail

Repository
rB Blender
Branch
collection-icon-colors (branched from master)
Build Status
Buildable 11265
Build 11265: arc lint + arc unit

Event Timeline

Nathan Craddock (natecraddock) requested review of this revision.Nov 8 2020, 5:01 AM
Nathan Craddock (natecraddock) created this revision.

Looking better! Do you have a screenshot of how the hierarchy lines look?

The orange icon is the only one that I find too similar to the color we use for Objects in the Outliner. And there's not so much difference between Yellow, Green and Cyan, but perhaps in the hierarchy lines it is.

You're right, the orange is a little too similar. I'll try making the yellow, green, and cyan more like the old colors.

By the way, I updated the blender_them_as_c.py script so it's easier to change the collection colors.

  • Update red, orange, yellow, green, cyan

I tweaked a few more colors. Orange is a bit tricky to make different but still look good.

I'm also going to modify the colors for the light theme. I think it will be best to have slightly darker colors for the light theme, rather than trying to pick colors that look good on both backgrounds.

I think we should calculate the colors in a mathematical way instead of arbitrarily choosing them.
If we split the HUE of HSL (Hue Saturation Value) colors in 8 we get:

  1. FF0000
  2. FFBF00
  3. 80FF00
  4. 00FF40
  5. 00FFFF
  6. 0040FF
  7. 8000FF
  8. FF00BF

These colors should be used for the Light Theme.


(However as you can see the colors are vibrant because the background isn't a perfect FFFFFF white, meaning that the colors need a bit of desaturation)

On the other hand Dark Theme needs desaturation of the colors as, according to Google's Dark Theme guidelines (https://material.io/design/color/the-color-system.html#tools-for-picking-colors), desaturated colors on dark backgrounds create more contrast than saturated ones.
So using the official Google's color picker in the link and choosing the "200" tagged desaturated color we get:

  1. FFA28A
  2. FFDF81
  3. C1FF91
  4. A2FF9D
  5. 00FFFF
  6. 9EA4FF
  7. C59AFF
  8. FF77D1

Due to the fact that Colors 5 and 8 resulted in visually more saturated, and so vibrant, than the others, picking the "100" tag in the Google's color picker for them results in:

  1. 9AFFFD
  2. FFB2E3

These colors should be used for the Dark Theme

Marco (nacioss) added a comment.EditedNov 12 2020, 4:10 PM

Making a bit more research I discovered that HSL isn't taking the human perception into account, in fact you can't easily distinguish the greens in the previous screenshots.
Fortunately I found an online tool that does take that into account (http://phrogz.net/css/distinct-colors.html) and regenerated the 8 colors:

  1. FF0000
  2. FF9900
  3. CCFF00
  4. 00FF66
  5. 00FFFF
  6. 0066FF
  7. CC00FF
  8. FF0099

These colors are much more distinguishable and should be used for the Light Theme.

For the Dark Theme we have the following desaturated colors:

  1. FFA28A
  2. FFCD80
  3. E4FE98
  4. A0FFAD
  5. 00FFFF
  6. 88D0FF
  7. E38CFF
  8. FB8AC7


Color 5 seems slightly too saturated, but that's probably an issue of the Google's picker not taking some conversions into account... so desaturating it we get:

  1. 9AFFFD

Leading to the final result for the Dark Theme:

So, overall the colors are much more distinguishable and are 8 exact "extremes" of the whole color wheel.
Further, I asked to a color blind friend of mine (who has Deutanomaly) and he told he can easily distinguish all the colors.

I think we should calculate the colors in a mathematical way instead of arbitrarily choosing them.

I disagree.
Human perception of colour and light is not "linear" or mathematical. For various evolutionary reasons, we might be able to easily distinguish certain colours that are very close together from a wavelength/hue point of view but struggle in other areas of the spectrum among more separated hues. Additionally, as our culture arbitrarily picks a colour we call "green", another one we call "blue" and forces us to mentally assign and remember everything in-between as either one or the other, there are cultures that split the colour spectrum in different chunks. It has been shown, for instance, they might struggle to remember the difference between an orange and a red object if in their language they have just one name for both, but they might very well clearly differentiate two different shades of blue because they have distinctive names for those.
Specifically, in your scale, I feel color 3 and color 4 are too similar. They are both "green" to me. I would struggle to distinguish them or remember which is which.
I feel we should not exclude brown. I know it's just a dark orange, but it's quite memorable, as English has a distinct name for it. In a nutshell, I would suggest picking only colours that have an unambiguous common "name" in english, also for the sake of spoken or written communication among coworkers.
My suggestion would be: red, orange, yellow, blue, green, purple/violet, brown, pink; almost as they were picked by a child...

I know I'm someone random that hasn't contribute development code before, but for what it's worth I agree with Matteo. I'd even go one step further and say the best image presented is the initial image on the left in the opening post, with gray at the top and brown on the bottom. The latest pictures many of the colors are difficult to distinguish, and his point about being able to say to a coworker "it's the brown one" is spot on. That isn't possible with the newest proposed colors.

@Matteo Falduto (matteolegna)

Human perception of colour and light is not "linear"

This is fixed in my last post.

I feel we should not exclude brown. I know it's just a dark orange

The problem with dark colors is that against a dark background are vibrant and tend to blend with the background itself, that's why my proposal is to take 8 equidistant HUE's and then desaturate them to have a higher contrast and readability

also for the sake of spoken or written communication among coworkers

What's the issue with these?

  1. Red
  2. Orange
  3. Yellow
  4. Green
  5. Cyan
  6. Blue
  7. Purple
  8. Pink

This is my humble attempt


They can be further tweaked to make them look nicer together, but I feel this way it's easier to unambiguously identify (thus remember) them, like the Power Rangers.

Red e44742
Orange ff9833
Yellow ffe536
Green 50c460
Purple a867ea
Blue 35aff5
Brown ab7846
Pink f1afc8

EDIT: The added value for this approach of first deciding the "names" of the colours we feel right, and then the most unambiguous representation of them, and not vice-versa, is that we have the freedom, in other themes, of picking very different ones that visually suit the rest of the theme better, as long as there is a "definitely red" colour, a "definitely orange" one and so forth, not to mention the integrability of that into a possible Python API etc.

@Marco (nacioss) I appreciate your efforts in picking colors that contrast against the background, but I would rather prioritize distinguishable colors like @Matteo Falduto (matteolegna) has suggested.

Red e44742
Orange ff9833
Yellow ffe536
Green 50c460
Purple a867ea
Blue 35aff5
Brown ab7846
Pink f1afc8

I think the selection here is good (replacing gray with pink). The colors are a little too saturated I think, but I'll try using these.

In D9504#236816, @Zachman wrote:

I think the selection here is good (replacing gray with pink). The colors are a little too saturated I think, but I'll try using these.

Since you like the selection, I've tried to refine it a bit more, trying to improve the colour separation, normalize their luminosity and making the brown less similar to the Object-orange (making it, however, visually a bit weaker).
I've also tried to tune them down at various degrees:


Honestly, I don't mind at all the most vibrant option (option A), as it also helps the thin vertical lines to pop better.

Here are the colours I've used, so whoever wishes, can play and experiment further with them.
A: ed413b ff9833 ffe433 64ce64 3cb2f6 a15be6 966f54 f8bbb6 https://coolors.co/ed413b-ff9833-ffe433-64ce64-3cb2f6-a15be6-966f54-f8bbb6
B: e2605b f1a355 f1dc55 7bcc7b 5db6ea aa75e0 a17f65 f4c5c0 https://coolors.co/e2605b-f1a355-f1dc55-7bcc7b-5db6ea-aa75e0-a17f65-f4c5c0
C: dc7773 e9ac70 e9d970 8dcc8d 77bbe2 b38adc a58c78 f2ccc8 https://coolors.co/dc7773-e9ac70-e9d970-8dcc8d-77bbe2-b38adc-a58c78-f2ccc8
D: d98c89 e3b688 e3d788 9dce9d 8dc0de ba9ada ab9889 f1d5d2 https://coolors.co/d98c89-e3b688-e3d788-9dce9d-8dc0de-ba9ada-ab9889-f1d5d2

Update colors & add light theme colors

@Pablo Vazquez (pablovazquez) I think these are ready now

Small tweaks to light theme

A few more tweaks to light theme to make colors more vibrant

This revision is now accepted and ready to land.Nov 16 2020, 8:52 PM