Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How do I invert colors? #162

Closed
hendrul opened this issue Sep 30, 2019 · 3 comments
Closed

How do I invert colors? #162

hendrul opened this issue Sep 30, 2019 · 3 comments

Comments

@hendrul
Copy link

hendrul commented Sep 30, 2019

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

@Qix-
Copy link
Owner

Qix- commented Oct 1, 2019

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 ;)

@Qix- Qix- closed this as completed Oct 1, 2019
@iDVB
Copy link

iDVB commented Oct 7, 2020

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.

@Qix-
Copy link
Owner

Qix- commented Oct 7, 2020

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants