Re: [csswg-drafts] [css-color] Global Color Adjustments (#10262)

To illustrate the goal a bit better, here's a video from a prototype I made. It's a web UI, even if it looks like Windows (which it's supposed to do). In this case it was easy to achieve because all used colors are discrete and explicitly set, so I could just manipulate them programmatically. But often it's not easy to do so, like when colors are inherited or set by variables and/or calculated by expressions or things are componentized in a way that you cannot easily access and change..
In all those cases, a CSS API for color(space) transformation/projection would come to the rescue.

In this example, I'm doing the color adjustment by applying manual calculation to each color variable (css-custom-property).
In order to achieve the desired brightness attentuation I'm doing the following:

- Convert color to HSL
- Apply "Compression" to the lightness value
- Convert back to RGB

I wrote "Compression" because it's similar to an audio compressor:

![image](https://github.com/w3c/csswg-drafts/assets/4985349/5a0c6aac-3e2e-4554-bcc0-4e8dbf10e4a6)


And that's how it looks like:

https://github.com/w3c/csswg-drafts/assets/4985349/25acb80a-ebd8-457b-89bf-6db4ea958309


It's not overly spectacular, but it's a crucial feature and besides this specific case, not reasonably doable without some help from an appropriate CSS API.

-- 
GitHub Notification of comment by softworkz
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10262#issuecomment-2221782149 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 11 July 2024 00:51:49 UTC