Qix-/color

How do I invert colors? #162

hendrul posted onGitHub

Invert colors, e.g. get the oposite color, is a must have, don't you think?


There isn't one way to invert a color. If you're talking about a an effect like a film negative, there isn't a whole lot of everyday practical value in such a function. I'll leave it up to you as an exercise ;)

posted by Qix- over 5 years ago

Currently in a situation that we are designing a themed component that needs some of the design to have lines that are inverted from the background color that is dynamic. In the simplest case... white background would be black lines.... or black background would be white lines.

In more complex scenerios I believe this is called complimentary colors which when it comes to theme engines is very common. Someone even built another nom module to handle just this.

@Qix- Your color module has long since been my defacto go to for all things color manipulations related. adding a function for complimentary colors would be amazing.

posted by iDVB over 4 years ago

Inversion can be a complementary color hue shift or a color channel negation (1-c) - among other techniques. "Invert" isn't really specified here. What is the "opposite color" in this case?

That's my point. :)

For complementary colors, simply rotate the hue by 180 degrees: color.rotate(180).

For one-minus inversion, just call color.negate(). Other forms of inversion aren't common and thus don't really warrant their own functions (EDIT: perhaps, that is, until I figure out how to wrangle the API creep...)


Some more color theory: "opposite" here can have a ton of meanings. Remember that many design-related (hsl, etc.) color models are represented as cylinders, dealing with hue as a rotation and the different properties as two-dimensional positions within the cylinder (radius/height, for example). RGB in particular is, more or less, a cube. XYZ/LAB are bizarre, unique shapes altogether.

Does "opposite" or "invert" mean flipping the polarity of the height of the HSL cylinder? Rotating the HCG cylinder? Which axis of the RGB cube? Or is it a combination of all of them?

What's often called "negation" is really just one-minus color inversion (but negate is shorter and easier to understand than oneMinusInvert - perhaps oneMinus? idk, not really work the major version breaking change).

Complementary colors aren't actually inverted but hue-rotated. You can also get two of the tritiary colors by rotating by 360/3=120 degrees in either direction, for example.

Hue rotation has a ton of uses and can be used to build up complex themes where necessary, so the generate hue-rotation function is provided without any assumptions about the context of its use (e.g. for complementary colors). Adding a wrapper around it doesn't really make sense IMO.

Negation would otherwise require some annoying parameter management (e.g. Color.rgb(color.rgb().array().map(n => 255 - n)), even more complicated if you care about the alpha channel) so we provide an implementation for that (.negate()).

Hope that clears things up!

posted by Qix- over 4 years ago

Fund this Issue

$0.00
Funded

Pull requests