[css-color-6] add color functions for some (or all) compositing/blending operations

[dbaron]

In #7358 (comment) @LeaVerou wrote:

Whatever default we pick, there will be cases where it's wrong, so it would be nice to offer a way out. How can the author select what the background is composited on? What if we add a color-over() function to do alpha compositing? Pretty sure there are other use cases for it too, and it should be relatively easy to implement.

In today's telecon, for the same reason (and I think not having read Lea's comment) I suggested something similar:

<dbaron> Seems like what Adam's suggesting could also be done with a composite(A over B) color function or similar rather than additional syntax for the contrast function.

In other words, what I was thinking was roughly a composite( <color> <composite-mode> <color> ) function, which has a slightly larger feature space. (Except I didn't want <composite-mode> exactly, because I'd rather not have the source- and dest- prefixes in this case.)

But it's possible we might also want to allow choosing the <blend-mode>.

Opening this issue because it seems like this side discussion probably deserves its own issue, and we can decide whether or not we actually want such a feature.

[LeaVerou]

Thanks for opening the issue?

Are there use cases for every possible <composite-mode>? We don't usually add things for the sake of completeness.
<blend-mode> seems somewhat more useful, but still not nearly as much as simple alpha compositing. I think something simple like color-over() has more chances to be implemented than a bigger "all the things" function.

[dbaron]

I think there are use cases in so far as there are use cases for setting composite modes or blend modes -- combined with the use case for wanting to use such a color function as part of a color contrast function. That said, CSS currently exposes only the blend modes and not the composite mode (which seems a little odd to me).

I admit that partly I suggested the composite mode because they produced a clear syntax with the mode as the operator.

[LeaVerou]

Composite modes and blend modes operate on entire elements. Are there any use cases for isolated colors, that are NOT covered by existing syntax?

[nt1m]

I was actually going to file this issue.

Would the proposed function here allow achieving the same results as this?

background-color: <base-opaque-color>;
background-image: linear-gradient(<semi-transparent-color>, <semi-transparent-color>);

I suggested color-mix() to someone facing this, and I realized that it wouldn't work because you would end up with a semi-transparent color. Maybe some fancy mix involving relative color syntax and color-mix() might work, but at this point, it's more convoluted than it should be.

I'm happy to file a new issue if this use-case isn't covered.

cc @svgeesus @weinig @mdubet

[nt1m]

I think even a simple version that doesn't take a composite-mode would be useful here:
color-composite(<semi-transparent-color>, <base-opaque-color>)

[weinig]

We should consider if extending color-mix with an additional optional blend-mode or composite-mode is viable.

[LeaVerou]

I’m still missing a discussion on use cases. How can we design syntax, and discuss if we need a new function or an extension of color-mix() without a sense of the usage scenarios this would be useful in?!

[nt1m]

#8431 (comment) describes exactly what I would use such a function for. Someone was asking me how they could turn a semi-transparent color into an opaque color by blending one of top of the other.

I'm not sure color-mix() is the right place to put this given color-mix() also supports percentages, but the use-case is definitely there.

[svgeesus]

Some thoughts:

• blending depends on the notion of foreground and background/backdrop, which color-mix() doesn't have
• blending applies to arbitrary image inputs, not just solid colors
• Porter-Duff compositing relies on foreground/background distinction, which color-mix() does not have.

These could be added, but currently color-mix(in space, color1, color2) is exactly the same as color-mix(in space, color2, color1) and adding a foreground/background distinction we would lose that property.

[LeaVerou]

#8431 (comment) describes exactly what I would use such a function for. Someone was asking me how they could turn a semi-transparent color into an opaque color by blending one of top of the other.

I saw that comment, but that is not really a use case, it's an attempted solution to a use case. What were they trying to do that required this operation? What was the actual problem they were trying to solve?

[nt1m]

The person wanted to blend one semi-transparent system color (-apple-[...]-fill only available to UA sheets) on top of an opaque one (Canvas) to get an opaque color.

[nt1m]

I could see people wanting this when working with design systems too that have both opaque & semi-transparent colors

[LeaVerou]

So are there any use cases that require more than simple alpha compositing?