A modern programming language that makes developers happier.

kotlinlang

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?

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

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

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

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

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 :grin:

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

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

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/frontend/kobweb-compose/src/jsMain/kotlin/com/varabyte/kobweb/compose/ui/graphics/Color.kt#L35|https://github.com/varabyte/kobweb/blob/fcda8ebb0f09945c494a5f6a668d59a887d26fa6/f[…]/jsMain/kotlin/com/varabyte/kobweb/compose/ui/graphics/Color.kt>

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)

Might not be what you're looking for though

In a different project, I have HSV -&gt; RGB logic: <https://github.com/varabyte/kotter/blob/37d1f900596fdb95a12a530df73dbd328bbc023e/kotter/src/main/kotlin/com/varabyte/kotter/foundation/text/ColorSupport.kt#L64|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 -&gt; HSV you can use the wiki and my code as reference.

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|https://github.com/nacular/doodle/blob/master/Core/src/commonMain/kotlin/io/nacular/doodle/drawing/Color.kt>

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.

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