How would you do color calculations? E.g. I have some RGB or hex color. How would you make it e.g. 1...

# compose-web

[Erik]

How would you do color calculations? E.g. I have some RGB or hex color. How would you make it e.g. 15% darker or lighter?

[darkmoon_uk]

I would transform then into the HSB colour space, make hue/brightness/saturation adjustment, then turn back to RGB.

[darkmoon_uk]

RGB is a useful colour space for hardware output, but not much else when it comes to processing visuals ☺️

[Erik]

What if you have a given CSSColorValue? Then you don't know hsl or rgb

[Erik]

I could parse it from toString, but that's ugly and not robust

[darkmoon_uk]

Do you mean parsing a hex colour value?

[darkmoon_uk]

I don't see what wouldn't be robust about that. It's a hex value that encodes exact RGB values. If the concern is that a string could contain any value... Well you could say that just about anything else on the web... Being weakly typed is kind of it's thing 😁

[Erik]

I'm not sure what a CSSColorValue#toString would print

[Erik]

If it's an invalid value, I could parse to the same invalid value. It wouldn't work anyways. That's not the problem. I'd like simply some function that can e.g. make a given colour 15% lighter or darker

[David Herman]

I have my own color class in the library that I'm writing. You can see my code here: https://github.com/varabyte/kobweb/blob/fcda8ebb0f09945c494a5f6a668d59a887d26fa6/f[…]/jsMain/kotlin/com/varabyte/kobweb/compose/ui/graphics/Color.kt

[David Herman]

Chris is right that it's probably not as good as converting to a different color space first but it works OK (and I could always tweak it later if I needed to I suppose)

[David Herman]

Might not be what you're looking for though

[David Herman]

In a different project, I have HSV -> RGB logic: https://github.com/varabyte/kotter/blob/37d1f900596fdb95a12a530df73dbd328bbc023e/k[…]main/kotlin/com/varabyte/kotter/foundation/text/ColorSupport.kt

but not the other way around. I implemented that following the algorithms outlined at https://en.wikipedia.org/wiki/HSL_and_HSV I think, it's been a while. If you want RGB -> HSV you can use the wiki and my code as reference.

[Nick]

I had the same need in doodle. here’s how it was done https://github.com/nacular/doodle/blob/master/Core/src/commonMain/kotlin/io/nacular/doodle/drawing/Color.kt

[Erik]

Thanks all!

Sounds like everybody is doing a lot of this stuff by themselves, while in pure CSS you can do some colour calculations, or with SCSS/SASS it's simply in the language.

This might indicate that there is a need for some colour transformation API in compose-web, that can transform existing CSSColorValue instances. WDYT, worth opening an issue?

Transformations like mixing colours, changing their components (R, G, B, H, S, L/B, A, etc.) in either 0–255 format, 0.0–1.0 format, or hex format (or whatever other colour model), etc., are really common.

[Erik]

It could be implemented like simple addition, subtraction, multiplication, division, etc.
I'm not sure if there is a well defined set of operations on colours, but I can hardly imagine that there isn't some