0

I came across the invert() function in CSS, which inverts the colors from the color space of the image. It takes an input of a value either in percentage, e.g. invert(60%), or number (0 through 1 inclusive), e.g. invert(.6), and inverts the image colors according to the input.

Then I came across this site which has several examples of using the invert() function

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert

I understand the working of the invert function when input is 1 or 100% but I can't understand the working of invert(50%) as it completely turns the image into grey.

I assumed the formula would be something like :

abs(255 - value of each pixel's individual channel value)

Changing the 255 into 128 doesn't work for turning the image completely to grey?

So I am unable to find the formula that is used to calculate the inverted values.

Improve this question
1
  • also check the comment of the accepted answer to get some offcial links
    – Temani Afif
    Commented Apr 29, 2019 at 8:47

2 Answers 2

Reset to default
2

The formula for invert(amount) is 

amount*(255-value)+(1-amount)*value

so let on 1 you get

255-value

for 0 you get

value

and for .5 you get

.5*(255-value)+(1-.5)*value
127.5-.5*value+.5*value
127.5

which will be gray because value is completely eliminated in the formula

Improve this answer
2
  • Thanks, The formula is Perfect. Btw can you please explain me why does every pixel value get's transformed to grey when amount is .5 (without the formula usage).
    – Vasu Deo.S
    Commented Apr 29, 2019 at 8:56
  • Its easier with the formula. The amount gives an wet/dry ratio. So 0 means dry which is the original signal. 1 means fully wet signal which gives back the full value from the signal based trough the function. .5 means half of both signals. If you would add both signals you will end up with having 255 because the inverse will be dark when original is bright and vice versa. So every color would be white. But you only take the half of both. So effectively you take half of white what is gray.
    – Lee
    Commented Apr 29, 2019 at 9:23
0

Regardless of the the actual function, if it converts any values of (r, g, b) into (128, 128, 128), then it completely turns the image into grey.

255,  50, 100 => 128, 128, 128
200, 255, 200 => 128, 128, 128
...
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.