Page MenuHomePhabricator

Calculate a custom blend color for yellow+blue
Closed, ResolvedPublic

Description

Currently, when yellow and blue highlights overlap, the resulting color blend is a grayish olive color. Depending on the context, it hardly reads as "green" at all. See screenshot below. It would be nicer if this blend were a little more recognizably "green."

On the other hand, the nice thing about the current color is that it can easily be distinguished from the pure green and from blends like green-blue and yellow-green-blue. (See below.) Can we define a blue-green blend that's more saturated but is still distinct from other blends?

Details

Related Gerrit Patches:

Event Timeline

The initial colors for the highlight combinations (T149467) have been defined mathematically: colors are combined mixing 50% of each and making the result lighter to make it usable as a background color for readable text. Saturation is increased with the number of colors mixed.

I agree that the specific blend for blue and yellow does not work very well. As mentioned, we need to be careful not to get the color easily confused with the regular green or their combined colors. So I don't think the goal should be for the final color to be recognised as green, but to make it look more consistently as an overlap of the blue and yellow layers.

One approach we can explore is to compensate the difference of luminosity by adding more yellow than blue to the mix. Here are some examples with different variations where the relevant colors are shown next to each other:

Current (50% blue)40% blue30% blue

Thanks @Pginer-WMF. those look a little more green, but are still pretty olive/yellow looking. I talked to Moriel, and she said 1) she can custom code any combination we give her, and 2) she can make it so that when there's a three-color combo, it just goes back to being mathematical. I.e., she can fix it so that whatever we do to yellow-blue, does not affect yellow-blue-green (which is currently a very pleasant shade).

With that, I was wishing for something a little more recognizably "green," yet, of course, still distinct from the other combos in our screenshot above. Something more like the example below. (This was created just by changing hue/saturation/lightness in Photoshop; it's not a formula but just an example of what, psychologically, people might expect to see).

If we have that flexibility, we can go in the direction you proposed. We need to take care of possible confusions not only with green, but also with the combinations of green-yellow and green-orange.

I tried using #CCDECC as blue-yellow and added different screenshots below where this color is used to illustrate how it fits surrounded by other colors:

Looks good. Let's go with #CCDECC then. Moving this to RFP.

Change 357208 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[mediawiki/core@master] RCFilters: Set up custom color for yallow blue combination

https://gerrit.wikimedia.org/r/357208

Mooeypoo claimed this task.Jun 5 2017, 1:54 PM

Combination of c1+c3 (yellow+blue) changed.

I only changed when they're directly combined, not when they're part of a tricolor or quadcolor combination. So yellow+blue+red or yellow+blue+green+red remains as-is. Is that right?

Yes, that's correct. This is a custom blend for yellow+blue only, to #CCDECC

Change 357208 merged by jenkins-bot:
[mediawiki/core@master] RCFilters: Set up custom color for yellow blue combination

https://gerrit.wikimedia.org/r/357208

Checked in betalabs - the screenshot shows a nice visual combos: blue only, blue+yellow, blue+green, blue+green+yellow.

Combinations: green only, green+yellow, blue+green+yellow

QA Recommendation: Resolve

jmatazzoni closed this task as Resolved.Jun 6 2017, 4:04 PM

this looks great! A minor detail, but I'm glad we fixed it. Resolving.